<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
- <name>org.tizen.devtools_2.3.0</name>
+ <name>org.tizen.devtools_2.4.0</name>
<comment></comment>
<projects>
</projects>
Manifest-Version: 1.0
Bundle-ManifestVersion: 1
-Bundle-Name: Tizen Development Environment and Tools
+Bundle-Name: Tizen Tools
Bundle-SymbolicName: org.tizen.devtools;singleton=true
Bundle-Version: 2.4.0
Bundle-Vendor: The Linux Foundation
</div>
<h1>Certificate Registration</h1>
-<p>To create packages or launch applications, you must register an author certificate in the Tizen IDE.</p>
+<p>To build and debug projects, to run projects as applications on an Emulator, dynamic analyzer, or external devices, to create packages, or to launch applications, you must register an author certificate in the Tizen IDE.</p>
<p>To register an author certificate:</p>
<ol>
<li>In the Tizen IDE, go to <strong>Window > Preferences > Tizen SDK > Security Profiles</strong>.</li>
<p>To change distributor certificates, select a table item and then click <strong>Edit</strong> in the <strong>Distributor Certificate</strong> panel.</p>
<p>The first distributor certificate is required and the default information is filled automatically when a profile is created. The second distributor certificate is optional and is used only for special purposes. In general, you are not required to modify distributor certificates.</p>
-<p class="figure">Figure: Author certificate</p>
+<p class="figure">Figure: Security Profiles</p>
-<p align="center"><img alt="Author certificate" src="../images/author_certificate.png" /></p>
+<p align="center"><img alt="Security Profiles" 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>
<ul>
<li>Emulator name (the top row in the menu)
-<p>Display the <strong>Detailed Info</strong> window, showing the following information.</p>
+<p>Display the <strong>Detailed Info</strong> window, showing the <strong>Shortcut Info</strong> and <strong>VM Info</strong> tabs. The <strong>Shortcut Info</strong> tab lists the <a href="keyboard_shortcuts.htm#emulator">Emulator keyboard shortcuts</a> and the <strong>VM Info</strong> tab defines the virtual machine details.</p>
<table border="1">
- <caption>Tab: VM Info</caption>
+ <caption>Table: VM Info tab</caption>
<tbody>
<tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;width:33%;">Feature</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Feature</th>
<th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
</tr>
</tr>
</tbody>
</table>
-<table border="1">
- <caption>Tab: Shortcut Info</caption>
- <tbody>
- <tr>
- <th style="text-align:center;margin-left:auto;margin-right:auto;width:33%;">Function</th>
- <th style="text-align:center;margin-left:auto;margin-right:auto;">Key sequence</th>
- </tr>
-
- <tr>
- <td>Always on Top</td>
- <td>Ctrl+F2</td>
- </tr>
-
- <tr>
- <td>Close</td>
- <td>F4</td>
- </tr>
-
- <tr>
- <td>Control Panel</td>
- <td>Ctrl+F6</td>
- </tr>
-
- <tr>
- <td>Detailed Info</td>
- <td>Ctrl+F1</td>
- </tr>
-
- <tr>
- <td>Force Close</td>
- <td>Ctrl+F4</td>
- </tr>
-
- <tr>
- <td>Rotate next</td>
- <td>Ctrl+Num+9</td>
- </tr>
-
- <tr>
- <td>Rotate prev</td>
- <td>Ctrl+Num+7</td>
- </tr>
-
- <tr>
- <td>Scale next</td>
- <td>Ctrl+F10</td>
- </tr>
-
- <tr>
- <td>Scale prev</td>
- <td>Ctrl+F9</td>
- </tr>
-
- <tr>
- <td>Screen Shot</td>
- <td>Ctrl+F7</td>
- </tr>
-
- <tr>
- <td>Shell</td>
- <td>Ctrl+F5</td>
- </tr>
-
- <tr>
- <td>Home</td>
- <td>F1</td>
- </tr>
-
- <tr>
- <td>Menu</td>
- <td>F2</td>
- </tr>
-
- <tr>
- <td>Power</td>
- <td>F3</td>
- </tr>
-
- <tr>
- <td>Volume +</td>
- <td>Ctrl+Num++</td>
- </tr>
-
- <tr>
- <td>Volume -</td>
- <td>Ctrl+Num+-</td>
- </tr>
- </tbody>
-</table></li>
+</li>
<li><strong>Always On Top</strong>
<p>Select this option to keep the Emulator window on top of other windows.</p>
<td>Yes</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>
- </table>
+ <tr>
+ <td colspan = "2"><a href="event_injec.htm#memory">Memory</a></td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>You can set the low memory status using the radio buttons.</td>
+ </tr>
+ </tbody>
+ </table>
</li>
</ul>
-<p>The ECP supports the following shortcuts:</p>
-<ul>
- <li>Key shortcuts for Windows® and Ubuntu® (Alt + <Key>)
- <table border="1">
- <tbody>
- <tr align="center">
- <th colspan="2">Common</th>
- <th colspan="2">Mobile</th>
- <th colspan="2">Wearable</th>
- </tr>
- <tr align="center">
- <th>Key</th>
- <th>Device</th>
- <th>Key</th>
- <th>Device</th>
- <th>Key</th>
- <th>Device</th>
- </tr>
- <tr align="center">
- <td>D</td>
- <td>Device Tree</td>
- <td>B</td>
- <td>Battery</td>
- <td>B</td>
- <td>Battery</td>
- </tr>
- <tr align="center">
- <td>N</td>
- <td>Network</td>
- <td>R</td>
- <td>RSSI</td>
- <td>A</td>
- <td>3-Axis sensor</td>
- </tr>
- <tr align="center">
- <td>U</td>
- <td>Uninstaller</td>
- <td>A</td>
- <td>3-Axis sensor</td>
- <td>I</td>
- <td>Light</td>
- </tr>
- <tr align="center">
- <td>H</td>
- <td>HDS (Host Directory Sharing)</td>
- <td>I</td>
- <td>Light</td>
- <td>X</td>
- <td>Proximity</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>X</td>
- <td>Proximity</td>
- <td>E</td>
- <td>Pressure</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>E</td>
- <td>Pressure</td>
- <td>V</td>
- <td>Ultraviolet</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>V</td>
- <td>Ultraviolet</td>
- <td>M</td>
- <td>Heart Rate Monitor</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>M</td>
- <td>Heart Rate Monitor</td>
- <td>G</td>
- <td>Touch gesture</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>K</td>
- <td>Ear Jack</td>
- <td>S</td>
- <td>USB</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>S</td>
- <td>USB</td>
- <td>O</td>
- <td>Memory</td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>D</td>
- <td>SD Card</td>
- <td></td>
- <td></td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>L</td>
- <td>Location</td>
- <td></td>
- <td></td>
- </tr>
- <tr align="center">
- <td></td>
- <td></td>
- <td>T</td>
- <td>Telephony</td>
- <td></td>
- <td></td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>Arrows and tabs in the menu
- <table border="1">
- <tbody>
- <tr align="center">
- <th>Key</th>
- <th>Action</th>
- </tr>
- <tr align="center">
- <td>Up Arrow</td>
- <td>Upper menu focus movement</td>
- </tr>
- <tr align="center">
- <td>Down Arrow</td>
- <td>Underneath menu focus movement</td>
- </tr>
- <tr align="center">
- <td>Left Arrow</td>
- <td>Collapse tree menu</td>
- </tr>
- <tr align="center">
- <td>Right Arrow</td>
- <td>Expand tree menu</td>
- </tr>
- <tr align="center">
- <td>Tab</td>
- <td>Move focus to next control</td>
- </tr>
- <tr align="center">
- <td>Shift + Tab</td>
- <td>Move focus to previous control</td>
- </tr>
- <tr align="center">
- <td>Enter</td>
- <td>Menu selection</td>
- </tr>
- </tbody>
- </table>
- </li>
-</ul>
+ <p>Various <a href="keyboard_shortcuts.htm#ecp">keyboard shortcuts</a> are available to execute ECP tasks.</p>
+
<h3 name="ecp-cli">Emulator Control Panel CLI</h3>
<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>This mode is used for one-time message handling.</p></li></ul></li>
-<p class="figure">Figure: Session and shell modes</p>
-<p style="text-align: center;"> <img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /> </p></p>
+<p>This mode is used for one-time message handling.</p></li></ul>
+<p class="figure">Figure: Session and shell modes</p>
+<p align="center"><img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /></p>
<p>In Linux, the bash-based auto-completion is used with the TAB button.</p>
<tr>
<td rowspan="3"><span style="font-family: Courier New,Courier,monospace">hds</span></td>
<td><span style="font-family: Courier New,Courier,monospace">hds mount <host path> <guest path></span></td>
- <td>Enable the host directory sharing feature between the specified <host path> and Emulator's <guest path>. The specified path must be a folder, not a file.</td>
+ <td>Enable the host directory sharing feature between the specified <host path> and the Emulator's <guest path>. The specified path must be a folder, not a file.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">hds unmount <id></span></td>
- <td>Unmount the mounted host directory sharing path. The <span style="font-family: Courier New,Courier,monospace">id</span> is a HDS id and you can get it by <span style="font-family: Courier New,Courier,monospace">hds status</span>.</td>
+ <td>Unmount the mounted host directory sharing path. The <span style="font-family: Courier New,Courier,monospace">id</span> is the HDS ID and you can get it from the <span style="font-family: Courier New,Courier,monospace">hds status</span> command.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace">hds status</span></td>
<td><span style="font-family: Courier New,Courier,monospace">rssi status</span></td>
</tr>
<tr>
- <td rowspan="3">SD card</td>
+ <td rowspan="3">SD card</td>
<td><span style="font-family: Courier New,Courier,monospace">attach</span></td>
<td rowspan="3">Yes</td>
<td rowspan="3">No</td>
<ol>
<li>Run the Emulator Manager and click <strong>Create New</strong> or <strong>Modify</strong>.</li>
<li>In the <strong>File Sharing</strong> section of the VM property, enable the <strong>Sharing</strong> button and select a directory to share.</li>
-<li>Start the Emulator.</li>
-<li>The host machine's directory is shown as <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> in the Emulator.</li>
+<li>Start the Emulator.
+<p>The host machine's directory is shown as <span style="font-family: Courier New,Courier,monospace">/mnt/host</span> in the Emulator.</p></li>
</ol>
<p>You can also add a shared directory in the Emulator Control Panel:</p>
</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> </ul>
<h3 id="Bridge" name="Bridge">Bridge (Bridged Network)</h3>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<li><a href="#da">Dynamic Analyzer</a></li>
<li><a href="#emulator_manager">Emulator Manager</a></li>
<li><a href="#emulator">Emulator</a></li>
+ <li><a href="#ecp">Emulator Control Panel (ECP)</a></li>
+ <li><a href="#enventor">Enventor</a></li>
</ul>
</div></div>
</div>
</tr>
<tr>
<td>Always on Top</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><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>
<td>Ctrl+F2</td>
</tr>
- <tr>
+ <tr>
<td>Close</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>F4</td>
</tr>
- <tr>
+ <tr>
<td>Control Panel</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+F6</td>
</tr>
- <tr>
+ <tr>
<td>Detailed Info</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+F1</td>
</tr>
- <tr>
+ <tr>
<td>Force Close</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+F4</td>
</tr>
- <tr>
+ <tr>
<td>Rotate next</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+Num+9</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+Num+7</td>
</tr>
- <tr>
+ <tr>
<td>Scale next</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+F10</td>
</tr>
- <tr>
+ <tr>
<td>Scale prev</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+F9</td>
</tr>
- <tr>
+ <tr>
<td>Screen Shot</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+F7</td>
</tr>
- <tr>
+ <tr>
<td>Shell</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+F5</td>
</tr>
- <tr>
+ <tr>
<td>Home</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>F1</td>
</tr>
- <tr>
+ <tr>
<td>Menu</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>F2</td>
</tr>
- <tr>
+ <tr>
<td>Power</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>F3</td>
</tr>
- <tr>
+ <tr>
<td>Volume +</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+Num++</td>
</tr>
- <tr>
+ <tr>
<td>Volume -</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+Num+-</td>
</tbody>
</table>
+
+<h2 id="ecp" name="ecp">Emulator Control Panel (ECP)</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>
+ <th colspan="3">Common</th>
+ </tr>
+ <tr>
+ <td>Device Tree</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>Alt+D</td>
+ </tr>
+ <tr>
+ <td>Network</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>Alt+N</td>
+ </tr>
+ <tr>
+ <td>Uninstaller</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>Alt+U</td>
+ </tr>
+ <tr>
+ <td>HDS (Host Directory Sharing)</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>Alt+H</td>
+ </tr>
+ <tr>
+ <td>Upper menu focus movement</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>Up</td>
+ </tr>
+ <tr>
+ <td>Underneath menu focus movement</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>Down</td>
+ </tr>
+ <tr>
+ <td>Collapse tree menu</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>Left</td>
+ </tr>
+ <tr>
+ <td>Expand tree menu</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>Right</td>
+ </tr>
+ <tr>
+ <td>Move focus to next control</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>Tab</td>
+ </tr>
+ <tr>
+ <td>Move focus to previous control</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 + Tab</td>
+ </tr>
+ <tr>
+ <td>Menu selection</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>Enter</td>
+ </tr>
+
+ <tr>
+ <th colspan="3">Mobile</th>
+ </tr>
+ <tr>
+ <td>Battery</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>Alt+B</td>
+ </tr>
+ <tr>
+ <td>RSSI</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>Alt+R</td>
+ </tr>
+ <tr>
+ <td>3-Axis sensor</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>Alt+A</td>
+ </tr>
+ <tr>
+ <td>Light</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>Alt+I</td>
+ </tr>
+ <tr>
+ <td>Proximity</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>Alt+X</td>
+ </tr>
+ <tr>
+ <td>Pressure</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>Alt+E</td>
+ </tr>
+ <tr>
+ <td>Ultraviolet</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>Alt+V</td>
+ </tr>
+ <tr>
+ <td>Heart Rate Monitor</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>Alt+M</td>
+ </tr>
+ <tr>
+ <td>Ear Jack</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>Alt+K</td>
+ </tr>
+ <tr>
+ <td>USB</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>Alt+S</td>
+ </tr>
+ <tr>
+ <td>SD Card</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>Alt+D</td>
+ </tr>
+ <tr>
+ <td>Location</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>Alt+L</td>
+ </tr>
+ <tr>
+ <td>Telephony</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>Alt+T</td>
+ </tr>
+ <tr>
+ <td>Memory</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>Alt+O</td>
+ </tr>
+ <tr>
+ <th colspan="3">Wearable</th>
+ </tr>
+ <tr>
+ <td>Battery</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>Alt+B</td>
+ </tr>
+ <tr>
+ <td>3-Axis sensor</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>Alt+A</td>
+ </tr>
+ <tr>
+ <td>Light</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>Alt+I</td>
+ </tr>
+ <tr>
+ <td>Proximity</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>Alt+X</td>
+ </tr>
+ <tr>
+ <td>Pressure</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>Alt+E</td>
+ </tr>
+ <tr>
+ <td>Ultraviolet</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>Alt+V</td>
+ </tr>
+ <tr>
+ <td>Heart Rate Monitor</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>Alt+M</td>
+ </tr>
+ <tr>
+ <td>Touch gesture</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>Alt+G</td>
+ </tr>
+ <tr>
+ <td>USB</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>Alt+S</td>
+ </tr>
+ <tr>
+ <td>Memory</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>Alt+O</td>
+ </tr>
+</tbody>
+</table>
+
+
+<h2 id="enventor" name="enventor">Enventor</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><p>Close the menu</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Esc</p></td>
+</tr>
+<tr>
+<td><p>Show shortcut keys</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F1</p></td>
+</tr>
+<tr>
+<td><p>Save the file</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F3</p></td>
+</tr>
+<tr>
+<td><p>Show or hide the line numbers</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F5</p></td>
+</tr>
+<tr>
+<td><p>Show or hide the tool bar</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F9</p></td>
+</tr>
+<tr>
+<td><p>Show or hide the console view</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F10</p></td>
+</tr>
+<tr>
+<td><p>Show or hide the status bar</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F11</p></td>
+</tr>
+<tr>
+<td><p>Show the configuration setting window</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>F12</p></td>
+</tr>
+<tr>
+<td><p>Quick save and compile EDC</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+S</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable auto indentation</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+I</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable auto completion</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+O</p></td>
+</tr>
+<tr>
+<td><p>Show or hide virtual images to visualize SWALLOW part objects</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+W</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable part object highlighting</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+H</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable full text view</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Left</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable full live view</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Right</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable full console view</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Up</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable full live/text view</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Down</p></td>
+</tr>
+<tr>
+<td><p>Insert default template code</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+T</p></td>
+</tr>
+<tr>
+<td><p>Enable or disable LiveEdit function</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+E</p></td>
+</tr>
+<tr>
+<td><p>View scale up/bigger font size</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Mouse wheel up</p></td>
+</tr>
+<tr>
+<td><p>View scale down/smaller font size</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Mouse wheel down</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Textblock</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+B</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Image</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+I</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Rectangle</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+R</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Text</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+T</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Spacer</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+S</p></td>
+</tr>
+<tr>
+<td><p>Insert part template code: Swallow</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Shift+W</p></td>
+</tr>
+<tr>
+<td><p>Select all the text</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+A</p></td>
+</tr>
+<tr>
+<td><p>Select the word</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Double-click</p></td>
+</tr>
+<tr>
+<td><p>Undo text changes</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Z</p></td>
+</tr>
+<tr>
+<td><p>Redo text changes</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+R</p></td>
+</tr>
+<tr>
+<td><p>Copy selected text</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+C</p></td>
+</tr>
+<tr>
+<td><p>Paste copied text</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+V</p></td>
+</tr>
+<tr>
+<td><p>Cut selected text</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+X</p></td>
+</tr>
+<tr>
+<td><p>Delete a current line</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+D</p></td>
+</tr>
+<tr>
+<td><p>Find and replace the given word</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+F</p></td>
+</tr>
+<tr>
+<td><p>Go to the given line</p></td> <td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+L</p></td>
+</tr>
+<tr>
+<td><p>Go to the top line</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+Home</p></td>
+</tr>
+<tr>
+<td><p>Go to the bottom line</p></td>
+<td><img alt="ubuntu" src="../images/ubuntu.png" /></td>
+<td><p>Ctrl+End</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>
<li><strong>Analysis and debugging tools</strong>
<ul>
<li><a href="log_view.htm">Log view</a> <p>Shows the log, debug, and exception messages.</p></li>
- <li><a href="t_trace.htm">T-trace</a> <p>This tools allows you to detect and analyze performance issues.</p></li>
</ul></li>
<li><strong>Tips for tool usage</strong>
<ul>
<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 Development Environment and Tools</title>
+ <title>Tizen Tools</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
</div>
<h1 style="text-align:left;"> <font color="#000000">Tizen</font><br/>
- <font size="11">Development Environment and Tools</font></h1>
+ <font size="11">Tools</font></h1>
<p>To help you develop your applications, Tizen provides the Tizen SDK (software development kit) and related tools.</p>
<p>The Tizen SDK consists of the following:</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>Development Tools</title>
+ <title>Tools</title>
</head>
<body class="no-toc" onload="prettyPrint()" style="overflow: auto;">
</div>
<div id="container"><div id="contents"><div class="content">
-<h1><a href="cover_page.htm">Development Tools</a></h1>
+<h1><a href="cover_page.htm">Tools</a></h1>
<ul>
<li><a href="common_tools/tools_common.htm">Common Tools</a>
</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/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/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/html_editor_w.htm">HTML Editor</a></li>
<li><a href="web_tools/html_preview_w.htm">HTML Preview</a></li>
</li>
<li><a href="native_tools/static_analyzer_n.htm">Static Analyzer</a></li>
<li><a href="native_tools/valgrind_n.htm">Valgrind</a></li>
+ <li><a href="native_tools/t_trace_n.htm">T-trace</a></li>
</ul>
</li>
</ul>
</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/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
Tizen 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>In <a href="../../../org.tizen.gettingstarted/html/native/process/setting_properties_n.htm">project properties</a>, you can enable the checker during the <a href="../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#build">building process</a> or code editing stage. You can also perform the checks manually in the <strong>Project Explorer</strong> view by choosing a project, opening the context menu, and selecting <strong>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>
</tr>
<tr>
<td>API version alarm</td>
- <td>The application contains a function, enumerator, or constant which is only provided in a later API version than the one the application is using.</td>
+ <td>The application contains a function, enumerator, or constant which is only provided in a higher API version than the one the application is using.</td>
<td>
<span style="font-family: Courier New,Courier,monospace">{API name} – The API is not supported in API version {version identifier}.</span> <p>For example: <span style="font-family: Courier New,Courier,monospace">account_connect - The API is not supported in API version 2.1.0.</span></p> </td>
<td>Either upgrade the API version in the manifest file accordingly, or stop using the reported API element.</td>
<li><strong>Call Stack Information</strong>: Traces call stack steps to find where the memory block has crashed. If you select a call stack item in the left pane, search result is shown in right pane.</li>
<li><strong>Debug Message</strong>: Provides the latest debug message and filter function similar to the <strong>Log</strong> view. You can search with keywords filtered by tag, pid, and message.</li>
</ul>
+ <p>The <strong>Call Stack</strong> view shows information only when the application crashes.</p>
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</div></div></div>
-<p>The native CLI (command line interface) provides the functional tools for developing Tizen native applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$<TIZEN_SDK_HOME>/tools/ide/bin</span> directory. For developing an application using the CLI, set a path to the CLI directory using the following command:</p>
+<p>The native CLI (command line interface) provides the functional tools for developing Tizen native applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$<TIZEN_SDK_HOME>/tools/ide/bin</span> directory. For developing an application using the CLI, add the CLI directory path to <span style="font-family: Courier New,Courier,monospace;">$PATH</span> using the following command:</p>
<pre class="prettyprint">
-export PATH=$<TIZEN_SDK_HOME>/tools/ide/bin
+export PATH=$PATH:$<TIZEN_SDK_HOME>/tools/ide/bin
</pre>
<p>The CLI in the IDE provides functional commands for:</p>
<th class="note">Note</th>
</tr>
<tr>
-<td class="note">To use the CLI, you need the Java Runtime Environment 6 or later. </td>
+<td class="note">To use the CLI, you need the Java Runtime Environment version 6 or higher.</td>
</tr>
</tbody>
</table>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#ide">Setting CheckPoint in IDE</a></li>
+ <li><a href="#ide">Setting the CheckPoint in the IDE</a></li>
<li><a href="#chart">CheckPoint Chart</a>
</li>
<li><a href="#list">CheckPoint List</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>CheckPoint Analysis</h1>
- <p>The <strong>CheckPoint</strong> tab of the dynamic analyzer shows actual value of variables at <strong>specific point of code (CheckPoint)</strong>. You can trace changes of value of the variable. This can help you when debugging your application.</p>
-<p>CheckPoint can be set in IDE source editor (See <a href="#ide">Setting CheckPoint in IDE</a>), and the value of the CheckPoint is shown in the Dynamic Analyzer.</p>
+ <p>The <strong>CheckPoint</strong> tab of the dynamic analyzer shows the actual value of variables at specific points of code (CheckPoint). You can trace the changes in the variable value to help in the application debugging.</p>
+<p>The CheckPoints can be <a href="#ide">set in the IDE source editor</a>, and the CheckPoint value is shown in the dynamic analyzer.</p>
<p class="figure">Figure: CheckPoint analysis</p>
- <p align="center"> <img src="../images/da_checkpoint_analysis.png"/> </p>
+ <p align="center"> <img alt="CheckPoint analysis" src="../images/da_checkpoint_analysis.png"/> </p>
<p>The tab consists of the following views:</p>
<ol>
- <li><a href="#chart">CheckPoint Chart</a> shows values of all variables.</li>
- <li><a href="#list">CheckPoint List</a> shows values of the selected variable on chart.</li>
+ <li><a href="#chart">CheckPoint chart</a> shows the values of all variables.</li>
+ <li><a href="#list">CheckPoint list</a> shows the values of a specific variable selected on the chart.</li>
</ol>
-<!-- Setting CheckPoint in IDE -->
- <h2 name="ide" id="ide">Setting CheckPoint in IDE</h2>
- <p>To use CheckPoint Analysis, you must set CheckPoint in IDE source editor first. CheckPoint can be set on a valid point, which is <strong>variable in executable line</strong>.</p>
- <p>Refer to the following Figure. If you want to trace the value of variable "testString" on line 59, select "testString" and open the context menu.</p>
- <p class="figure">Figure: IDE source editor</p>
- <p align="center"> <img src="../images/da_checkpoint_ide_editor.png" /></p>
- <p>To add CheckPoint, click "Add to Checkpoint of Dynamic Analyzer" in context menu. Then you can see a dialog as following Figure. You can get values from two points (Before line execution and After line execution).</p>
- <p class="figure">Figure: Add to CheckPoint</p>
- <p align="center"> <img src="../images/da_checkpoint_add_checkpoint.png" /></p>
- <p>Added-CheckPoints are shown on a vertical ruler and CheckPoint View. You can remove CheckPoints on CheckPoint View. After setting CheckPoint, you can use <strong>CheckPoint Analysis</strong> using "Profile As > Profile With Dynamic Analyzer".
- <p class="figure">Figure: CheckPoint icon on vertical ruler</p>
- <p align="center"> <img src="../images/da_checkpoint_ruler.png"/> </p>
- <p class="figure">Figure: CheckPoint View</p>
- <p align="center"> <img src="../images/da_checkpoint_view_checkpoint.png"/> </p>
+ <h2 name="ide" id="ide">Setting the CheckPoint in the IDE</h2>
+ <p>To use the CheckPoint Analysis, you must set a CheckPoint in the IDE source editor. The CheckPoint can be set on any valid point, which is a variable in an executable line:</p>
+
+ <ol><li>To trace, for example, the value of the <span style="font-family: Courier New,Courier,monospace">testString</span> variable on line 59 (as shown in the following figure), select the variable and open the context menu.
+ <p align="center"> <img alt="IDE source editor" src="../images/da_checkpoint_ide_editor.png" /></p> </li>
+ <li>To add the CheckPoint, click <strong>Add to Checkpoint of Dynamic Analyzer</strong> in the context menu.
+ <p>The following dialog opens. You can select to get values from 2 points (before and after the line execution).</p>
+ <p align="center"> <img alt="Adding the CheckPoint" src="../images/da_checkpoint_add_checkpoint.png" /></p>
+ <p>The added CheckPoints are shown on a vertical ruler (shown below) and the <strong>CheckPoint</strong> view.</p>
+ <p align="center"> <img alt="CheckPoint on a vertical ruler" src="../images/da_checkpoint_ruler.png"/></p>
+</li>
+ <li>To remove a CheckPoint, use the <strong>CheckPoint</strong> view.
+ <p align="center"> <img alt="CheckPoint view" src="../images/da_checkpoint_view_checkpoint.png"/></p>
+ </li></ol>
+
+ <p>After setting the CheckPoint, run the CheckPoint analysis from the project context menu by selecting <strong>Profile As > Profile With Dynamic Analyzer</strong>.</p>
+
+
+ <h2 id="chart" name="chart">CheckPoint Chart</h2>
+ <p>The CheckPoint chart displays values of all variables set in the IDE. Each chart includes information of all CheckPoints. The information is shown with the format:</p>
+<p><span style="font-family: Courier New,Courier,monospace">Variable type + variable name + (source file name: line number) + Before/After</span></p>
+ <p>Every time a CheckPoint is executed on a target device or the Emulator, a color bar marks the time on the chart and a tooltip shows the detailed value at the time. To see specific CheckPoint values, select the chart. To see all values from a CheckPoint, see the <a href="#list">CheckPoint list</a>.</p>
+ <p class="figure">Figure: CheckPoint chart</p>
+ <p align="center"> <img alt="CheckPoint chart" src="../images/da_checkpoint_chart.png" /> </p>
+ <p>You can also <a href="da_timeline_n.htm#config">add a Timeline chart</a> to the tab using the <strong>Add</strong> button.</p>
+ <p class="figure">Adding a Timeline chart</p>
+ <p align="center"> <img alt="Adding a Timeline chart" src="../images/da_checkpoint_timeline_chart.png" /> </p>
-<!-- CheckPoint Chart -->
- <h2 id="chart" name="chart">CheckPoint Chart</h3>
- <p>The CheckPoint chart displays values of all variables set in IDE. Each chart includes information of each CheckPoint. An information format is shown with the format : 'Variable type + variable name (source file name: line number) Before/After'.</p>
- <p>Every time CheckPoint is executed on target device or emulator, Color bar marks the time on the chart and a tooltip shows detail value at the time.</p>
- <p>You can see specific CheckPoint values by selecting the chart. All values from the CheckPoint are shown on <a href="#list">CheckPoint List</a>.
- <p class="figure">Figure: CheckPoint Chart</p>
- <p align="center"> <img src="../images/da_checkpoint_chart.png" /> </p>
- <p>You can also add some of the Timeline chart using Add button. Refer to <a href="da_timeline_n.htm#config">Chart Configuration</a>.
- <p class="figure">Add Timeline Chart</p>
- <p align="center"> <img src="../images/da_checkpoint_timeline_chart.png" /> </p>
-<!-- CheckPoint List -->
<h2 id="list" name="list">CheckPoint List</h2>
- <p>When you select one of the CheckPoint, all values from the CheckPoint are shown in list view.</p>
- <p>If the variable is an array type, all element of it are shown in the list. Likewise, if the variable is a structure type, all members of it are shown.</p>
- <p>You can relate a function call with the CheckPoint values of a specific time. If you select a row in the list, the related function call is highlighted in the <a href="da_timeline_n.htm#trace">Call Trace List</a>.</p>
- <p class="figure">Figure: CheckPoint List (array)</p>
- <p align="center"> <img src="../images/da_checkpoint_list_array.png" /> </p>
- <p class="figure">Figure: CheckPoint List (structure)</p>
- <p align="center"> <img src="../images/da_checkpoint_list_struct.png" /> </p>
-
+ <p>When you select a CheckPoint in the CheckPoint chart, all the values from the CheckPoint are shown in a list view.</p>
+ <p>If the variable is an array type, all its elements are shown in the list. If the variable is a structure type, all its members are shown.</p>
+
+ <p class="figure">Figure: CheckPoint list (array)</p>
+ <p align="center"> <img alt="CheckPoint list (array)" src="../images/da_checkpoint_list_array.png" /> </p>
+ <p class="figure">Figure: CheckPoint list (structure)</p>
+ <p align="center"> <img alt="CheckPoint list (structure)" src="../images/da_checkpoint_list_struct.png" /> </p>
+ <p>You can relate a function call with the CheckPoint values of a specific time. If you select a row in the list, the related function call is highlighted in the <a href="da_timeline_n.htm#trace">Call Trace</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>
<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>
- <li><strong>Start Time</strong> is the time when the API was called.</li>
- <li><strong>Elapsed Time</strong> is the time that elapses while an event occurs.</li>
- <li><strong>PID</strong> is the name of the API.</li>
- <li><strong>TID</strong> is the ID of the thread that called the API.</li>
- <li><strong>FD</strong> is the ID of the file.</li>
- <li><strong>API Name</strong> is the name of the API.</li>
+ <li><strong>#</strong> (integer) shows the sequence number of the API calls.</li>
+ <li><strong>Start Time</strong> (time) is the time when the API was called.</li>
+ <li><strong>Elapsed Time</strong> (time) is the time that elapses while an event occurs.</li>
+ <li><strong>PID</strong> (integer) is the API process ID.</li>
+ <li><strong>TID</strong> (integer) is the ID of the thread that called the API.</li>
+ <li><strong>FD</strong> (integer) is the ID of the file.</li>
+ <li><strong>API Name</strong> (text) is the name of the API.</li>
<li><strong>Parameter</strong> shows the input parameters of the API.</li>
- <li><strong>Return</strong> is the return value of the called API.</li>
- <li><strong>Error code</strong> shows the value returned by the API. In case of the APIs associated with glibc, the value is the description of the error number.</li>
+ <li><strong>Return</strong> (integer) is the return value of the called API.</li>
+ <li><strong>Error code</strong> (text) shows the value returned by the API. In case of the APIs associated with glibc, the value is the description of the error number.</li>
+
</ul>
<h2 name="details" id="details">File Details</h2>
<p>The dynamic analyzer can also contain the following tabs and pages:</p>
<ul>
+ <li><a href="da_thread_n.htm">Thread</a>
+ <p>The <strong>Thread</strong> tab shows information about thread and synchronization.</p></li>
<li><a href="da_file_n.htm">File</a>
<p>The <strong>File</strong> tab shows an analysis of file usage.</p> </li>
- <li><a href="da_thread_n.htm">Thread</a>
- <p>The <strong>Thread</strong> tab shows information about thread and synchronization.</p> </li>
<li><a href="da_network_n.htm">Network</a>
<p>The <strong>Network</strong> tab shows information about the network.</p></li>
-<li><a href="da_opengl_n.htm">OpenGL</a>
- <p>The <strong>OpenGL</strong> tab shows information about OpenGL® 2.0 and EvasGL.</p></li>
-<li><a href="da_checkpoint_n.htm">CheckPoint</a>
- <p>The <strong>CheckPoint</strong> tab shows information about CheckPoint set via IDE.</p></li>
+
<li><a href="da_opengl_n.htm">OpenGL</a>
+ <p>The <strong>OpenGL</strong> tab shows information about OpenGL® 2.0 and EvasGL.</p></li>
+
<li><a href="da_checkpoint_n.htm">CheckPoint</a>
+ <p>The <strong>CheckPoint</strong> tab shows an analysis of variable values at specific points of code.</p> </li>
</ul>
<p>The tabs on the main display can be reordered by dragging and dropping.</p>
<li><strong>OpenGL</strong>: This template shows detailed information of the openGL layer.</li>
<li><strong>Energy</strong>: This template informs you of power consumption of target device.</li>
<li><strong>Custom</strong>: This template can be configured by selecting the desired features. If you change a feature in another template, the change effects the custom template.</li>
- </ul>
- <p>The overall overhead is an accumulation of each selected feature's overhead. Using feature that has a high overhead like OpenGL ES analysis may reduce a processing speed of the application. </p> </br>
-
+ </ul>
+ <p>The overall overhead is an accumulation of each selected feature's overhead. Using a feature that has a high overhead, such as the OpenGL ES analysis, can reduce the processing speed of the application.</p>
<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 align="center"><img alt="Features tab" src="../images/feature_details.png" /></p>
<li><strong>OpenGL® ES analysis</strong>: Displays information about the OpenGL® layer.</li>
<li><strong>UI Event</strong>: Displays UI events that occur on the device.</li>
- </ul></li>
+ </ul></li>
+
<li><strong>Options</strong>
<p>The configuration settings define the dynamic analyzer configuration.</p>
<p class="figure">Figure: Options tab</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_024.png" />: Gesture event</p></li>
+ <li><p><img src="../images/color_20.png" />: Touch event</p></li>
+ <li><p><img src="../images/color_24.png" />: Gesture event</p></li>
<li><p><img src="../images/color_22.png" />: Orientation event</p></li>
</ul></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>The <strong>Edit chart</strong> dialog
(activated with the <strong>Add</strong> button at the top-left corner of the dynamic analyzer) 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 align="center"> <img alt="Chart Configuration" src="../images/da_edit_chart_dialog.png" /> </p>
<p>The chart classifies the visibility states by color:</p>
<div id="container"><div id="contents"><div class="content">
<h1>Other Views</h1>
- <p>The dynamic analyzer provides the <strong>Callstack</strong>, <strong>Snapshot</strong>, <strong>Startup</strong> views.</p>
+ <p>The dynamic analyzer provides the <strong>Callstack</strong>, <strong>Snapshot</strong>, and <strong>Startup</strong> views.</p>
<h2 name="callstack" id="callstack">Callstack</h2>
<p>The <strong>Callstack</strong> view shows the callstack of the selected API or item.</p>
<li>CPU usage <p>The bar chart shows the CPU use percentage of the selected point. The chart shows the usage of up to 4 CPUs.</p></li>
<li>Process size <p>The circular chart shows the process memory size of the selected point.</p></li>
</ol>
-
+
<h2 name="startup" id="startup">Startup</h2>
<p>The <strong>Startup</strong> view shows the startup information of the application.</p>
<p class="figure">Figure: Startup view</p>
- <p align="center"><img alt="Snapshot view" src="../images/startup_view.png" /></p>
+ <p align="center"><img alt="Startup view" src="../images/startup_view.png" /></p>
<p>The <strong>Startup</strong> view contains the following components:</p>
<ul>
<li><strong>PID</strong> (integer) is the process ID.</li>
- <li><strong>Stage</strong></li>
+ <li><strong>Stage</strong> is the current stage of the application:</li>
<ul>
- <li>library mapping : an linking phase that the linker maps library dependencies of the application.</li>
- <li>main : an execution phase from the beginning to <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> in <span style="font-family: Courier New,Courier,monospace">main().</span></li>
- <li>create : an execution phase of <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> in <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (This callback function is executed at the start of the application).</li>
- <li>service : an execution phase of <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> in <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (This callback function is executed when another application sends the launch request to the application).</li>
+ <li><strong>library mapping</strong> is a linking phase when the linker maps the library dependencies of the application.</li>
+ <li><strong>main</strong> is an execution phase from the beginning to the <span style="font-family: Courier New,Courier,monospace">ui_app_main()</span> function within the <span style="font-family: Courier New,Courier,monospace">main()</span> function.</li>
+ <li><strong>create</strong> is an execution phase of the <span style="font-family: Courier New,Courier,monospace">app_create_cb()</span> callback within the <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (this callback function is executed at the start of the application).</li>
+ <li><strong>service</strong> is an execution phase of the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback within the <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback_s</span> struct (this callback function is executed when another application sends a launch request to the application).</li>
</ul>
<li><strong>Start Time</strong> is the start time of the stage.</li>
<li><strong>End Time</strong> is the end time of the stage.</li>
</ul>
-
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</li>
<li><a href="#tools">Tool Functions</a>
</li>
- <li><a href="#shortcuts">Shortcut Keys</a>
- </li>
<li><a href="#conf">Configuration Setting</a>
</li>
</ul>
<li><a href="#liveview">Using the Live View</a></li>
<li><a href="#feedbacks">Interactive Feedback</a></li>
<li><a href="#tools">Tool Functions</a></li>
- <li><a href="#shortcuts">Shortcut Keys</a></li>
<li><a href="#conf">Configuration Setting</a></li>
</ul>
<tr>
<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>
-</tbody>
-</table>
-
-<h2 id="shortcuts" name="shortcuts">Shortcut Keys</h2>
-<p>Enventor supports various shortcut keys. The following table shows the shortcut keys and their functions.</p>
-
-<table>
-<caption>Table: Shortcut keys</caption>
-<colgroup>
-<col width="25%" />
-<col width="75%" />
-</colgroup>
-<tbody>
-<tr>
-<th>Shortcut Key</th>
-<th>Function</th>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Esc</p></td>
-<td rowspan="1" colspan="1"><p>Close the menu.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F1</p></td>
-<td rowspan="1" colspan="1"><p>Show shortcut keys.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F3</p></td>
-<td rowspan="1" colspan="1"><p>Save the file.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F5</p></td>
-<td rowspan="1" colspan="1"><p>Show or hide the line numbers.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F9</p></td>
-<td rowspan="1" colspan="1"><p>Show or hide the tool bar.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F10</p></td>
-<td rowspan="1" colspan="1"><p>Show or hide the console view.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F11</p></td>
-<td rowspan="1" colspan="1"><p>Show or hide the status bar.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>F12</p></td>
-<td rowspan="1" colspan="1"><p>Show the configuration setting window.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + S</p></td>
-<td rowspan="1" colspan="1"><p>Quick save and compile EDC.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + I</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable auto indentation.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + O</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable auto completion.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + W</p></td>
-<td rowspan="1" colspan="1"><p>Show or hide virtual images to visualize SWALLOW part objects.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + H</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable part object highlighting.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Left</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable full text view.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Right</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable full live view.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Up</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable full console view.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Down</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable full live/text view.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + T</p></td>
-<td rowspan="1" colspan="1"><p>Insert default template code.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + E</p></td>
-<td rowspan="1" colspan="1"><p>Enable or disable LiveEdit function.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Mouse wheel up</p></td>
-<td rowspan="1" colspan="1"><p>View scale up/bigger font size.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Mouse wheel down</p></td>
-<td rowspan="1" colspan="1"><p>View scale down/smaller font size.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + B</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Textblock.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + I</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Image.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + R</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Rectangle.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + T</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Text.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + S</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Spacer.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Shift + W</p></td>
-<td rowspan="1" colspan="1"><p>Insert part template code: Swallow.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + A</p></td>
-<td rowspan="1" colspan="1"><p>Select all the text.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Double Click</p></td>
-<td rowspan="1" colspan="1"><p>Select the word.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Z</p></td>
-<td rowspan="1" colspan="1"><p>Undo text changes.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + R</p></td>
-<td rowspan="1" colspan="1"><p>Redo text changes.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + C</p></td>
-<td rowspan="1" colspan="1"><p>Copy selected text.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + V</p></td>
-<td rowspan="1" colspan="1"><p>Paste copied text.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + X</p></td>
-<td rowspan="1" colspan="1"><p>Cut selected text.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + D</p></td>
-<td rowspan="1" colspan="1"><p>Delete a current line.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + F</p></td>
-<td rowspan="1" colspan="1"><p>Find and replace the given word.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + L</p></td>
-<td rowspan="1" colspan="1"><p>Go to the given line.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + Home</p></td>
-<td rowspan="1" colspan="1"><p>Go to the top line.</p></td>
-</tr>
-<tr>
-<td rowspan="1" colspan="1"><p>Ctrl + End</p></td>
-<td rowspan="1" colspan="1"><p>Go to the bottom line.</p></td>
+<td rowspan="1" colspan="1"><p>Show <a href="../common_tools/keyboard_shortcuts.htm#enventor">shortcut keys</a>.</p></td>
</tr>
</tbody>
</table>
<li><a href="#privileges"><privileges> 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>
+ <li><a href="#widget_app"><widget-application> Element</a></li>
+ <li><a href="#watch_app"><watch-application> Element</a></li>
+
</ul>
</div></div>
</div>
<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 appid="org.tizen.test" exec="test" main="true" update-period="0">
+ <icon>icon.png</icon>
+ <label>test</label>
+ <support-size preview="preview.png">2x2</support-size>
</widget-application>
</manifest>
</pre>
<span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize"><support-size></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="#watch_app"><watch-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="#watch_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="#watch_label"><label></a></span>
+ </td>
+ </tr>
</tbody>
</table>
<td> <p>API version number for the application.</p>
<p><strong>Expected value:</strong> </p>
<ul>
-<li>Number in the "x.y" format</li>
+<li>Number in the "x.y.z" format</li>
</ul>
</td>
</tr>
<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>
+ <li><span style="font-family: Courier New,Courier,monospace">2x2</span> (in mobile and wearable)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">4x1</span> (in mobile only)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">4x2</span> (in mobile only)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">4x3</span> (in mobile only)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">4x4</span> (in mobile only)</li>
</ul>
</td>
</tr>
<span style="font-family: Courier New,Courier,monospace">exec</span> attribute</th>
</tr>
<tr>
-<td><p>Widget application executable file path.</p>
+<td><p>Widget application executable file name.</p>
<p><strong>Expected value:</strong></p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace">String</span></li>
<span style="font-family: Courier New,Courier,monospace">preview</span> attribute</th>
</tr>
<tr>
-<td><p>Relative path to the preview image.</p>
+<td><p>Relative path to the preview image. The image is shown on the home screen when the user tries to select the widget.</p>
<p><strong>Expected value:</strong> </p>
<ul>
</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 appid="org.tizen.test" exec="test" main="true" update-period="0">
+ <icon>icon.png</icon>
+ <label>test</label>
+ <support-size preview="preview.png">2x2</support-size>
</widget-application>
</pre>
+
+<h2 id="watch_app"><watch-application> Element</h2>
+ <p>The <span style="font-family: Courier New,Courier,monospace"><watch-application></span> element represents the settings for the watch 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"><watch-application></span> element</th>
+ </tr>
+ <tr>
+ <td> <p>Settings for the watch 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="#watch_icon"><icon></a></span></td>
+ <td>1</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace"><a href="#watch_label"><label></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="#watch_appid">appid</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#watch_exec">exec</a></span></li>
+ <li><span style="font-family: Courier New,Courier,monospace"><a href="#watch_ambient-support">ambient-support</a></span></li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ <table border="1" id="watch_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>Watch 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="watch_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>Watch 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="watch_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>Watch 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="watch_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>Watch 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="watch_ambient-support"><tbody>
+ <tr>
+ <th style="text-align:left;margin-left:auto;margin-right:auto;">
+ <span style="font-family: Courier New,Courier,monospace">ambient-support</span> attribute</th>
+ </tr>
+ <tr>
+ <td><p>Indicates whether the application draws the ambient mode UI itself. If the value is <span style="font-family: Courier New,Courier,monospace">false</span>, the system default ambient mode UI is shown when the devices enters the ambient mode.</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>
+
+
+ <p><strong>For example:</strong></p>
+
+ <pre class="prettyprint">
+<watch-application appid="org.tizen.watchsample" exec="watchsample" ambient-support="true">
+ <icon>watchsample.png</icon>
+ <label>watchsample</label>
+</watch-application>
+</pre>
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
</div>
<h1>PO File Editor</h1>
- <p>PO file editor is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files to generate compiled gettext <span style="font-family: Courier New,Courier,monospace">.mo</span> files, which are used by Tizen native applications to localize the user interface.</p>
+
+<p>PO file editor is used to edit <span style="font-family: Courier New,Courier,monospace">.po</span> files to generate compiled <a href="https://www.gnu.org/software/gettext/" target="_blank">gettext</a> <span style="font-family: Courier New,Courier,monospace">.mo</span> files, which are used by Tizen native applications to localize the user interface. <strong>gettext</strong> is GNU Translation Project, an internationalization and localization (i18n) system commonly used for writing multilingual programs on Unix-like computer OS.</p>
<table class="note"><tbody>
<tr>
<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 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> in the <span style="font-family: Courier New,Courier,monospace">res/po</span> directory.
<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>
<!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>
+ <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="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>
+<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>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 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>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">Figure: Project Wizard</p>
- <p align="center">
- <img alt="Project Wizard" width="75%"
- 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 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>
+ <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, 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>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">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 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>Application type</td>
+ <td>Select the application type. It can be previewed in the description view on the right.</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>
+ <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>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>
+ <td>Package name</td>
+ <td>Enter the name for the package to be created.</td>
</tr>
- <tr>
- <td>Package name</td>
- <td>Enter the name for the package to be created.</td>
- </tr>
- <tr>
- <td>Profile</td>
- <td>select the project's profile.</td>
+ <tr>
+ <td>Profile</td>
+ <td>Select the project's profile.</td>
</tr>
<tr>
<td>Version</td>
- <td>select the profile version.</td>
+ <td>Select the profile version.</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.
+ <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>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>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>
+ </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>
- <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>
- </div>
+<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>
\ No newline at end of file
<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"/> <img alt="Wearable native" src="../images/wn_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>
<td>Video</td>
<td>Shows the workflow of the video and radio system.</td>
</tr>
- <tr>
+ <!--<tr>
<td>Web</td>
<td>Shows the workflow of the Web Runtime and Web Engine.</td>
- </tr>
+ </tr>-->
<tr>
<td>Window manager</td>
<td>Shows the state changes of the window system, such as show, hide, resize, and rotation.</td>
<p><strong>Application life-cycle analysis example:</strong></p>
-<p>You can analyze your application life-cycle using the T-trace in both native and Web applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>
+<p>You can analyze your application life-cycle using the T-trace in native <!--and Web--> applications. The following figure illustrates the various states of a Tizen application. The T-trace shows you the state changes as well as how much time is consumed at each state while the application is launching, running, and terminating.</p>
<p class="figure">Figure: Application life-cycle</p>
<p style="text-align: center;"> <img alt="Application life-cycle" src="../images/ttrace_lifecycle.png" /> </p>
-<p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. For Web applications, enable the <strong>Web</strong> tag too. When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>
+<p>To analyze the application life-cycle, run the T-trace with the <strong>Application manager</strong> tag. <!--For Web applications, enable the <strong>Web</strong> tag too.--> When the tracing process is finished, the T-trace generates a report, as shown in the following figure.</p>
<p class="figure">Figure: Application life-cycle report</p>
<p style="text-align: center;"> <img alt="Application life-cycle report" src="../images/ttrace_report.png" /> </p>
<li><a href="static_analyzer_n.htm">Static Analyzer</a> <p>This tool is used for source code analysis to finds bugs in Tizen applications.</p></li>
<li><a href="valgrind_n.htm">Valgrind</a> <p>This memory profiling tool can be used to detect memory errors or memory leaks in an application.</p></li>
+
+ <li><a href="t_trace_n.htm">T-trace</a> <p>This tools allows you to detect and analyze performance issues.</p></li>
</ul></li></ul>
</body>
-</html>
+</html>
\ No newline at end of file
<p>The Code Beautifier is a smart decompression tool that beautifies any HTML, CSS, or JavaScript source by reformatting and re-indenting without breaking the content structure.
</p>
<p>The Code Beautifier has the following features for beautifying HTML, CSS, and JavaScript:</p>
- <ul><li>Beautifying minified code</li>
+ <ul><li>Beautifying code to a minified form</li>
<li>Inserting indentation</li>
<li>Inserting carriage returns</li>
</ul>
<p>You can beautify code in 3 ways:</p>
- <ul><li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Beautifier</strong>. A beautified file with the extension <span style="font-family: Courier New,Courier,monospace">.beaut.<extension></span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
- <li>In the <strong>Editor </strong> context menu, select <strong>Code Beautifier</strong>.</li>
+ <ul><li>In the <strong>Project Explorer</strong> view, choose a CSS or JavaScript file in the project, open the context menu, and select <strong>Code Beautifier</strong>. A beautified file with the extension <span style="font-family: Courier New,Courier,monospace">.beaut.<extension></span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
+ <li>In the <strong>Source Editor</strong>, open the context menu, and select <strong>Code Beautifier</strong>.</li>
+
<li>Use the <strong>Ctrl + 6</strong> hotkey.</li></ul>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
</ul>
<p>You can minify code in 3 ways:</p>
<ul>
- <li>In the <strong>Project Explorer</strong> view, right-click a CSS or JavaScript file in the project and select <strong>Code Minifier</strong>. A minified (compressed) file with the extension <span style="font-family: Courier New,Courier,monospace">.min.<extension></span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
- <li>In the <strong>Editor</strong> context menu, select <strong>Code Minifier</strong>.</li>
+ <li>In the <strong>Project Explorer</strong> view, choose a CSS or JavaScript file in the project, open the context menu, and select <strong>Code Minifier</strong>. A minified (compressed) file with the extension <span style="font-family: Courier New,Courier,monospace">.min.<extension></span> is generated, and a notification dialog is displayed in the lower-right section of the IDE.</li>
+ <li>In the <strong>Source Editor</strong>, open the context menu, and select <strong>Code Minifier</strong>.</li>
<li>Use the <strong>Ctrl + 5</strong> hotkey.</li>
</ul>
</div>
<h1>Command Line Interface</h1>
- <p>The Web CLI (command line interface) provides the functional tools for developing Tizen Web applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$<TIZEN_SDK_HOME>/tools/ide/bin</span> directory. For developing an application using the CLI, set a path to the CLI directory using the following command:</p>
+<p>The Web CLI (command line interface) provides the functional tools for developing Tizen Web applications without the Tizen IDE. It includes the entire developing process from creating to running and debugging the project. The CLI is located in the <span style="font-family: Courier New,Courier,monospace;">$<TIZEN_SDK_HOME>/tools/ide/bin</span> directory. For developing an application using the CLI, add the CLI directory path to <span style="font-family: Courier New,Courier,monospace;">$PATH</span> using the following command:</p>
<pre class="prettyprint">
-export PATH=$<TIZEN_SDK_HOME>/tools/ide/bin
+export PATH=$PATH:$<TIZEN_SDK_HOME>/tools/ide/bin
</pre>
<p>The CLI in the IDE provides the functional commands for:</p>
<th class="note">Note</th>
</tr>
<tr>
-<td class="note">To use the CLI, you need the Java Runtime Environment 6 or later. </td>
+<td class="note">To use the CLI, you need the Java Runtime Environment version 6 or higher. </td>
</tr>
</tbody>
</table>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">To activate content assist for user-defined and third party APIs, add the WIDL feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
+ <td class="note">To activate content assist for user-defined and third party APIs, add the WIDL (Web Interface Definition Language) feature in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.
<p>In the mobile Web JavaScript editor, you can activate content assist by . (dot). It can be set by checking the <strong>Enable auto activation</strong> checkbox in <strong>Window > Preferences > JavaScript > Editor > Content Assist</strong>.</p></td>
</tr>
</tbody>
</ul>
<p>To check CSS:</p>
<ul>
- <li>Manual check <p>In the editor pop-up menu, select <strong>Check CSS</strong>.</p>
+ <li>Manual check
+ <p>In the <strong>Project Explorer</strong> view, choose a CSS file, open the context menu, and select <strong>Check CSS</strong>.</p>
+ <p>In the <strong>CSS Editor</strong>, open the context menu, and select <strong>Check CSS</strong>.</p>
+
<table class="note">
<tbody>
<tr>
<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>To preview a CSS file in the <strong>CSS Preview</strong>, choose a CSS file in the <strong>Project Explorer</strong> view, open the context menu, and select <strong>Preview</strong> or use the <strong>Ctrl + 4</strong> hotkey.</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>
<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>
<h2 id="use" name="use">Using the JavaScript Analyzer</h2>
-<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>To analyze a Web application with the JSA in the Tizen IDE, choose the target project in the <strong>Project Explorer</strong> view, open the context menu, and select <strong>Check JavaScript Rules</strong>.</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>To analyze a Web application with the Stale Object Checker in the IDE:</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).
+<ol><li>Choose the target project in the <strong>Project Explorer</strong> view, open the context menu, 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>
</ul>
<p>You can check JavaScript in the following ways:</p>
<ul>
- <li>Manual check <p>In the editor pop-up menu, select <strong>Check JS</strong>.</p></li>
+ <li>Manual check <p>In the <strong>Project Explorer</strong> view, choose a JavaScript file, open the context menu, and select <strong>Check JS</strong>.</p>
+ <p>In the <strong>JS Editor</strong>, open the context menu, and select <strong>Check JS</strong>.</p></li>
+
<li>Automatic check <p>If you save a file, the project is built and syntax is checked automatically.</p></li>
</ul>
<h1>Live Editing</h1>
<p>Live editing is a special feature, which applies source changes to the running application immediately without building, packaging, and relaunching the application. All changes made in the HTML, CSS, and JavaScript files are automatically and immediately reflected in the running application.</p>
- <p>This feature can be used in the <a href="html_preview_w.htm">HTML Preview</a> view and when running the application in the Emulator or the Web Simulator (in mobile applications only).</p>
+ <p>This feature can be used in the <a href="html_preview_w.htm">HTML Preview</a> view and when running the application in the Emulator or the Web Simulator.</p>
<table class="note">
<tbody>
This feature has the following limitations:
<ul>
<li>The Tizen Device API does not work on the Emulator.</li>
- <li>Only specific device APIs are supported by the Web Simulator (live editing is available in mobile applications only).</li>
+ <li>Only specific device APIs are supported by the Web Simulator.</li>
<li>Live editing does not work in certain network environments.</li>
</ul>
</td>
</tbody>
</table>
-<p>To enable live editing in the IDE, go to <strong>Run > Run Configuration > Tizen Web Application > {PROJECT NAME}</strong> and check <strong>Enable live editing</strong> at the run configuration. If you are running your application for the first time, you must first create a new configuration.</p>
+<p>To enable live editing in the Tizen IDE, go to <strong>Run > Run Configuration > Tizen Web Application > <PROJECT NAME></strong> (or in the project's context menu, select <strong>Run As > Run Configuration > Tizen Web Application > <PROJECT NAME>)</strong> and check <strong>Enable live editing</strong> at the run configuration. If you are running your application for the first time, you must first create a new configuration.</p>
<p>You can <a href="set_ide_preference_w.htm#live">set live editing preferences</a> in the IDE.</p>
<!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>
+ <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="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>
+<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>
- <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>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" width="75%"
- 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 templates or
- online samples.</td>
- </tr>
- <tr>
- <td>Application type</td>
- <td>Select the application type. It can be previewed in the
- description view on the right.</td>
+ <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>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>
+ <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>Profile</td>
- <td>select the project's profile.</td>
+ <td>Select the project's profile.</td>
</tr>
- <tr>
+ <tr>
<td>Version</td>
- <td>select the profile version.</td>
+ <td>Select the profile version.</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>
+ <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>
+ <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>
+ <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>
+ </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>
- <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>
- </div>
+<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>
\ No newline at end of file
<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>
+ <p>Go to <strong>Tizen SDK > Web > Chrome</strong>.</p>
<p>The Google Chrome™ browser location is automatically set as default if the Chrome™ browser is installed in your system.</p>
<p>In case you install the browser in a custom path, the IDE cannot automatically detect the path and you must set the location manually.</p>
<h2 id="editor" name="editor">Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor</strong>.</p>
<p>Tizen SDK provides advanced editor features, such as file path content assist. These features are required to search files in the project.</p>
<p><strong>Project Resource Lookup Setting > Excluded Folders</strong>: Specify the folders that you want to exclude from searching files.</p>
<h2 id="config" name="config">Configuration Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Editor > Configuration Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor > Configuration Editor</strong>.</p>
<p>To stop error messages from being displayed if you incorrectly modify the <span style="font-family: Courier New,Courier,monospace">config.xml</span> source file, select the <strong>Don't show error message</strong> check box.</p>
<h2 id="css" name="css">CSS Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>>Editor > CSS Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor > CSS Editor</strong>.</p>
<p>Tizen provides the W3C CSS validation parser for checking the CSS syntax.</p>
<p>You can set the following validation times:</p>
<ul>
<p>You can exclude CSS files from parsing by specifying pattern strings, separated by a comma, in the <strong>Exclude files that match these patterns from validation</strong> field. The default value in this field is <strong>min, jquery, jqm-docs, phonegap, sencha, TAU(Tizen Advanced UI), globalize, coderdeck, modernizr</strong>. For instance, since parsing the <span style="font-family: Courier New,Courier,monospace">jquery.mobile-1.0a4.1.min.css</span> file generates many warnings, the default pattern string values exclude the parsing of this CSS file.</p>
<h2 id="html_editor" name="html_editor">HTML Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Editor > HTML Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor > HTML Editor</strong>.</p>
<p>You can set the visibility of the breadcrumb control in the HTML editor. If you clear the <strong>Show breadcrumb</strong> checkbox, the breadcrumb control is not visible in the HTML editor.</p>
<h2 id="javascript" name="javascript">JavaScript Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Editor > JavaScript Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor > JavaScript Editor</strong>.</p>
<p>In the JavaScript Editor, you can modify several <a href="http://www.jslint.com/lint.html" target="_blank">JSLint</a> options. JSLint is a JavaScript code quality tool.</p>
<h2 id="json" name="json">Json Editor</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Editor > Json Editor</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Editor > Json Editor</strong>.</p>
<p>You can insert spaces for tabs in JSON by selecting the <strong>Insert Spaces for Tabs</strong> check box. In the <strong>Number of spaces to indent </strong> field, enter the number of spaces to indent for tabs.</p>
<h2 id="nls" name="nls">National Language Support</h2>
</pre>
<h2 id="launch" name="launch">Launch</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Launch</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Launch</strong>.</p>
<p>Check the option, if you want to launch the application even when the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file has an error. The option is not checked by default.</p>
<h2 id="live" name="live">Live Editing</h2>
- <p>In the <strong>Tizen SDK > Web</strong> side menu, go to <strong>Live Editing</strong>.</p>
+ <p>Go to <strong>Tizen SDK > Web > Live Editing</strong>.</p>
<p>You can select only 1 preview preference option, which is whether file content or editor content in shown in the application:</p>
<ul>
<li>Select <strong>File</strong> to change the application when a file is saved.</li>
<li>You can run only 1 application at a time. If your application uses the Application API to invoke another service or application, use the Web simulator features to simulate results for the required callbacks.</li>
<li>DST (Daylight Saving Time) -related methods of the Time API are not supported.</li>
<li>For the Messaging module, the attachment is not supported, and the message body is always loaded.</li>
- <li>If you are using the jQuery Mobile swipe widget, the swipe action is simulated by mouse click and unclick events. jQuery Mobile does not recognize swipe actions if they begin or end outside the widget, and if the mouse pointer is dragged slowly or not in a straight line.</li>
+ <li>If you are using the jQuery Mobile swipe component, the swipe action is simulated by mouse click and unclick events. jQuery Mobile does not recognize swipe actions if they begin or end outside the component, and if the mouse pointer is dragged slowly or not in a straight line.</li>
</ul>
<h3 id="spec" name="spec">W3C/HTML5 Specifications</h3>
<?NLS TYPE="org.eclipse.help.toc"?>
-<toc label="Development Tools" topic="html/cover_page.htm">
+<toc label="Tools" topic="html/cover_page.htm">
<topic href="html/common_tools/tools_common.htm" label="Common Tools">
<topic href="html/common_tools/project_explorer.htm" label="Project Explorer View"></topic>
<topic href="html/common_tools/certificate_registration.htm" label="Certificate Registration"></topic>
<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/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/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/native_tools/da_file_n.htm" label="File Analysis"></topic>
<topic href="html/native_tools/da_network_n.htm" label="Network Analysis"></topic>
<topic href="html/native_tools/da_opengl_n.htm" label="OpenGL® Analysis"></topic>
+ <topic href="html/native_tools/da_checkpoint_n.htm" label="CheckPoint Analysis"></topic>
<topic href="html/native_tools/da_range_info_n.htm" label="Range"></topic>
<topic href="html/native_tools/da_views_n.htm" label="Other Views"></topic>
</topic>
<topic href="html/native_tools/static_analyzer_n.htm" label="Static Analyzer"></topic>
<topic href="html/native_tools/valgrind_n.htm" label="Valgrind"></topic>
+ <topic href="html/native_tools/t_trace_n.htm" label="T-trace"></topic>
</topic>
</toc>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
- <name>org.tizen.gettingstarted_2.3.0</name>
+ <name>org.tizen.gettingstarted_2.4.0</name>
<comment></comment>
<projects>
</projects>
<p>For more information about developing Tizen applications, see:</p>
<ul>
-<li><a href="../../org.tizen.devtools/html/cover_page.htm">Tizen Development Environment and Tools</a></li>
+<!--<li><a href="../../org.tizen.ui.guides/html/cover_page.htm">Tizen UI Guides</a></li>-->
<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>
+<li><a href="../../org.tizen.devtools/html/cover_page.htm">Tizen Tools</a></li>
</ul>
<p>Before using Tizen development tools and documentation, make sure you are familiar with the license details.</p>
<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="event_handling_n.htm">Event Handling</a></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>
</li>
<li>Obtaining a message for specific error code
-<p>Use the get_error_message() to query the meaning of each error code.
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function to query the meaning of each error code.
The pointer returned is a static variable, you must not free it.</p>
<p>For example:</p>
...
}
</pre>
-<p>The get_error_message() function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">get_error_message()</span> function takes an error code as an input and returns its corresponding error messages, such as "Location service is not available".</p>
</li>
</ul>
<p>Every error code in the Tizen native API is represented as an integer value.</p>
<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="#menu">Menu Key</a></li>
- <li><a href="#back">Back Key</a></li>
- <li><a href="#media">Media Key</a></li>
+ <li><a href="#menu">Menu Key Events</a></li>
+ <li><a href="#back">Back Key Events</a></li>
+ <li><a href="#rotary">Rotary Events</a></li>
+ <li><a href="#media">Media Key Events</a></li>
</ul>
</div></div>
</div>
<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 <strong>Menu</strong> and <strong>Back</strong> hardware keys, and the circular wearable devices provide rotary components for emitting rotary events. Both mobile and wearable devices support the media key events. You can use the Efl Extension Event API (in <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL__EXTENSION__EVENTS__GROUP.html">wearable</a> applications) to handle the <strong>Menu</strong> key, <strong>Back</strong> key, and rotary events.</p>
-<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>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">For more information on using Efl Extension for <strong>Menu</strong> key, <strong>Back</strong> key, and rotary 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="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>Follow the guidelines below to ensure predictable and reliable navigation in your application.</p>
+
+<h2 id="menu" name="menu">Menu Key Events in Mobile Applications</h2>
+<p> All Tizen mobile devices provide a <strong>Menu</strong> key, which is used to present users a context-dependent set of options. Pressing the <strong>Menu</strong> key shows a hierarchical option menu. The following figure illustrates the <strong>Menu</strong> key position and the option menu.</p>
<p class="figure">Figure: Menu key</p>
<p align="center"><img src="../../images/menu_key.png" alt="Menu key" /></p>
-<h2 id="back" name="back">Back Key</h2>
-<p>All Tizen devices provide a <strong>Back key</strong> for backward navigation. A back button in the application UI is not required.</p>
-<p>The Back key must support the following features:</p>
+<h2 id="back" name="back">Back Key Events in Mobile Applications</h2>
+<p>All Tizen mobile devices provide a <strong>Back</strong> key for backward navigation. A back button in the application UI is not required.</p>
+<p>The <strong>Back</strong> key must support the following features:</p>
<ul>
<li>Hiding the software keyboard</li>
<li>Closing windows</li>
<li>Handling backward scene transitions</li>
</ul>
-<table class="note">
- <tbody>
- <tr>
- <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>
- </tr>
- </tbody>
-</table>
+<h2 id="rotary" name="rotary">Rotary Events in Wearable Applications</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>You can use the rotary events to change your application state (for example, change the value of the scroller or slider, change selected items, or zoom the image).</p>
+
+<p class="figure">Figure: Rotary device</p>
+<p align="center"><img alt="Rotary device" src="../../images/rotary_event.png" /> </p>
-<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">Media key</a> API.</p>
+<h2 id="media" name="media">Media Key Events</h2>
+<p>Tizen supports handling <strong>Media</strong> key events, such as play, stop, and pause events, from media devices (such as Bluetooth remote controller and earjack).</p>
+<p>To handle the <strong>Media</strong> key events, use the Media key API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.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>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">data</span></td>
<td>Used to store private data of an application.
- <p>To get the application data directory path, call the app_get_data_path() of the App Common module.</p></td>
+ <p>To get the application data directory path, call the <span style="font-family: Courier New,Courier,monospace;">app_get_data_path()</span> function of the App Common module.</p></td>
<td>Owner: Read and Write<p>Others: Access denied</p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">res</span></td>
<td>Used to read resource files that are delivered with the application package.
- <p>To get the application resource directory path, call the app_get_resource_path() of the App common module.</p>
+ <p>To get the application resource directory path, call the <span style="font-family: Courier New,Courier,monospace;">app_get_resource_path()</span> function of the App common module.</p>
</td>
<td>Owner: Read<p>Others: Access denied</p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">shared/data</span></td>
<td>Used to share data with other applications.
- <p>To get this directory path of your own application, call the app_get_shared_data_path() of the App common module.</p>
+ <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_data_path()</span> function of the App common module.</p>
<p>Files stored in the shared/data directory can be read by other applications. Do not store application's private data in the shared/data directory.</p></td>
<td>Owner: Read and Write<p>Others: Read</p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">shared/res</span></td>
<td>Used to share resources with other applications. The resource files are delivered with the application package.
- <p>To get this directory path of your own application, call the app_get_shared_resource_path() of the App common module.</p>
+ <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_resource_path()</span> function of the App common module.</p>
<p>Files stored in the shared/res directory can be read by other applications. Do not pack application's private resource files in the shared/res directory.</p>
</td>
<td>Owner: Read<p> Others: Read</p></td>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">shared/trusted</span></td>
<td>Used to share data with family of trusted applications. The family applications signed with the same certificate can access data in the shared/trusted directory.
- <p>To get this directory path of your own application, call the app_get_shared_trusted_path() of the App common module.</p>
+ <p>To get this directory path of your own application, call the <span style="font-family: Courier New,Courier,monospace;">app_get_shared_trusted_path()</span> function of the App common module.</p>
</td>
<td>Owner: Read and Write<p>Family: Read and Write</p><p> Others: Access denied</p></td>
</tr>
</tbody>
</table>
-<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>
+<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 <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function of Storage module. The following table lists the sub-directories of the media directory.</p>
<table>
<caption>Table: Media directory hierarchy</caption>
</table>
-<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>
+<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 <span style="font-family: Courier New,Courier,monospace;">storage_get_directory()</span> function of the Storage module. The following table lists the sub-directories of the external storage directory.</p>
<table>
<caption>Table: External storage directory hierarchy</caption>
<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>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. Privileges have a level according to their hierarchy. The public level is the minimum privilege level, and any application developed by using the SDK can use these privileges. The platform level is the highest privilege level, and an application that needs theses privileges requires a platform-signed certificate.</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>
<tbody>
<tr>
<th>Privilege</th>
+<th>Level</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>public</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>public</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>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>public</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>platform</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>platform</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>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/calendar.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/contact.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>public</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>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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>
+<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>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/reboot</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</p></td>
+<td rowspan="1" colspan="1"><p>Restarting device</p></td>
+<td rowspan="1" colspan="1"><p>The application can restart the device.</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>public</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>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/shortcut</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings. This privilege was deprecated after the Tizen version 2.3.</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/tethering.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/web-history.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/widget.viewer</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Showing widgets</p></td>
+<td rowspan="1" colspan="1"><p>The application can show widgets, and information from their associated applications, on the home screen.</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>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
<caption>Table: Wearable native API privileges</caption>
<tbody>
<tr>
-<th>Privilege</th>
+<th>Privilege</th>
+<th>Level</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.get</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/alarm.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.kill</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/appmanager.launch</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/call</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/callhistory.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/camera</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/content.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/datasharing</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/display</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/download</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/haptic</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/healthinfo</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/keymanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/location.enable</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/message.write</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.profile</span></p></td><td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc</span></p>
+</td><td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/nfc.cardemulation</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.info</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/power</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/push</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/reboot</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</p></td>
+<td rowspan="1" colspan="1"><p>Restarting device</p></td>
+<td rowspan="1" colspan="1"><p>The application can restart the device. </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>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/screenshot</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/secureelement</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/systemsettings.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/telephony.admin</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/widget.viewer</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Showing widgets</p></td>
+<td rowspan="1" colspan="1"><p>The application can show widgets, and information from their associated applications, on the home screen.</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/window.priority.set</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
<tr>
<th>Privilege</th>
+<th>Level</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediastorage</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
+<p>If your application does not have this privilege, no file operations into the media storage area 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><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/externalstorage</span></p></td>
+<td rowspan="1" colspan="1"><p>public</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>
+<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 must be protected with a privilege. You can find the absolute path of the external storage with the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API functions, such as <span style="font-family: Courier New,Courier,monospace;">storage_get_root_directory()</span>.</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>
+<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>public</p></td>
+<td rowspan="1" colspan="1"><p>External storage application data</p></td>
+<td rowspan="1" colspan="1"><p>Many devices support external storages, such as MicroSD card or USB memory. As with the media storage, the access to an external storage must be protected with a privilege.</p>
+<p>If your application does not have this privilege, no file operations with the application data stored in the external storage area succeed and you receive a permission denied error. If you have this privilege, you can store data in the application-specific directory of the external storage. You can find the path for storing data in the external storage with, for example, the <span style="font-family: Courier New,Courier,monospace;">app_get_external_data_path()</span>, <span style="font-family: Courier New,Courier,monospace;">app_get_external_cache_path()</span>, and <span style="font-family: Courier New,Courier,monospace;">app_get_external_shared_data_path()</span> functions.</p></td>
+</tr>
+
</tbody>
</table>
</td>
</tr>
<tr>
- <td><a href="../../../../org.tizen.native.mobile.apireference/group__WIDGET__MODULE.html">Widget</a></td>
+ <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.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>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><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.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>
</tr>
<tr>
- <td><a href="../../../../org.tizen.native.wearable.apireference/group__WIDGET__MODULE.html">Widget</a></td>
+ <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.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>
<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>
+ <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>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><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.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>
<!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>
+ <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 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>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>
-
- <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>
- <h2 id="create_n" name="create_n">To Create a HelloWorld
- Application</h2>
- <ol class="tutorstep">
- <li>Creating the HelloWorld Project
- <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 > </strong> {Platform} (e.g.
- MOBILE-x.x or WEARABLE-x.x) <strong> > 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 align="center">
- <img alt="Creating the helloworld project" width="75%"
- 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>
- <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>
-
- <li>Configuring the Application and Creating the Application
- Code
- <p>To configure the application:</p>
- <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>
- <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">
+<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>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>
+
+<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>
+ <h2 id="create_n" name="create_n">To Create a HelloWorld Application</h2>
+ <ol class="tutorstep">
+ <li>Creating the HelloWorld Project
+ <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|WEARABLE-<version> > 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 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>
+ <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>
+
+<li>Configuring the Application and Creating the Application Code
+ <p>To configure the application:</p>
+ <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><li>Ownership of returned strings
+<p>All strings returned as pointers must be freed by the caller unless stated otherwise.</p>
+<p>To not free memory can lead to memory leaks. Insufficient system memory triggers a system low memory notification and some applications can 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_id_string != NULL)
free(app_id_string);
}
-</pre>
- </li>
-
- <li>Handles
- <p>A handle provides means to manage an instance associated
- with it. Handles are widely used in Tizen Native API for API
- compatibility reasons. Creation and destruction functions
- (create/destroy) are provided for each handle type. They do not
- create and destroy the handle itself, but they operate on the
- instance associated with a given handle. It means that a handle
- is not valid until a corresponding create function has been
- called and the handle is not valid after a corresponding
- destroy function has been called. Also accessor functions
- (getters/setters) are provided to access members of the hidden
- structure identified by a given handle.</p> <pre
- class="prettyprint">// Text message is represented by a handle
+</pre></li>
+
+<li>Handles
+<p>A handle provides means to manage an instance associated with it. Handles are widely used in Tizen Native API for API compatibility reasons. Creation and destruction functions (create/destroy) are provided for each handle type. They do not create and destroy the handle itself, but they operate on the instance associated with a given handle. It means that a handle is not valid until a corresponding create function has been called and the handle is not valid after a corresponding destroy function has been called. Also accessor functions (getters/setters) are provided to access members of the hidden structure identified by a given handle.</p>
+<pre class="prettyprint">// Text message is represented by a handle
messages_message_h sms_msg;
// Create message and associate it with this handle
// Change the properties of the text message
messages_set_text(sms_msg,"Hello, how are you?");
messages_add_address (sms_msg,"01020157919", MESSAGE_RECIPIENT_TO);
-</pre>
- </li>
-
- <li>Asynchronous function calls
- <p>Some of Tizen native API functions are asynchronous.</p>
- <p>An asynchronous function starts the processing and
- returns before this processing is finished. However, sometimes
- one should know, when this processing is finished. In such
- cases, waiting for the processing completion notification must
- be properly implemented.</p>
- </li>
- <li>Code assist
- <p>Tizen IDE provides the API assist and API hover features
- to make writing content in the native editor quick and
- efficient.</p>
- <p>Press CTRL+SPACE while editing your codes to see
- available APIs as follows:</p>
-
- <p class="figure">Figure: 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>To create the application UI:</p>
- <ol type="a">
- <li>Add an interface
-
- <p>In this tutorial, there are the following exercises:</p>
- <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>
- <li>a label with several lines of text</li>
- <li>a button</li>
- </ul>
- </li>
- </ul>
- </li>
-
- <li>Add an application skeleton with appcore
- <p>A pointer to important objects is stored in the following
- data structure.</p> <pre class="prettyprint">typedef struct appdata
+</pre></li>
+
+<li>Asynchronous function calls
+<p>Some of Tizen native API functions are asynchronous.</p>
+<p>An asynchronous function starts the processing and returns before this processing is finished. However, sometimes one should know, when this processing is finished. In such cases, waiting for the processing completion notification must be properly implemented.</p>
+</li>
+<li>Code assist
+<p>Tizen IDE provides the API assist and API hover features to make writing content in the native editor quick and efficient.</p>
+<p>Press CTRL+SPACE while editing your codes to see available APIs as follows:</p>
+
+<p class="figure">Figure: 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.</p>
+
+<p>To create the application UI:</p>
+<ol type="a">
+<li>Add an interface
+
+<p>In this tutorial, there are the following exercises:</p>
+<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>
+ <li>a label with several lines of text</li>
+ <li>a button</li>
+ </ul>
+</li>
+</ul>
+</li>
+
+<li>Add an application skeleton with appcore
+<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
Evas_Object *win;
Evas_Object *naviframe;
} appdata_s;
</pre>
- <p>
- The pointer is created and initialized to contain only zeros in
- the <span style="font-family: Courier New, Courier, monospace">main()</span>
- function. The same applies for the structure of the <span
- style="font-family: Courier New, Courier, monospace">app_event_callback_s</span>
- type, which holds the app-core related callbacks.
- </p> <pre class="prettyprint">static bool
+<p>The pointer is created and initialized to contain only zeros in the <span style="font-family: Courier New,Courier,monospace">main()</span> function. The same applies for the structure of the <span style="font-family: Courier New,Courier,monospace">app_event_callback_s</span> type, which holds the app-core related callbacks.</p>
+
+<pre class="prettyprint">static bool
app_create(void *data)
{
appdata_s *ad = data;
}
</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <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>
- <li>Create the GUI objects
- <p>
- The GUI is created with the <span
- style="font-family: Courier New, Courier, monospace">create_gui()</span>
- function. It receives a pointer to fill in the "ad"
- structure.
- </p>
- <p>Create the function and mark it static, since it is
- reachable only from the current compilation unit (which allows
- the compiler produce faster and smaller code).</p>
- <p>Inside the function, create a window and set its name and
- title to "Hello World". Add a callback on the
- "delete,request" event (when the window is to be
- closed).</p> <pre class="prettyprint">static void
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">For more information on Appcore, see <a href="../../../../org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm#fundamentals">Handling the Application Fundamentals</a>.</td>
+ </tr>
+ </tbody>
+ </table>
+</li>
+<li>Create the GUI objects
+<p>The GUI is created with the <span style="font-family: Courier New,Courier,monospace">create_gui()</span> function. It receives a pointer to fill in the "ad" structure.</p>
+<p>Create the function and mark it static, since it is reachable only from the current compilation unit (which allows the compiler to produce faster and smaller code).</p>
+<p>Inside the function, create a window and set its name and title to "Hello World". Add a callback on the "delete,request" event (when the window is to be closed).</p>
+
+<pre class="prettyprint">static void
create_gui(appdata_s *ad)
{
// Create the window
// elm_win_autodel_set(ad->win, EINA_TRUE);
</pre>
- <p>The conformant goes inside the window first. Everything
-
created from now on is inside it.</p> <pre class="prettyprint"> // Create the conformant
+<p>The conformant goes inside the window first. Everything created from now on is inside it.</p>
+<pre class="prettyprint"> // Create the conformant
ad->conformant = elm_conformant_add(ad->win);
// Set the conformant use as much horizontal and vertical space as
// in proportion to each other
elm_win_resize_object_add(ad->win, ad->conformant);
- // Show the conformant since all widgets are hidden by default
+ // Show the conformant since all UI components are hidden by default
evas_object_show(ad->conformant);
</pre>
- <p>The naviframe is useful for applications showing multiple
- screens: it enables displaying a screen, switching to another,
- moving back to the first (and doing the same with several
- screens).</p>
- <p>Only one screen is built: the naviframe is created and
- put inside the conformant.</p> <pre class="prettyprint"> // Create the naviframe
+<p>The naviframe is useful for applications showing multiple screens: it enables displaying a screen, switching to another, moving back to the first (and doing the same with several screens).</p>
+<p>Only one screen is built: the naviframe is created and put inside the conformant.</p>
+
+<pre class="prettyprint"> // Create the naviframe
ad->naviframe = elm_naviframe_add(ad->conformant);
elm_object_content_set(ad->conformant, ad->naviframe);
evas_object_show(ad->conformant);
</pre>
- <p>The box is probably the most common container; it
- arranges a set of widgets in a vertical or horizontal way.</p> <pre
- class="prettyprint"> // Create the box
+<p>The box is probably the most common container; it arranges a set of UI components in a vertical or horizontal way.</p>
+<pre class="prettyprint"> // Create the box
Evas_Object *box = elm_box_add(ad->naviframe);
// Set the box vertical
evas_object_show(box);
</pre>
-
<p>Labels hold text with formatting and over multiple lines.</p>
-
<pre class="prettyprint"> // Create the label
+<p>Labels hold text with formatting and over multiple lines.</p>
+<pre class="prettyprint"> // Create the label
Evas_Object *label = elm_label_add(box);
// The label expands when its contents need more space
evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
// Show the label
evas_object_show(label);
</pre>
- <p>The last widget is the button. It exits the application
-
when clicked.</p> <pre class="prettyprint"> // Create the button
+<p>The last UI component is the button. It exits the application when clicked.</p>
+<pre class="prettyprint"> // Create the button
Evas_Object *button = elm_button_add(box);
// The box expands when its contents need more space
// the callback is below
evas_object_smart_callback_add(button, "clicked", clicked_cb, NULL);
- // Add the widget at the end of the box; since the axis starts in the top left
+ // Add the UI component at the end of the box; since the axis starts in the top left
// corner and the box is vertical, the end of the box is below the label
elm_box_pack_end(box, button);
evas_object_show(button);
</pre>
- <p>This is how to set the window displaying everything on
-
screen at once.</p> <pre class="prettyprint"> // Show window after the GUI is set up
+<p>This is how to set the window displaying everything on screen at once.</p>
+<pre class="prettyprint"> // Show window after the GUI is set up
evas_object_show(ad->win);
}
-</pre>
- </li>
- <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> <pre class="prettyprint">static void
+</pre>
+</li>
+<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>
+<pre class="prettyprint">static void
clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
{
elm_exit();
}
</pre>
- </li>
- </ol>
- </li>
-
- <li>Building and Packaging the Application
- <p>
- After you have finished implementing your application, you must <a
- href="../process/building_app_n.htm">build it</a>.
- </p>
-
- <p>After building, the Tizen IDE automatically packages the
- project.</p>
- </li>
-
- <li>Running and Debugging the Application
- <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 align="center">
- <img alt="Running the project" src="../../images/hello.png" />
- </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">
+</li>
+</ol>
+</li>
+
+ <li>Building and Packaging the Application
+ <p>After you have finished implementing your application, you must <a href="../process/building_app_n.htm">build it</a>.</p>
+
+ <p>After building, the Tizen IDE automatically packages the project.</p>
+</li>
+
+<li>Running and Debugging the Application
+ <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 application running in the Emulator.</p> <p class="figure">Figure: Running the project</p>
+ <p align="center"><img alt="Running the project" src="../../images/hello.png" /></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']);
<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><p>Select the project in the <strong>Project Explorer</strong> view.</p></li>
- <li><p>Right-click the project and select <strong>Project > Build Package > TPK</strong>.</p></li>
+ <li><p>In the project context menu, select <strong>Project > Build Package > TPK</strong>.</p></li>
</ol>
<p>You can develop a UI project and service or shared library projects as a package.</p>
<p>To develop a multi-project native application:</p>
<ol>
- <li><a href="#creating">Create a form-based or tab-based UI application</a>.</li>
+ <li><a href="#creating">Create a UI application</a>.</li>
<li>Create a service application.</li>
<li>Package a multi-project application using Tizen IDE:
<ol type="a">
<p>The application performance optimization features include measuring and improving application performance.</p>
- <p>An application that performs poorly and gives delayed responses to user actions mars good user experience. Some parts of the code can be optimized to avoid these delays.</p>
+ <p>If an application performs poorly and gives delayed responses to user actions, the user experience can suffer. To avoid this situation, some parts of the code must be optimized.</p>
<p>Most processors that are used today in mobile phones are based on multi-core technologies and so you must consider utilizing this hardware feature. To effectively utilize multi-core capabilities, you need to divide your code to run on several cores simultaneously. Traditionally, this is done by using <span style="font-family: Courier New,Courier,monospace">pthreads</span>, but this method has an overhead of initialization and termination of threads, and can generate potential runtime errors. Several solutions exist to exploit multi-core capabilities easily. These solutions abstract <span style="font-family: Courier New,Courier,monospace">pthreads</span>, allowing you to focus on the native application development without worrying about thread level management.</p>
<li><strong>Replay</strong>
<p>Clicking <strong>Replay</strong> repeats a previous analysis. You can use data from a previous dynamic analyzer instance or a saved trace data file. If the target or application do not match, the button is disabled.</p> </li>
<li><strong>Process</strong>
- <p>The <strong>Process</strong> combo box has a process list of the application being traced. By default, the dynamic analyzer shows analysis results of all processes. And if you select a process in the list, the dynamic analyzer shows only an analysis result of that process.</p>
-<li><strong>View Source</strong>
+ <p>The <strong>Process</strong> combo box has a process list of the application being traced. By default, the dynamic analyzer shows the analysis results of all processes. If you select a process in the list, the dynamic analyzer shows the analysis result of that process only.</p></li>
+ <li><strong>View Source</strong>
<p>The <strong>View Source</strong> button displays the source code. If you click the button and the mouse is on the method name in any table-like view, the source code is displayed as a tooltip. By double-clicking the tooltip you can see the source code in the IDE. Apart from the Callstack view, the source code displayed is the caller part of the selected API, not the API definition.</p>
<p>If an API is called from a shared library, the source code is not displayed as the source code of the shared library is not available.</p>
</tr>
</tbody>
</table></li>
- <li><strong>Capture screen</strong>
- <p>The <strong>Capture screen</strong> button captures the screen of target at the time. the screenshot is shown in snapshot view.</p>
- <li><strong>Settings</strong>
+ <li><strong>Capture screen</strong>
+ <p>The <strong>Capture screen</strong> button captures the screen of the target at the time. The screenshot is shown in the <strong>Snapshot</strong> view.</p></li>
+ <li><strong>Settings</strong>
<p>The <strong>Settings</strong> button opens the <strong>Settings</strong> window. It supports the runtime configuration feature and other settings.</p></li>
<li><strong>About</strong>
<p>The <strong>About</strong> button opens the <strong>About</strong> window, which displays the dynamic analyzer version, build time, and license.</p> </li>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<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>
- <li>Set the API version. <p>The API version format is "x.y".</p> </li>
+ <li>Set the API version. <p>The API version format is "x.y.z".</p> </li>
<li>Add application icon. <p>You can add a launcher icon to your application by defining it in the <strong>Icon</strong> panel. The following table describes the available icons.</p>
<table border="1">
<caption>
<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>Each application control can have multiple operation, mime type, and uri attributes.</p> </li>
- <li>Add an account.
+ <li>Add an account (in mobile applications only).
<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>
<p>To register an account provider, define the account provider information by clicking <strong>Add</strong> in the <strong>Account</strong> section of the <strong>Advanced</strong> tab of the manifest editor, as described in the following table.</p>
<table border="1">
<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>
-<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>
- <li>
-<span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> <p>Used when the account is related to the calendar.</p>
-</li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/calendar</span> <p>Used when the account is related to a calendar.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/contact</span> <p>Used when the account is related to contacts.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/document</span> <p>Used when the account is related to a document.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/email</span> <p>Used when the account is related to email.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/game</span> <p>Used when the account is related to a game.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/message</span> <p>Used when the account is related to a message.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/music</span> <p>Used when the account is related to music.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/photo</span> <p>Used when the account is related to a photo.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">http://tizen.org/account/capability/video</span> <p>Used when the account is related to a video.</p>
+ </li>
+
</ul>
<p>This is an optional property.</p>
</td>
<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>
- <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.ui.guides/html/cover_page.htm">UI Guides</a>
+ <p>The Tizen UI guides instruct you in planning and developing a user interface for your application. The guides introduce all the available UI toolkit frameworks.</p>
+ </li> -->
<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.sampledescriptions/html/cover_page.htm">Sample Descriptions</a>
<p>The Tizen sample descriptions introduce the sample applications provided in the SDK.</p>
</li>
+ <li><a href="../../org.tizen.devtools/html/cover_page.htm">Tools</a>
+ <p>The Tizen tools introduce the Tizen software development kit (SDK) and related tools you can use when developing your Tizen application.</p>
+ </li>
</ul>
<script type="text/javascript" src="scripts/jquery.zclip.min.js"></script>
<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 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>The <a href="../../../../org.tizen.devtools/html/cover_page.htm">Tizen SDK</a> enables you to create Web applications for mobile and wearable 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>Tizen supports both <a href="#wap">Web application packages</a> and <a href="#hap">hybrid application packages</a>, 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>
<h2 id="package" name="package">Application Package Manager</h2>
</table> </li>
</ul>
- <h3 id="hap" name="hap">Hybrid Application Package in Mobile Applications</h3>
+ <h3 id="hap" name="hap">Hybrid Application Package</h3>
<p>A hybrid application package must conform to the following conventions:</p>
<ul>
<li>Package format and file extension
<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>The Tizen platform supports hybrid applications (1 Web application and 1 or more native applications). A hybrid application package is very useful to 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 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>
<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>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Advanced UI Framework</a></li>
</ul></td>
</tr>
</tbody>
<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>
+ <li>API Reference: <a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Advanced UI Framework</a></li>
</ul></td>
</tr>
</tbody>
<!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>
+ <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 > </strong>{Platform} (e.g. MOBILE-x.x)<strong>
- > 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>Locate the title in the code and change
- "Application Name" into "HelloWorld" (2).</li>
- </ol>
- <p class="figure">Figure: HelloWorld project</p>
- <p align="center">
- <img alt="HelloWorld project" width="75%"
- src="../../images/helloworld_index.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 Hello
- 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 Hello
- Application</h3>
- <ol class="tutorstep">
- <li>Creating the Hello 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
- > </strong> {Platform} (e.g. WEARABLE-x.x)<strong> > Basic</strong>.
- </p></li>
- <li>Define <strong>Hello</strong> as the name of your
- project and click <strong>Finish</strong>.
- </li>
- </ol>
- <p class="figure">Figure: Creating the Hello project</p>
- <p align="center">
- <img alt="Creating the Hello project" width="75%"
- src="../../images/hello_wearable.png" />
- </p>
-
- <p>
- The new <strong>Hello</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/default/tau.min.css</span>:
- Release version of the Tizen wearable UI theme</li>
- <li><span
- style="font-family: Courier New, Courier, monospace">lib/tau/wearable/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/default/tau.css</span>:
- Debug version of the Tizen wearable UI theme</li>
- <li><span
- style="font-family: Courier New, Courier, monospace">lib/tau/wearable/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" width="75%" src="../../images/hello_wearable_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 Hello 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" width="50%"
- src="../../images/hello_wearable_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>
+<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 > MOBILE-<version> > 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>Locate the title in the code and change "Application Name" into "HelloWorld" (2).</li>
+ </ol> <p class="figure">Figure: HelloWorld project</p> <p align="center"> <img alt="HelloWorld project" src="../../images/helloworld_index.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 Hello 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 Hello Application</h3>
+ <ol class="tutorstep">
+ <li>Creating the Hello 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-<version> > Basic</strong>.</p> </li>
+ <li>Define <strong>Hello</strong> as the name of your project and click <strong>Finish</strong>.</li>
+ </ol>
+<p class="figure">Figure: Creating the Hello project</p> <p align="center"> <img alt="Creating the Hello project" src="../../images/hello_wearable.png" /> </p>
+
+<p> The new <strong>Hello</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/default/tau.min.css</span>: Release version of the Tizen wearable UI theme </li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/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/default/tau.css</span>: Debug version of the Tizen wearable UI theme </li>
+ <li><span style="font-family: Courier New,Courier,monospace">lib/tau/wearable/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/hello_wearable_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/Base/page.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/ui_fw_api_cover.html">Tizen Advanced 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/hello_wearable_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>
<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.</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>
+ <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
templates and samples. 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>
<h2 id="design" name="design" >Designing the Application UI</h2>
-<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>
+<p>You can design the application UI using the
components 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>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>
+ <p>In the IDE menu, you can set the package properties in <strong>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>Project > Properties > Tizen SDK > Package > Web</strong>:</p>
<ul>
<li><strong>Set excluding optimization resources</strong>
<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>
+ <li><strong>Set hybrid application's main service application</strong></li></ul>
<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>
<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 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 application templates in hybrid and companion applications.</p>
- <h3 id="hybrid">Packaging Hybrid Applications in Mobile Applications</h3>
+ <h3 id="hybrid">Packaging Hybrid 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>
<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>Select <strong>Properties > Project References</strong>.</li>
+ <li>In the Web UI application project context menu, select <strong>Properties > Project References</strong>.</li>
<li>Select the check box for the service application, and click <strong>OK</strong>.</li>
</ul>
In the <strong>Project Explorer</strong> view, a <strong>with <Web UI application></strong> message appears next to the service application project name for each application you have added to the package.
<!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>
+ <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 the Application Project</title>
+ <title>Creating the Application Project</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-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">Importing a Project</a></li>
+ <li><a href="#export">Exporting a Project User Template</a></li>
+ <li><a href="#user">User Template</a></li>
+ </ul>
+ </div></div>
+</div>
- <div id="toc_border">
- <div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#import">Importing a Project</a></li>
- <li><a href="#export">Exporting a Project User Template</a></li>
- <li><a href="#user">User Template</a></li>
- </ul>
- </div>
- </div>
- </div>
+<div id="container"><div id="contents"><div class="content">
+ <h1>Creating the Application Project</h1>
+ <p>You can create a Web application project by selecting from a variety of templates and samples. The following instructions are specific for creating the project with a template.</p>
+ <p>To create a Web application 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, define the project details:
+ <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">
+ <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-zA-Z][a-zA-Z0-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 several project folders.</p>
+ <p class="figure">Figure: Creating a Tizen mobile Web project</p>
+ <p align="center"><img alt="Creating a Tizen mobile Web project" src="../../images/web_application_wizard.png" /></p>
- <div id="container">
- <div id="contents">
- <div class="content">
- <h1>Creating the Application Project</h1>
- <p>
- You can create a Web application project by selecting from a
- variety of <a href="#template">templates and samples</a>. The
- following instructions are specific for creating the project with a
- template.
- </p>
- <p>To create a Web application 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,
- define the project details:
- <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">
- <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-zA-Z][a-zA-Z0-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 several project folders.
- </p>
- <p class="figure">Figure: Creating a Tizen mobile Web project</p>
- <p align="center">
- <img alt="Creating a Tizen mobile Web project" width="75%"
- src="../../images/web_application_wizard.png" />
- </p>
+<p class="figure">Figure: Creating a Tizen wearable Web project</p>
+<p align="center"><img alt="Creating a Tizen wearable Web project" src="../../images/hello_wearable.png" /></p>
- <p class="figure">Figure: Creating a Tizen wearable Web project</p>
- <p align="center">
- <img alt="Creating a Tizen wearable Web project" width="75%"
- src="../../images/hello_wearable.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 > 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="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 >
- 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 Web User Template</strong>.
- </li>
- <li>In the <strong>User Template Export Wizard</strong>
- window, define the project and user template details:
- <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>
- </ol>
- </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 Web User Template</strong>.</li>
+ <li>In the <strong>User Template Export Wizard</strong> window, define the project and user template details:
+ <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>
+ </ol> </li>
+ <li>Click <strong>Finish</strong>.</li>
+ </ol>
+
+ <h2 name="user" id="user">User Template</h2>
+ <p>You can <a href="#export">create custom user templates from existing projects</a> and 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 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>
+ <li>In Windows® XP: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
+ <li>In Windows® 7: <span style="font-family: Courier New,Courier,monospace">C:\tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">C:\tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
+ <li>In Linux: <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-sdk-data</span> (in mobile Web projects) or <span style="font-family: Courier New,Courier,monospace">/home/${USER_NAME}/tizen-wearable-sdk-data</span> (in wearable Web projects)</li>
- <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 align="center">
- <img alt="User template export location"
- src="../../images/user_template_export.png" />
- </p>
+ </ul>
+ <p>The <span style="font-family: Courier New,Courier,monospace">project</span> folder of a user template consists of project-related files that are copied into new projects created using the user template. You can modify these files in your new project.</p>
+ <p>The following table describes the files included in a user template in addition to the <span style="font-family: Courier New,Courier,monospace">project</span> folder content.</p>
+ <table border="1">
+ <caption>
+ Table: User template files
+ </caption>
+ <tbody>
+ <tr>
+ <th>File</th>
+ <th>Contents</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">description.xml</span></td>
+ <td><p>This file consists of the following template description information that is displayed in the Project Wizard:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><SampleName></span> tag: Project type name. Several project types can be created using the same user template.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><SampleVersion></span> tag: Project type version.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><Preview></span> tag: Preview file name.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><Description></span> tag: Description title.</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">tizen-app-template.xml</span></td>
+ <td><p>This file consists of the following template definition information that is displayed in the Project Wizard:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace"><template-name></span> tag: User template name.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><widget-type></span> tag: Widget type, which is set as <span style="font-family: Courier New,Courier,monospace">TIZEN</span> by default.</li>
+ <li><span style="font-family: Courier New,Courier,monospace"><description-file-name></span> tag: Description file name, which is set as <span style="font-family: Courier New,Courier,monospace">description.xml</span> by default.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">icon64</span> and <span style="font-family: Courier New,Courier,monospace">icon32</span> attributes: Icon image file name. The number suffixes refer to the icon size.</li>
+ </ul></td>
+ </tr>
+ </tbody>
+ </table>
+ <p>To create a new user template from an existing user template (instead of an exporting the template from an existing project):</p>
+ <ol>
+ <li>Copy and rename the <span style="font-family: Courier New,Courier,monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span> folder. <p>The folder contains a default template layout.</p></li>
+ <li>Edit the files within the new folder, or add new files (such as snapshot or icon images and JavaScript and CSS files), as needed.</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>
- <p>
- The <span style="font-family: Courier New, Courier, monospace"><TIZEN_SDK_DATA></span>
- directory is different for different platforms:
- </p>
- <ul>
- <li>In Windows® XP: <span
- style="font-family: Courier New, Courier, monospace">C:\tizen-sdk-data</span>
- (in mobile Web projects) or <span
- style="font-family: Courier New, Courier, monospace">C:\tizen-wearable-sdk-data</span>
- (in wearable Web projects)
- </li>
- <li>In Windows® 7: <span
- style="font-family: Courier New, Courier, monospace">C:\tizen-sdk-data</span>
- (in mobile Web projects) or <span
- style="font-family: Courier New, Courier, monospace">C:\tizen-wearable-sdk-data</span>
- (in wearable Web projects)
- </li>
- <li>In Linux: <span
- style="font-family: Courier New, Courier, monospace">/home/${USER_NAME}/tizen-sdk-data</span>
- (in mobile Web projects) or <span
- style="font-family: Courier New, Courier, monospace">/home/${USER_NAME}/tizen-wearable-sdk-data</span>
- (in wearable Web projects)
- </li>
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
- </ul>
- <p>
- The <span style="font-family: Courier New, Courier, monospace">project</span>
- folder of a user template consists of project-related files that
- are copied into new projects created using the user template. You
- can modify these files in your new project.
- </p>
- <p>
- The following table describes the files included in a user template
- in addition to the <span
- style="font-family: Courier New, Courier, monospace">project</span>
- folder content.
- </p>
- <table border="1">
- <caption>Table: User template files</caption>
- <tbody>
- <tr>
- <th>File</th>
- <th>Contents</th>
- </tr>
- <tr>
- <td><span
- style="font-family: Courier New, Courier, monospace">description.xml</span></td>
- <td><p>This file consists of the following template
- description information that is displayed in the Project
- Wizard:</p>
- <ul>
- <li><span
- style="font-family: Courier New, Courier, monospace"><SampleName></span>
- tag: Project type name. Several project types can be created
- using the same user template.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace"><SampleVersion></span>
- tag: Project type version.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace"><Preview></span>
- tag: Preview file name.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace"><Description></span>
- tag: Description title.</li>
- </ul></td>
- </tr>
- <tr>
- <td><span
- style="font-family: Courier New, Courier, monospace">tizen-app-template.xml</span></td>
- <td><p>This file consists of the following template
- definition information that is displayed in the Project Wizard:</p>
- <ul>
- <li><span
- style="font-family: Courier New, Courier, monospace"><template-name></span>
- tag: User template name.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace"><widget-type></span>
- tag: Widget type, which is set as <span
- style="font-family: Courier New, Courier, monospace">TIZEN</span>
- by default.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace"><description-file-name></span>
- tag: Description file name, which is set as <span
- style="font-family: Courier New, Courier, monospace">description.xml</span>
- by default.</li>
- <li><span
- style="font-family: Courier New, Courier, monospace">icon64</span>
- and <span style="font-family: Courier New, Courier, monospace">icon32</span>
- attributes: Icon image file name. The number suffixes refer to
- the icon size.</li>
- </ul></td>
- </tr>
- </tbody>
- </table>
- <p>To create a new user template from an existing user template
- (instead of an exporting the template from an existing project):</p>
- <ol>
- <li>Copy and rename the <span
- style="font-family: Courier New, Courier, monospace"><TIZEN_SDK_DATA>/ide/user-templates/web</span>
- folder.
- <p>The folder contains a default template layout.</p></li>
- <li>Edit the files within the new folder, or add new files
- (such as snapshot or icon images and JavaScript and CSS files), as
- needed.</li>
- </ol>
+<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"
- 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>
+ <!--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
</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/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>
+ <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 (by pressing the <strong>F12</strong> keyboard key) in the simulator, as is the <a href="../../../../org.tizen.devtools/html/web_tools/web_inspector_w.htm">Web Inspector</a> tool. 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 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>
<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>
<ol>
- <li><p>In the <strong>Properties</strong> window, select <strong>Project > Properties > Tizen SDK > Web > Privilege</strong>.</p></li>
+ <li><p>In the <strong>Properties</strong> window, select <strong>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 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>
+ <p>You can also perform the checks manually in the IDE by selecting <strong>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>
<p>You can set build properties for your project. To select the build properties:</p>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
- <name>org.tizen.guides_2.3.0</name>
+ <name>org.tizen.guides_2.4.0</name>
<comment></comment>
<projects>
</projects>
</ul>
</li>
<li><a href="web/tizen/localization/localization_w.htm">Localization</a></li>
- <li><a href="web/tizen/TAU/tau.htm">TAU</a>
+ <li><a href="web/tizen/TAU/tau.htm">Tizen Advaced UI Framework (TAU)</a>
<ul>
<li><a href="web/tizen/TAU/overview.htm">Overview</a></li>
<li><a href="web/tizen/TAU/helloWorld.htm">Hello World</a></li>
<h2><a href="native/guides_n.htm">Native Application</a></h2>
<ul>
+ <li><a href="native/account/account_guide_n.htm">Account</a>
+ <ul>
+ <li><a href="native/account/oauth2_n.htm">oauth2</a></li>
+ <li><a href="native/account/sync_manager_n.htm">Sync Manager</a></li>
+ </ul>
+ </li>
<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/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>
+ <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>
<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_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/media_vision_n.htm">Media Vision</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/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/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/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/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/service_adaptor_n.htm">Service Adaptor</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>
<li><a href="native/system/system_guide_n.htm">System</a>
<ul>
<li><a href="native/system/device_n.htm">Device</a></li>
<li><a href="native/system/sysinfo_n.htm">System Information</a></li>
<li><a href="native/system/settings_n.htm">System Settings</a></li>
<li><a href="native/system/storage_n.htm">Storage</a></li>
+ <li><a href="native/system/t-trace_n.htm">T-trace</a></li>
+ </ul>
+ </li>
+ <li><a href="native/telephony/telephony_guide_n.htm">Telephony</a>
+ <ul>
+ <li><a href="native/telephony/phonenumber_util_n.htm">Phonenumber utils</a></li>
+ <li><a href="native/telephony/telephony_info_n.htm">Telephony Information</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 Framework</a>
<ul>
<li><a href="native/ui/efl_n.htm">EFL</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>
+ <li><a href="native/ui/eom_n.htm">External Output Manager</a></li>
</ul>
</li>
<li><a href="native/uix/uix_guide_n.htm">UIX</a>
<ul>
<li><a href="native/uix/tts_n.htm">TTS</a></li>
<li><a href="native/uix/stt_n.htm">STT</a></li>
+ <li><a href="native/uix/voicecontrol_guide_n.htm">Voice Control</a>
+ <ul>
+ <li><a href="native/uix/voicecontrol_n.htm">Voice control</a></li>
+ <li><a href="native/uix/voicecontrol_elm_n.htm">Voice control elementary</a></li>
+ </ul>
+ </li>
+ <li><a href="native/uix/ime_n.htm">Input Method</a></li>
</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>
--- /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>Account</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/account/account_tutorials_n.htm">Account Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Account</h1>
+ <p>Account features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.</p>
+
+<p>The main account features are:</p>
+<ul>
+<li><p><a href="oauth2_n.htm">oauth2</a></p>
+<p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>
+</ul>
+
+
+
+ <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
+
+ <ul>
+ <li><p><a href="sync_manager_n.htm">Sync Manager</a></p>
+ <p>Enables you to receive notifications in your application about syncing operations between a server and the device.</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>
+
<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>OAuth2</title>
+ <title>oauth2</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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_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>
+ <li><a href="../../../../org.tizen.tutorials/html/native/account/oauth2_tutorial_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></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>OAuth2</h1>
+<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 class="figure">Figure: Protocol flow</p>
<p>The specification defines the following 4 grant types as well as an extensibility mechanism for defining additional types:</p>
<ul><li>Authorization code
- <p>The <a href="../../../../org.tizen.tutorials/html/native/oauth2/oauth2_tutorials_n.htm#req_code">authorization code is obtained</a> by using an authorization server as an intermediary between the client and resource owner. Instead of requesting authorization directly from the resource owner, the client directs the resource owner to an authorization server, which in turn directs the resource owner back to the client with the authorization code.</p>
+ <p>The <a href="../../../../org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm#req_code">authorization code is obtained</a> by using an authorization server as an intermediary between the client and resource owner. Instead of requesting authorization directly from the resource owner, the client directs the resource owner to an authorization server, which in turn directs the resource owner back to the client with the authorization code.</p>
<p>The authorization code provides some important security benefits, such as the ability to authenticate the client, as well as the transmission of the access token directly to the client without passing it through the resource owner's user-agent and potentially exposing it to others, including the resource owner.</p>
<p class="figure">Figure: Authorization code flow</p>
<p style="text-align: center;"> <img alt="Client credentials flow" src="../../images/oauth2_client_credentials.png" /></p>
</li></ul>
- <p>To request an access token for the implicit, resource owner password credentials, or client credentials grant type, follow the <a href="../../../../org.tizen.tutorials/html/native/oauth2/oauth2_tutorials_n.htm#direct_token">direct access token request instructions</a>.</p>
+ <p>To request an access token for the implicit, resource owner password credentials, or client credentials grant type, follow the <a href="../../../../org.tizen.tutorials/html/native/account/oauth2_tutorial_n.htm#direct_token">direct access token request instructions</a>.</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>Sync</title>
+ <title>Sync Manager</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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__FRAMEWORK.html">Sync API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/account/sync_manager_tutorial_n.htm">Sync Manager Tutorial</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</h1>
+<h1>Sync Manager</h1>
<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>
<table class="note">
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The Sync API domain is supported in mobile applications only.</td>
+ <td class="note">The Sync Manager API domain is supported in mobile applications only.</td>
</tr>
</tbody>
</table>
<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>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>Operation</th>
- <th>Value</th>
- <th>Description</th>
- </tr>
- <tr>
- <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><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>
-
-</li>
-</ul></li>
-
-<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>
+<p>The main Sync Manager API features are:</p>
<ul>
<li>Add and remove the on-demand sync job schedule.</li>
<li>Add and remove the periodic sync job schedule.</li>
<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>
+<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></li></ul>
- </li></ul></li></ul>
+
+<h2>Sync Adapter</h2>
+ <p>The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__ADAPTER__MODULE.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>Operation</th>
+ <th>Value</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <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><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>
+
+</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>
<div id="container"><div id="contents"><div class="content">
<h1>Application Manager</h1>
-<p>The Application Manager provides information about installed and running applications. It provides functions for obtaining the application package name and absolute path to specified resources, such as Image, Sound, Video, and UI layout (EDJ). It also provides functions to:</p>
-<ul>
- <li>Get the current orientation of the device.</li>
- <li>Get the internal and external root folders which are shared among all applications.</li>
-</ul>
+<p>The application manager provides information about installed and running applications. It provides functions for obtaining the application name and absolute path to share files among all applications.</p>
-<p>Iterator functions step through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available (installed, but not necessarily running) applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb</span>), passing the package name of each application found. A query function responds whether the application represented by a particular package name is running.</p>
-
+<p>The application manager uses 2 types of application handles:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">app_context_h</span> is related to the running applications.
+<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_context_h</span> handle, see the Application Context API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTEXT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTEXT__MODULE.html">wearable</a> applications).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">app_info_h</span> is related to the available applications (installed, but not necessarily running).
+<p>For more information on the functions that use the <span style="font-family: Courier New,Courier,monospace">app_info_h</span> handle, see the Application Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__INFO__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__INFO__MODULE.html">wearable</a> applications).</p></li></ul>
+
+<p>Iterator functions are used to travel through a list of applications. The <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_context()</span> function is used in running applications and the <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function is used in available applications. Each function calls a callback function (<span style="font-family: Courier New,Courier,monospace">app_manager_app_context_cb()</span> or <span style="font-family: Courier New,Courier,monospace">app_manager_app_info_cb()</span>), passing the handle for each application.</p>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
<p>For more information, see <a href="#state_trans">Managing Application States and Transitions</a>.</p>
-<p>The following table lists the system event events.</p>
+<p>To listen to system events, use the <span style="font-family: Courier New,Courier,monospace">ui_app_add_event_handler()</span> function. The system events are triggered with the <span style="font-family: Courier New,Courier,monospace">app_event_cb()</span> callback function. The following table lists the event types.</p>
<table>
<caption>
- Table: Callbacks for system events
+ Table: Event types
</caption>
<tbody>
<tr>
- <th>Callback</th>
+ <th>Event type</th>
<th>Description</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_low_memory_cb()</span></td>
- <td><p>Used to take necessary actions in low memory situations.</p>
- <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. Release any cached data in the main memory to secure more free memory.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_MEMORY</span></td>
+ <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The callback function must also release any cached data in the main memory to secure more free memory.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_low_battery_cb()</span></td>
- <td><p>Used to take necessary actions in low battery situations.</p>
- <p>Save data in the main memory to a persistent memory or storage, to avoid data loss in case the power goes off completely. Stop heavy CPU consumption or power consumption activities to save the remaining power.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LOW_BATTERY</span></td>
+ <td>Event type for the callback function that is responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The callback function must also stop heavy CPU consumption or power consumption activities to save the remaining power.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_device_orientation_cb()</span></td>
- <td>Used to take necessary actions for handling a device orientation change.
-<p>Change the display orientation to match the device orientation.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for changing the display orientation to match the device orientation.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_language_changed_cb()</span></td>
- <td>Used to take necessary actions for handling a language change event.
-<p>Refresh the display into the new language.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_LANGUAGE_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for refreshing the display into the new language.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">app_region_format_changed_cb()</span></td>
- <td>Used to take necessary actions for handling a region change event.
-<p>A region change means a different time zone; updater the time in the application UI to reflect the time zone change.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">APP_EVENT_REGION_FORMAT_CHANGED</span></td>
+ <td>Event type for the callback function that is responsible for refreshing the display into the new time zone.</td>
</tr>
</tbody>
</table>
<li>If only one application is matched for the given categories, that application is launched. If multiple matching applications are found, the application selector is shown and the user can select the proper application.</li>
<li>Each app control requires a different combination of the 3 categories. For some, only one category is necessary (for example, URI), for others, all 3 can be needed. Check the app control list and required data in the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a> to determine the needed categories.</li>
</ul>
-<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly. The application can have multiple combinations of the operation, URI, and MIME type:</p>
-
-
-<pre class="prettyprint">
-X-SLP-SVC=[operation1]:[URI1]:[MIME1];[operation2]:[URI2]:[MIME2]
-</pre>
-
-<p>In the category description:</p>
-
-<ul>
-<li>Each app control description is separated by a semicolon (;).</li>
-<li>Blank is not allowed between fields.</li>
-<li>Operation is a mandatory field.</li>
-<li>URI and MIME field can be NULL.</li>
-</ul>
+<p>To allow the application launcher framework to find and select matching applications, each application must describe its operation, URI, or MIME type correctly.</p>
<p>The following code example launches a camera application with the operation and MIME type:</p>
<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 UI components 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, the framework notifies the application, which changes 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>
+<p>This is how to handle the framework event:</p>
<pre class="prettyprint">
static void
<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>
+<p>To create a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method. The application that creates the badge can also update and remove it. When applications are signed with the same certificate, they can control each other's badges.</p>
+<p>If an application not signed with the same certificate must be allowed manage a badge, use the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> method with a writable application ID. 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>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#register">Application States and Events</a></li>
+ <li><a href="#menu">Changing the Watch UI</a></li>
+ </ul>
<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>
+ </ul>
</div></div>
</div>
<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>
+ <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>
+<p>When initializing the application, <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">edit the manifest file</a> to define the watch application settings.</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 <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#watch_app">manifest file</a> to allow the platform to show a default ambient mode UI.</p>
+
<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>
-
+<h2 id="register" name="register">Application States and Events</h2>
+
+<p>The following figure illustrates the watch application states during the application life-cycle:</p>
+<ul>
+<li>Before the main loop of the application starts, the application is in the Created state.</li>
+<li>When the application is running, it is in the Running state.</li>
+<li>When the application is invisible, it is in the Paused state.</li>
+<li>When the application is in the ambient mode, it is in the Ambient state.</li>
+<li>When the application exits, it is in the Terminated state.</li>
+</ul>
+ <p class="figure">Figure: Watch application life-cycle</p>
+ <p align="center"><img alt="Watch application life-cycle" src="../../images/watch_app_lifecycle.png" /></p>
+
+
+<p>The following table lists the callbacks you can use as the application state changes.</p>
+
+<table>
+ <caption>
+ Table: Application state change callbacks
+ </caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_create()</span></td>
+ <td>Called before the main loop of the application starts. In this callback, you can initialize application resources, such as window creation and data structure.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_control()</span></td>
+ <td>Used to take necessary actions when a service call arrives from another application.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_pause()</span></td>
+ <td>Called when the application is completely obscured by another application and becomes invisible.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_resume()</span></td>
+ <td>Called when the application becomes visible.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_terminate()</span></td>
+ <td>Called when the application main loop exits. </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_time_tick()</span></td>
+ <td>Called at least once per second. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the normal watch.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_ambient_tick()</span></td>
+ <td>Called at least once per minute or when the device enters the ambient mode. Watch applications can get the current time from the <span style="font-family: Courier New,Courier,monospace">watch_time_h</span> handle and draw the ambient mode watch.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_ambient_changed()</span></td>
+ <td>Called when the device enters or exits the ambient mode.</td>
+ </tr>
+
+ </tbody>
+</table>
+
+
+ <h2 id="menu" name="menu">Changing the Watch UI</h2>
+
+<p>The user can change the watch application UI in the Clock menu through the device setting menu.</p>
+<p>When a watch application is successfully installed on a device, its UI is visible in the clock menu of the watch settings.</p>
+
+ <p class="figure">Figure: Clock menu</p>
+ <p align="center">
+ <img alt="Clock menu" src="../../images/setting_to_clock.png" />
+ </p>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div>
<div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#app">Widget Application States and Events</a></li>
+ <li><a href="#instance">Widget Instance States and Events</a></li>
+ </ul>
<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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Wearable Native</a></li>
</ul>
</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>Widget applications are Tizen native applications shown on the home screen. They are launched by the home screen when the user selects them in the <strong>Add Widget</strong> menu.</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>
+ <p>Each widget application usually has 1 process for maintaining the main loop. Within that process, the application can create multiple widget instances that can share the same resources.</p></li>
+ <li>Managing the life-cycle
+ <p>You can manage the widget application and widget instance life-cycles through callbacks that are triggered as the application or instance state changes.</p>
+ <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>To ensure that the application runs smoothly, you must <a href="../../../../org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm#widget_app">edit the application manifest file</a> to define the widget settings.</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>
+ <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 attach UI components to it. You can use the <span style="font-family: Courier New,Courier,monospace">widget_app_get_elm_win()</span> function to <a href="../../../../org.tizen.tutorials/html/native/app_framework/widget_tutorial_n.htm#get_window">create an EFL object for widget window</a>.</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>
-
+<h2 id="app" name="app">Widget Application States and Events</h2>
+
+<p>The following figure illustrates the widget application states during the application life-cycle:</p>
+<ul>
+<li>When the application is launched, it is in the Ready state.</li>
+<li>When the application is running on the background, it is in the Running state.</li>
+<li>When the application exits, it is in the Terminated state.</li>
+</ul>
+ <p class="figure">Figure: Widget application life-cycle</p>
+ <p align="center"><img alt="Widget application life-cycle" src="../../images/widget_app_lifecycle.png" /></p>
+
+
+<p>The following table lists the callbacks you can use as the application state changes.</p>
+
+<table>
+ <caption>
+ Table: Application state change callbacks
+ </caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span></td>
+ <td>Called before the main loop of the application starts.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_app_terminate_cb()</span></td>
+ <td>Called after the main loop of the application exits.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="instance" name="instance">Widget Instance States and Events</h2>
+
+<p>The following figure illustrates the widget instance states during the instance life-cycle:</p>
+<ul>
+<li>When the application is in the Ready state, the instance does not exist.</li>
+<li>When the instance is created, it is in the Created state.</li>
+<li>When the instance is visible, it is in the Running state.</li>
+<li>When the instance is invisible, it is in the Paused state.</li>
+<li>When the instance is destroyed, it is in the Destroyed state.</li>
+</ul>
+ <p class="figure">Figure: Widget instance life-cycle</p>
+ <p align="center"><img alt="Widget instance life-cycle" src="../../images/widget_instance_lifecycle.png" /></p>
+
+
+<p>The following table lists the callbacks you can use as the instance state changes.</p>
+
+<table>
+ <caption>
+ Table: Instance state change callbacks
+ </caption>
+ <tbody>
+ <tr>
+ <th>Callback</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_create_cb()</span></td>
+ <td>Called after the widget instance is created.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_destroy_cb()</span></td>
+ <td>Called before the widget instance is destroyed.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_pause_cb()</span></td>
+ <td>Called when the widget is invisible.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resume_cb()</span></td>
+ <td>Called when the widget is visible.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_resize_cb()</span></td>
+ <td>Called before the widget size is changed.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">widget_instance_update_cb()</span></td>
+ <td>Called when an event for updating the widget is received.</td>
+ </tr>
+ </tbody>
+</table>
+
+<p>To register widget instance callbacks, use the <span style="font-family: Courier New,Courier,monospace">widget_app_class_create()</span> function within the <span style="font-family: Courier New,Courier,monospace">widget_app_create_cb()</span> callback function:</p>
+
+<pre class="prettyprint">
+static widget_class_h
+widget_app_create(void *user_data)
+{
+ widget_instance_lifecycle_callback_s ops =
+ {
+ .create = widget_instance_create,
+ .destroy = widget_instance_destroy,
+ .pause = widget_instance_pause,
+ .resume = widget_instance_resume,
+ .update = widget_instance_update,
+ .resize = widget_instance_resize,
+ };
+
+ return widget_app_class_create(ops);
+}
+</pre>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
+ <li><a href="#ubrk">Ubrk</a></li>
<li><a href="#ucalendar">Ucalendar</a></li>
<li><a href="#uchar">Uchar</a></li>
<li><a href="#ucoll">Ucollator</a></li>
<li><a href="#udate">Udate</a></li>
<li><a href="#udatepg">Udatepg</a></li>
+ <li><a href="#uenumeration">Uenumeration</a></li>
<li><a href="#ulocale">Ulocale</a></li>
<li><a href="#unormal">Unormalization</a></li>
<li><a href="#unumber">Unumber</a></li>
<li><a href="#usearch">Usearch</a></li>
+ <li><a href="#uset">Uset</a></li>
<li><a href="#ustring">Ustring</a></li>
</ul>
<p class="toc-title">Related Info</p>
<p>You can generate flexible number or date format patterns and format and parse dates and numbers for any locale. The i18n API is implemented by using the ICU library.</p>
+<h2 id="ubrk" name="ubrk">Ubrk</h2>
+<p>The Ubrk API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UBRK__MODULE.html">wearable</a> applications) is used to find the location of boundaries in text. The <span style="font-family: Courier New,Courier,monospace">i18n_ubreak_iterator_h</span> handle maintains a current position and scans over the text returning the index of characters where the boundaries occur.</p>
+<p>The following boundary analyzing methods are available:</p>
+<ul>
+ <li>Line boundary analysis determines where a text string can be broken when line-wrapping. The mechanism correctly handles punctuation and hyphenated words.</li>
+ <li>Sentence boundary analysis allows selection with correct interpretation of periods within numbers and abbreviations, and trailing punctuation marks, such as quotation marks and parentheses.</li>
+ <li>Word boundary analysis is used by search and replace functions, as well as within text editing applications that allow the user to select words with a double-click. Word selection provides correct interpretation of punctuation marks within and following words. Characters that are not part of a word, such as symbols or punctuation marks, have word-breaks on both sides.</li>
+ <li>Character boundary analysis identifies the boundaries of Extended Grapheme Clusters, which are groupings of codepoints that must be treated as character-like units for many text operations. For additional information on grapheme clusters and guidelines on their use, see <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Unicode Text Segmentation</a>.</li>
+ <li>Title boundary analysis locates all positions, typically starts of words, that must be set to Title Case when title casing the text.</li>
+ <li>The text boundary positions are found according to the rules described in <a href="http://www.unicode.org/reports/tr29/" target="_blank">Unicode Standard Annex #29, Text Boundaries</a>, and <a href="http://www.unicode.org/reports/tr14/" target="_blank">Unicode Standard Annex #14, Line Breaking Properties</a>.</li>
+</ul>
+
+
<h2 id="ucalendar" name="ucalendar">Ucalendar</h2>
<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>
<th>Combinations of the calendar fields</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span><br/><br/>
-<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span><br/><br/>
-<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span><br/><br/>
-<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span><br/><br/>
-<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_MONTH</span>
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_WEEK_OF_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_MONTH + I18N_UCALENDAR_DAY_OF_WEEK_IN_MONTH + I18N_UCALENDAR_DAY_OF_WEEK</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_YEAR</span></p>
+<p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_DAY_OF_WEEK + I18N_UCALENDAR_WEEK_OF_YEAR</span></p></td>
</tr>
</tbody>
</table>
<th>Combinations of the calendar fields</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span><br/><br/>
-<span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_HOUR_OF_DAY</span>
+ <p><span style="font-family: Courier New,Courier,monospace">I18N_UCALENDAR_AM_PM + I18N_UCALENDAR_HOUR</span></p></td>
</tr>
</tbody>
</table>
<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="uenumeration" name="uenumeration">Uenumeration</h2>
+
+<p>The Uenumeration API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__UENUMERATION__MODULE.html">wearable</a> applications) enables you to create an enumeration object out of a given set of strings. The object can be created out of an array of <span style="font-family: Courier New,Courier,monospace">const char*</span> strings or an array of <span style="font-family: Courier New,Courier,monospace">i18n_uchar*</span> strings.</p>
+<p>The enumeration object enables navigation through the enumeration values, with the use of the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_next()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_unext()</span> function (depending on the type used for creating the enumeration object), and with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_reset()</span> function.</p>
+<p>You can get the number of values stored in the enumeration object with the <span style="font-family: Courier New,Courier,monospace">i18n_uenumeration_count()</span> function.</p>
+
+
<h2 id="ulocale" name="ulocale">Ulocale</h2>
<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>
<th>Options for creating a locale</th>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span><br/><br/>
- <span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span><br/><br/>
- <span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></td>
- </tr>
- </tbody>
- </table>
+ <td><span style="font-family: Courier New,Courier,monospace">newLanguage</span>
+ <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">newLanguage + newCountry + newVariant</span></p></td>
+ </tr>
+ </tbody>
+ </table>
<p>The first option is a valid <a href="http://www.loc.gov/standards/iso639-2/php/code_list.php" target="_blank">ISO Language Code</a>. These codes are the lower-case two-letter codes as defined by the ISO-639 standard.
</p>
<h2 id="usearch" name="usearch">Usearch</h2>
<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="uset" name="uset">Uset</h2>
+<p>Uset is a mutable set of Unicode characters and multicharacter strings. The sets represent character classes used in regular expressions. A character specifies a subset of the Unicode code points. The legal code points are U+0000 to U+10FFFF, inclusive.</p>
+<p>The set supports 2 functions:</p>
+<ul><li>The operand function allows the caller to modify the value of the set. The operand function works similarly to the boolean logic: a boolean OR is implemented by add, a boolean AND is implemented by retain, a boolean XOR is implemented by a complement taking an argument, and a boolean NOT is implemented by a complement with no argument. In terms of traditional set theory function names, add is a union, retain is an intersection, remove is an asymmetric difference, and complement with no argument is a set complement with respect to the superset range <span style="font-family: Courier New,Courier,monospace">MIN_VALUE-MAX_VALUE</span>.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> or <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. Unlike the functions that add characters or categories, and control the logic of the set, the <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> function sets all attributes of a set at once, based on a string pattern.</li></ul>
+
+<h3 id="pattern_syntax" name="pattern_syntax">Pattern Syntax</h3>
+
+<p>Patterns are accepted by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern()</span>, <span style="font-family: Courier New,Courier,monospace">i18n_uset_create_pattern_options()</span>, and <span style="font-family: Courier New,Courier,monospace">i18n_uset_apply_pattern()</span> functions and returned by the <span style="font-family: Courier New,Courier,monospace">i18n_uset_to_pattern()</span> function. The patterns follow a syntax similar to that employed by version 8 regular expression character classes.</p>
+<table>
+ <caption>
+ Table: Examples of simple pattern syntaxes
+ </caption>
+ <tbody>
+ <tr>
+ <th>Pattern</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[]</span></td>
+ <td>No characters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
+ <td>Character 'a'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[ae]</span></td>
+ <td>Characters 'a' and 'e'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[a-e]</span></td>
+ <td>Characters 'a' through 'e' inclusive, in Unicode code point order</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[\u4E01]</span></td>
+ <td>Character U+4E01</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[a{ab}{ac}]</span></td>
+ <td>Character 'a' and the multicharacter strings 'ab' and 'ac'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[\p{Lu}]</span></td>
+ <td>All characters in the general category 'uppercase letter'</td>
+ </tr>
+ </tbody>
+</table>
+<p>Any character can be preceded by a backslash in order to remove any special meaning. Whitespace characters are ignored, unless they are escaped.</p>
+<p>Property patterns specify a set of characters having a certain property as defined by the Unicode standard. Both the POSIX-like <span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> and the Perl-like syntax <span style="font-family: Courier New,Courier,monospace">\\p{Lu}</span> are recognized.</p>
+<p>Patterns specify individual characters, ranges of characters, and Unicode property sets. When the elements are concatenated, they specify their union. To complement a set, place a '^' immediately after the opening '['. Property patterns are inverted by modifying their delimiters, <span style="font-family: Courier New,Courier,monospace">[:^foo]</span> and <span style="font-family: Courier New,Courier,monospace">\\P{foo}</span>. In any other location, '^' has no special meaning.</p>
+<p>Ranges are indicated by placing a '-' between 2 characters, as in "a-z". This specifies the range of all characters from the left to the right, in Unicode order. If the left character is greater than or equal to the right character, it is a syntax error. If a '-' occurs as the first character after the opening '[' or '[^', or if it occurs as the last character before the closing ']', it is taken as a literal. This means that <span style="font-family: Courier New,Courier,monospace">[a\-b]</span>, <span style="font-family: Courier New,Courier,monospace">[-ab]</span>, and <span style="font-family: Courier New,Courier,monospace">[ab-]</span> all indicate the same set of three characters, 'a', 'b', and '-'.</p>
+<p>Sets can be intersected using the '&' operator or the asymmetric set difference can be taken using the '-' operator. For example, <span style="font-family: Courier New,Courier,monospace">[[:L:]&[\\u0000-\\u0FFF]]</span> indicates the set of all Unicode letters with values less than 4096. Operators ('&' and '|') have equal precedence and bind left-to-right. This means that <span style="font-family: Courier New,Courier,monospace">[[:L:]-[a-z]-[\\u0100-\\u01FF]]</span> is equivalent to <span style="font-family: Courier New,Courier,monospace">[[[:L:]-[a-z]]-[\\u0100-\\u01FF]]</span>. This only really matters for difference; intersection is commutative.</p>
+<table>
+ <caption>
+ Table: Examples of set syntaxes
+ </caption>
+ <tbody>
+ <tr>
+ <th>Set</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[a]</span></td>
+ <td>Set containing 'a'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[a-z]</span></td>
+ <td>Set containing 'a' through 'z' and all letters in between, in Unicode order</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[^a-z]</span></td>
+ <td>Set containing all characters but 'a' through 'z', that is, U+0000 through 'a'-1 and 'z'+1 through U+10FFFF</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[[pat1][pat2]]</span></td>
+ <td>Union of sets specified by pat1 and pat2</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[[[pat1]&[pat2]]</span></td>
+ <td>Intersection of sets specified by pat1 and pat2</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[[pat1]-[pat2]]</span></td>
+ <td>Asymmetric difference of sets specified by pat1 and pat2</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[:Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\p{Lu}</span></td>
+ <td>Set of characters having the specified Unicode property, in this case Unicode uppercase letters</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">[:^Lu:]</span> or <span style="font-family: Courier New,Courier,monospace">\P{Lu}</span></td>
+ <td>Set of characters not having the given Unicode property</td>
+ </tr>
+ </tbody>
+</table>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">You cannot add an empty string ("") to a set.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h3 id="formal_syntax" name="formal_syntax">Formal Syntax</h3>
+
+<p>The following table provide examples of formal syntax patterns.</p>
+
+<table>
+ <caption>
+ Table: Formal syntax patterns
+ </caption>
+ <tbody>
+ <tr>
+ <th>Pattern</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pattern :=</span></td>
+ <td>('[' '^'? item* ']') | property</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">item :=</span></td>
+ <td>char | (char '-' char) | pattern-expr</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pattern-expr :=</span></td>
+ <td>pattern | pattern-expr pattern | pattern-expr or pattern</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">op :=</span></td>
+ <td>'&' | '-'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">special :=</span></td>
+ <td>'[' | ']' | '-'</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">char :=</span></td>
+ <td>Any character that is not special | ('\' any character) | ('\u' hex hex hex hex)</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">property :=</span></td>
+ <td>Unicode property set pattern</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">a := b</span></td>
+ <td>a can be replaced by b</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">a?</span></td>
+ <td>0 or 1 instance of a</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">a*</span></td>
+ <td>1 or more instances of a</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">a | b</span></td>
+ <td>Either a or b</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">'a'</span></td>
+ <td>Literal string between the quotes</td>
+ </tr>
+ </tbody>
+</table>
+
+
+
<h2 id="ustring" name="ustring">Ustring</h2>
<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>
</tr>
<tr>
<td>
- <span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_POWER_SAVING_MODE</span>
+ <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_EVENT_POWER_SAVING_MODE</span></p>
<p><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_CONDITION_POWER_SAVING_MODE</span></p>
</td>
<td><span style="font-family: Courier New,Courier,monospace">CONTEXT_TRIGGER_IS_ENABLED</span></td>
<p>Select the API domain you are interested in and see what Tizen offers for your application:</p>
<ul>
+ <li><a href="account/account_guide_n.htm">Account</a>
+ <p>Enables you to manage account information, such as receive sync operation notifications, and obtain an access token by using the oauth2 authorization.</p></li>
<li><a href="app/app_guide_n.htm">Application Framework</a>
<p>Enables you to configure application properties, and manage application data, and runtime environment and behavior.</p></li>
<li><a href="base/base_guide_n.htm">Base</a>
<li><a href="content/content_guide_n.htm">Content</a>
<p>Enables you to manage and store a variety of data types, input and output data, and device content.</p></li>
<li><a href="context/context_guide_n.htm">Context</a>
- <p>Enables you to recognize actions and gestures.</p></li>
+ <p>Enables you to recognize actions and gestures, and take advantage of contextual triggers and application usage patterns.</p></li>
<li><a href="graphics/graphics_guide_n.htm">Graphics</a>
<p>Enables you to 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_guide_n.htm">Location</a>
<li><a href="multimedia/multimedia_guide_n.htm">Multimedia</a>
<p>Enables you to capture and play various media, download Internet content, and access media streams.</p></li>
<li><a href="network/network_guide_n.htm">Network</a>
- <p>Enables you to send data to networks and other applications, and receive data back from them.</p></li>
- <li><a href="oauth2/oauth2_guide_n.htm">OAuth2</a>
- <p>Enables you to obtain an access token by using the oauth2 authorization.</p></li>
+ <p>Enables you to send data to networks and other applications, and receive data back from them.</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="social/social_guide_n.htm">Social</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="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>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/location/geofence_tutorial_n.htm">Geofence Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__FRAMEWORK.html">Geofence API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MODULE.html">Geofence API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<p>If the user revokes a permission to use the location information, the geofence manager state is set to <span style="font-family: Courier New,Courier,monospace">GEOFENCE_MANAGER_PERMISSION_DENIED</span> and the same error is returned back to the application invoking the geofence service.</p>
-<p>Asynchronous geofence-related alerts (in or out) and event callbacks (a fence added or removed) are implemented with callback interfaces. The alerts are received using the <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_UNCERTAIN</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_IN</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_OUT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__FRAMEWORK.html#xx">geofence_state_e</a> enumerator.</p>
+<p>Asynchronous geofence-related alerts (in or out) and event callbacks (a fence added or removed) are implemented with callback interfaces. The alerts are received using the <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_UNCERTAIN</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_IN</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_STATE_OUT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga266085fcc5f8fa9af62e54efe08cd912">geofence_state_e</a> enumerator.</p>
<h2 id="definition" name ="definition">Geofence Definition</h2>
<p>The geofence definition defines the parameters of a geofence.</p>
-<p>The 3 types of available geofences are geopoint, Wi-Fi, and Bluetooth. When creating the geofence, the type can be defined using the <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_GEOPOINT</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_WIFI</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_BT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__FRAMEWORK.html#xx">geofence_type_e</a> enumerator.</p>
+<p>The 3 types of available geofences are geopoint, Wi-Fi, and Bluetooth. When creating the geofence, the type can be defined using the <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_GEOPOINT</span>, <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_WIFI</span>, and <span style="font-family: Courier New,Courier,monospace">GEOFENCE_TYPE_BT</span> values of the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html#ga15a724d2959e78b49b78b877e964f513">geofence_type_e</a> enumerator.</p>
<p>The geopoint geofences require a geopoint and a radius, and the Wi-Fi and Bluetooth geofences require a MAC address. Based on the defined geofence type, the geofence manager creates the fence for the particular application.</p>
<h2 id="settings" name="settings">Geofence Settings</h2>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>
+ <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>
<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>
+ <li><a href="https://developer.here.com">HERE Maps</a> based on the <a href="https://developer.here.com/rest-apis">HERE REST API</a>.</li>
+ <li><a href="http://developer.mapquest.com">MapQuest</a> based on the <a href="http://open.mapquestapi.com">Open MapQuest API</a>.</li>
</ul>
<table class="note">
<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>Audio I/O</title>
-</head>
-<body onload="prettyPrint()" style="overflow: auto;">
+ </head>
+ <body onload="prettyPrint()" style="overflow: auto;">
-<div id="toc-navigation">
+
<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="#record_pcm">Recording Uncompressed Audio</a></li>
- <li><a href="#play_pcm">Playing Uncompressed Audio</a></li>
+
<p class="toc-title">Content</p>
+
<li><a href="#record_pcm">Recording Uncompressed Audio</a></li>
+
<li><a href="#play_pcm">Playing Uncompressed Audio</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm">Audio I/O Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Wearable Native</a></li>
+
<li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Mobile Native</a></li>
+
<li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html">Audio I/O API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Audio I/O</h1>
- <p>Audio I/O enables your application to manage various media handles.</p>
- <p>The main features of the Audio I/O API include:</p>
- <ul>
- <li><a href="#record_pcm">Recording uncompressed audio</a>
- <p>Enables you to capture uncompressed PCM data from audio device.</p></li>
+ <p>Audio I/O enables your application to manage various media handles.</p>
+ <p>The main features of the Audio I/O API include:</p>
+ <ul>
+
<li><a href="#record_pcm">Recording uncompressed audio</a>
+ <p>Enables you to capture uncompressed PCM data from audio device.</p></li>
<li><a href="#play_pcm">Playing uncompressed audio</a>
- <p>Enables you to create a multimedia application to play uncompressed PCM data.</p></li>
- </ul>
-
+ <p>Enables you to create a multimedia application to play uncompressed PCM data.</p></li>
+ </ul>
+
<h2 id="record_pcm" name="record_pcm">Recording Uncompressed Audio</h2>
<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Input API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IN__MODULE.html">wearable</a> applications) enables your application to record such data from a microphone type input device.</p>
<p>Audio data is captured periodically, so to receive the audio PCM data from the input device, you must implement the audio input interface to notify the application of audio data events, such as the end of filling audio data.</p>
<p>Before recording audio, you must define the following PCM data settings:</p>
<ul>
<li>Input device type:
- <ul class="indent">
+ <ul>
<li>Microphone</li>
</ul> </li>
<li>Audio channels:
- <ul class="indent">
+ <ul>
<li>Mono (1 channel)</li>
<li>Stereo (2 channels)</li>
</ul> </li>
<li>Audio sample type:
- <ul class="indent">
+ <ul>
<li>Unsigned 8-bit PCM</li>
<li>Signed 16-bit little endian PCM</li>
</ul> </li>
<li>Audio sample rate:
- <ul class="indent">
+ <ul>
<li>8000 ~ 48000 Hz</li>
</ul></li>
</ul>
<p>To minimize the overhead of the audio input API, use the optimal channel type, sample type and sampling rate, which can be retrieved using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span>, <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> and <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_rate()</span> functions, respectively.</p>
+
<p>The following figures illustrate the general audio input states, and how the state changes when the audio input is interrupted by the system.</p>
<p class="figure">Figure: Audio input states</p>
<p align="center"><img src="../../images/audio_input.png" alt="Audio input states" /></p>
<p class="figure">Figure: Audio input states when interrupted by system</p>
- <p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
+
<p align="center"><img src="../../images/audio_input_interrupt_state.png" alt="Audio input states when interrupted by system" /></p>
+
<h2 id="play_pcm" name="play_pcm">Playing Uncompressed Audio</h2>
<p>The Pulse Code Modulated (PCM) data contains non-compressed audio. The Audio Output API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__OUT__MODULE.html">wearable</a> applications) enables your application to play such data using output devices.</p>
<p>To play the audio PCM data, the application must call the <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> function to initialize the audio output handle.</p>
<p>Before playing audio, your application must define the following PCM data settings:</p>
<ul>
<li>Audio channels:
- <ul class="indent">
+ <ul>
<li>Mono (1 channel)</li>
<li>Stereo (2 channels)</li>
</ul> </li>
<li>Audio sample type:
- <ul class="indent">
+ <ul>
<li>Unsigned 8-bit PCM</li>
<li>Signed 16-bit little endian PCM</li>
</ul> </li>
<li>Audio sample rate:
- <ul class="indent">
+ <ul>
<li>8000 ~ 48000 Hz</li>
</ul> </li>
</ul>
-
+
<p>The following figures illustrate the general audio output states, and how the state changes when the audio output is interrupted by the system.</p>
<p class="figure">Figure: Audio output states</p>
<p align="center"><img src="../../images/audio_output.png" alt="Audio output states" /></p>
<p class="figure">Figure: Audio output states when interrupted by system</p>
<p align="center"><img src="../../images/audio_output_interrupt_state.png" alt="Audio output states when interrupted by system" /></p>
+
<h3 id="use" name="use">Using Audio Output</h3>
<p>For supporting various low-end Tizen devices, the application must follow certain guidelines:</p>
<ul>
<p>Using excessive multiple instances of the Audio Output has a negative effect on the application, because the audio data processing for re-sampling and mixing imposes a heavy burden on the system. </p> </li>
<li>Use device-preferred PCM format.
<ul>
+
<li><p>To reduce the processing overhead, use the target device-preferred PCM format (for example, use 16-bit little endian, 44.1 kHz, stereo for Wave and Wave M).</p></li>
<li><p>Using the preferred format reduces internal operations, such as converting audio samples from mono to stereo or re-sampling audio frequency to fit the target device's input sample rate.</p></li>
</ul> </li>
<li>Do not call the Audio Output functions too frequently.
<ul>
- <li><p>The Audio Output functions require more time while repeate in the order of <span style="font-family: Courier New,Courier,monospace">audio_out_create</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_prepare</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_destroy</span>. Therefore, keep the frequency of calling these functions to a minimum. Please note that <span style="font-family: Courier New,Courier,monospace">audio_out_prepare</span>, <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare</span> are much fast than <span style="font-family: Courier New,Courier,monospace">audio_out_create</span>, <span style="font-family: Courier New,Courier,monospace">audio_out_destroy</span>.</p></li>
- </ul> </li>
+ <li><p>The Audio Output functions require more time while repeated in the order of <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> > <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>. Therefore, keep the frequency of calling these functions to a minimum. Note that the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions are much faster than <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span>.</p></li>
+</ul></li>
<li>Reduce event delay and remove glitches.
<ul>
<li><p>The Audio Output API works recursively with events. The smaller the buffer size, the more often are events generated. If you use the Audio Output API with the smallest buffer and other resources (for example, a timer or sensor), the application is negatively influenced by the delay of the event. To prevent problems, set the write buffer size properly based on the other resources you need.</p></li>
- <li><p>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</p></li>
+ <li><p>To guarantee the working events of the Audio Output API independently, an instance of the Audio Output API needs to be created and worked on the event thread.</p></li>
</ul> </li>
<li>Use double-buffering.
<ul>
<p>Media tool enables your application to manage various media handles.</p>
<p>The main features of the Media Tool API include:</p>
<ul>
- <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle to specify video or audio information.</p>
- <p>You can set and get video or audio information using the <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle. </p></li>
- <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_packet</span> handle to include metadata (such as pts, dts, and duration) and allocate a buffer to the heap or TBM surface.</p>
- <p>You can set and get the metadata using the <span style="font-family: Courier New,Courier,monospace;">media_packet</span> handle. </p>
+ <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle to specify video or audio information.</p>
+ <p>You can set and get video or audio information using the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle. </p></li>
+ <li><p>Creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle to include metadata (such as pts, dts, and duration) and allocate a buffer to the heap or TBM surface.</p>
+ <p>You can set and get the metadata using the created <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle. Some <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> metadata are NOT filled after creating the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle: pts, dts, duration, extradata, codec data, codec data size, and buffer flags.</p>
</li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle is created by the caller, who can set and get the video or audio information. The <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle creates the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle and allocates the buffer. The caller can set and get the metadata with the <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handle.</p>
<p>The following table describes the reference count design of the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> handle.</p>
<span style="font-family: Courier New,Courier,monospace;">media_format_create(&fmt1);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1</td>
<td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
- <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle.</p></td>
+ <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle and set the <span style="font-family: Courier New,Courier,monospace;">media_format_video_mime()</span> or <span style="font-family: Courier New,Courier,monospace;">media_format_audio_mime()</span> function.</p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">media_packet_create(&pkt1, fmt1);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2</td>
- <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function.</td>
+ <td>After the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function, you must use the <span style="font-family: Courier New,Courier,monospace;">media_format_unref()</span> function, because the <span style="font-family: Courier New,Courier,monospace;">media_packet_create()</span> function increases the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> reference count.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt1);</span></td>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">media_packet_get_format(pkt1, &tmp);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
- <td>If you try to call the <span style="font-family: Courier New,Courier,monospace;">set_video_info</span> function for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (<span style="font-family: Courier New,Courier,monospace;">tmp</span>), <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified. To modify <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</td>
+ <td><span style="font-family: Courier New,Courier,monospace;">fmt1</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is increased by the <span style="font-family: Courier New,Courier,monospace;">media_packet_get_format()</span> function.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_info(tmp, ...);</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(tmp, ...);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 3</td>
- <td>Define the <span style="font-family: Courier New,Courier,monospace;">media_format_h</span> and <span style="font-family: Courier New,Courier,monospace;">media_packet_h</span> handles.
- <p>Create the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> handle.</p></td>
+ <td>If you try to modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data (call the <span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime()</span> function) for <span style="font-family: Courier New,Courier,monospace;">fmt1</span> (=<span style="font-family: Courier New,Courier,monospace;">tmp</span>), the <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is bigger than 1, and <span style="font-family: Courier New,Courier,monospace;">fmt1</span> cannot be modified.
+ <p>To modify the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data, call the <span style="font-family: Courier New,Courier,monospace;">media_format_make_writable()</span> function.</p></td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">media_format_make_writable(tmp, &fmt2);</span></td>
<td>If called, the <span style="font-family: Courier New,Courier,monospace;">tmp</span> (<span style="font-family: Courier New,Courier,monospace;">fmt1</span>) <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is decreased. Creates the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> handle and copies the <span style="font-family: Courier New,Courier,monospace;">fmt1</span> data to <span style="font-family: Courier New,Courier,monospace;">fmt2</span>.</td>
</tr>
<tr>
- <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_info(fmt2, ...);</span></td>
+ <td><span style="font-family: Courier New,Courier,monospace;">media_format_set_video_mime(fmt2, ...);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 2<br/>
<span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt2</span> <span style="font-family: Courier New,Courier,monospace;">ref_count</span> is 1, which means that you can modify the <span style="font-family: Courier New,Courier,monospace;">fmt2</span> data.</td>
<td><span style="font-family: Courier New,Courier,monospace;">media_format_unref(fmt2);</span></td>
<td><span style="font-family: Courier New,Courier,monospace;">fmt1</span>: 1<br/>
<span style="font-family: Courier New,Courier,monospace;">fmt2</span>: 1</td>
- <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_video(fmt2..)</span> function call.</td>
+ <td>You must call this function because of the <span style="font-family: Courier New,Courier,monospace;">media_packet_set_format(pkt2, fmt2)</span> function call.</td>
</tr>
<tr>
<td><span style="font-family: Courier New,Courier,monospace;">media_packet_destroy(pkt1);</span></td>
--- /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>Media Vision</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/multimedia/media_vision_tutorial_n.htm">Media Vision Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Media Vision</h1>
+
+<p>You can perceive and understand an image or to extract information from images in ypur application.</p>
+<p>The main features of Media Vision API include:</p>
+
+<ul>
+<li>Handling images
+<p>You can handle images by creating a source handle and filling it from an image buffer or media packet. Create the source handle with the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function, and fill it with the <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_buffer()</span> or <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_media_packet()</span> function.</p>
+</li>
+<li>Detecting barcodes
+<p>You can detect barcodes in an image or from camera preview streams, and then decrypt them to display messages to the user.</p>
+<p>Before detecting a barcode, you must define the following detection attributes:</p>
+ <ul>
+ <li>Barcode detection mode:
+ <ul>
+ <li>Still image</li>
+ <li>Continuous images (video)</li>
+ </ul>
+ </li>
+ <li>Barcode detection target:
+ <ul>
+ <li>Detect both 1D and 2D barcodes</li>
+ <li>Detect 1D barcodes only</li>
+ <li>Detect 2D barcodes only</li>
+ </ul>
+ </li>
+ </ul>
+</li>
+<li>Generating barcodes
+<p>You can encrypt a given message, generate a barcode from it, and save it in a memory or as a file.</p>
+<p>Define the barcode type:</p>
+<p>Before generating a barcode, you must define the following generation specifications:</p>
+ <ul>
+ <li><a href="#barcode">Barcode type</a></li>
+ <li><a href="#qrcode">QR code specification</a> (if the QA code barcode type is used)</li>
+ <li>Image format (if the barcode is saved as a file)
+ <ul>
+ <li>JPEG</li>
+ <li>BMP</li>
+ <li>PNG</li>
+ </ul>
+ </li>
+ </ul>
+</li>
+</ul>
+
+<p>The following tables provides more information about the barcode generation specifications.</p>
+
+<table border="1" id="barcode">
+ <caption>
+ Table: Supported barcode types
+ </caption>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">1D or 2D</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Type</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;">Example</th>
+ </tr>
+ <tr>
+ <td rowspan="7">1-D</td>
+ <td>UPC-A</td>
+ <td>Universal product code with numeric 12-digit</td>
+ <td><p align="center"><img alt="UPC-A" src="../../images/mediavision_upc_a.png" /></p> </td>
+ </tr>
+ <tr>
+ <td>UPC-E</td>
+ <td>Universal product code with numeric 6-digit</td>
+ <td><p align="center"><img alt="UPC-E" src="../../images/mediavision_upc_e.png" /></p></td>
+ </tr>
+ <tr>
+ <td>EAN-8</td>
+ <td>International article number with numeric 8-digit</td>
+ <td><p align="center"><img alt="EAN-8" src="../../images/mediavision_ean_8.png" /></p></td>
+ </tr>
+ <tr>
+ <td>EAN-13</td>
+ <td>International article number with numeric 13-digit</td>
+ <td><p align="center"><img alt="EAN-13" src="../../images/mediavision_ean_13.png" /></p></td>
+ </tr>
+ <tr>
+ <td>CODE-128</td>
+ <td>Code 128; supports alphanumeric or numeric-only</td>
+ <td><p align="center"><img alt="CODE-128" src="../../images/mediavision_code_128.png" /></p></td>
+ </tr>
+ <tr>
+ <td>CODE-39</td>
+ <td>Code 39; supports 34 characters consisting of uppercase letters (A to Z), numeric digits (0 to 9), and special characters(-, ., $, /, %, space)</td>
+ <td><p align="center"><img alt="CODE-39" src="../../images/mediavision_code_39.png" /></p></td>
+ </tr>
+ <tr>
+ <td>INTERLEAVED 2 of 5</td>
+ <td>Interleaved two of five with numeric digits</td>
+ <td><p align="center"><img alt="UPC-A" src="../../images/mediavision_interleaved_2_5.png" /></p></td>
+ </tr>
+ <tr>
+ <td>2-D</td>
+ <td>QR code</td>
+ <td>Quick Response code</td>
+ <td><p align="center"><img alt="UPC-A" src="../../images/mediavision_qr.png" /></p></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table border="1" id="qrcode">
+ <caption>
+ Table: Supported QR code specifications
+ </caption>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Specification</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Support type</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td rowspan="4">Error Correction Code (ECC) Level</td>
+ <td>ECC Low</td>
+ <td>Recovery up to 7% damage</td>
+ </tr>
+ <tr>
+ <td>ECC Medium</td>
+ <td>Recovery up to 15% damage</td>
+ </tr>
+ <tr>
+ <td>ECC Quartile</td>
+ <td>Recovery up 25% damage</td>
+ </tr>
+ <tr>
+ <td>ECC High</td>
+ <td>Recovery up to 30% damage</td>
+ </tr>
+ <tr>
+ <td rowspan="4">Encoding mode</td>
+ <td>Numeric</td>
+ <td>Numeric digits ('0', '1', ..., '9')</td>
+ </tr>
+ <tr>
+ <td>Alphanumeric</td>
+ <td>Alphanumeric characters: numeric (0, 1, ..., 9), characters (A, B, ..., Z), and punctuation (' ', $, %, *, +, -, '.', /, ':')</td>
+ </tr>
+ <tr>
+ <td>Byte 8-bit</td>
+ <td>Raw 8-bit bytes</td>
+ </tr>
+ <tr>
+ <td>UTF-8</td>
+ <td>Universal character set and Transformation Format 8-bit, encoding characters</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
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/metadata_editor_tutorial_n.htm">Metadata Editor Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<li><a href="media_codecs_n.htm">Media Codec</a>
<p>Enables you to use codecs to encode and decode video and audio data.</p></li>
<li><a href="media_controller_n.htm">Media Controller</a>
- <p>Enables you to communicate between the media controller server and the media controller client.</p></li>
- <li><a href="media_tools_n.htm">Media Tool</a>
+ <p>Enables you to communicate between the media controller server and the media controller client.</p></li> <li><a href="media_tools_n.htm">Media Tool</a>
<p>Enables you to use media tools to manage various media handles.</p></li>
+ <li><a href="media_vision_n.htm">Media Vision</a>
+ <p>Enables you to use create and read barcodes.</p></li>
<li><a href="metadata_editor_n.htm">Metadata Editor</a>
<p>Enables you to edit the metadata of several popular audio formats.</p></li>
<li><a href="metadata_extractor_n.htm">Metadata Extractor</a> <p>Enables you to extract metadata from the media files.</p></li>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/multimedia/thumbnail_util_tutorial_n.htm">Thumbnail Util Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>You can control the visibility of the BLE device, meaning whether its name appears to others searching for BLE devices. In addition, you discover neighboring BLE devices. This process is asynchronous, so you must build and hold the list of devices in the neighborhood.</p>
</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>The Bluetooth AVRCP feature (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) 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>
</ul>
</ul>
<h2 id="ui" name="ui">UI Applications</h2>
-<p>The main difference in creating UI applications is that the whole Tizen::Ui namespace has been replaced with the EFL. To create powerful applications for Tizen, study the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL__Group.html">EFL documentation</a>.</p>
+<p>The main difference in creating UI applications is that the whole Tizen::Ui namespace has been replaced with the EFL. To create powerful applications for Tizen, study the <a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL documentation</a>.</p>
<h2 id="service" name="service">Service Applications</h2>
<p>The new native API has the same idea of service applications as the 2.2.1 version.</p>
<tbody>
<tr>
<th>Account property</th>
- <th>Property type</th>
+ <th>Data type</th>
+ <th>Mandatory</th>
+ <th>Description</th>
</tr>
<tr>
<td>User name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>User name is identity of an account.</p>
- <p>If display name and email address don't register as account member, the user name is shown at an account on accounts screen in the Setting application.
- <p>This is a mandatory property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>Yes</td>
+ <td>Identity of an account.
+ <p>If the display name and email address are not set for an account, the user name is shown for the account on the Accounts screen in the Setting application.</p>
+ </td>
</tr>
<tr>
<td>Display name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Display Name is shown at an account on accounts screen in the Setting application.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Display name of an account.
+ <p>Display name is shown for the account on the Accounts screen in the Setting application.</p>
+ </td>
</tr>
<tr>
<td>Email address</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Email address is email address of an account.</p>
- <p>If display name doesn't register as account member, the email address is shown on accounts screen in the Setting application.</p>
- <p>This is an optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Email address of an account.
+ <p>If the display name is not set for an account, the email address is shown for the account on the Accounts screen in the Setting application.</p>
+ </td>
</tr>
- <tr>
+ <tr>
<td>Package name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Package name is one of the an account's package id like app id.</p>
- <p>If package name doesn't register as account member, app id is registerd as package name.</p>
- <p>This is a optional property.</p>
- </td>
- </tr>
- <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>One of an account package IDs, like the app ID.
+ <p>If the package name is not set for an account, the app ID is used as a package name.</p>
+ </td>
+ </tr>
+ <tr>
<td>Icon path</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Icon path is icon path of an account.</p>
- <p>Icon is shown through registed icon path as icon of an account on accounts screen in the Setting application.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Icon path of an account.
+ <p>The icon is shown through the registered icon path as an account icon on the Accounts screen in the Setting application.</p>
+ </td>
</tr>
- <tr>
+ <tr>
<td>Domain name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Domain name is domain name of an account.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Domain name of an account.
+ </td>
</tr>
- <tr>
+ <tr>
<td>Access token</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Access token is access token of an account.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Access token of an account.
+ </td>
</tr>
- <tr>
+ <tr>
<td>Auth type</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span>
- <p>Auth type is authentication type like oauth and xauth.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td>No</td>
+ <td>Authentication type, such as oauth or xauth.
+ </td>
</tr>
- <tr>
+ <tr>
<td>Capability</td>
- <td><span style="font-family: Courier New,Courier,monospace">key value string-integer pairs</span>
- <p>Capability is capability of an account.</p>
- <p>This is a optional property.</p>
- </td>
+ <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span>-<span style="font-family: Courier New,Courier,monospace">integer</span> pairs</td>
+ <td>No</td>
+ <td>Capability of an account.
+ </td>
</tr>
- <tr>
+ <tr>
<td>Secret</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span>
- <p> Secret value is used to decide whether the account of accounts list is shown or not on screen of accounts in the Setting application.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td>No</td>
+ <td>The secret value is used to decide whether the account is shown on the Accounts screen in the Setting application.
+ </td>
</tr>
- <tr>
- <td>Sync Support</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span>
- <p>Sync Support is used to show current synchronization status.</p>
- <p>This is a optional property.</p></td>
+ <tr>
+ <td>Sync support</td>
+ <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td>No</td>
+ <td>Current synchronization status.</td>
</tr>
- <tr>
+ <tr>
<td>Source</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>Source is source of an account.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>Source of an account.
+ </td>
</tr>
- <tr>
+ <tr>
<td>User text</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span>
- <p>User text is string array which application developer freely use.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>No</td>
+ <td>String array which you can use freely.
+ </td>
</tr>
- <tr>
+ <tr>
<td>User int</td>
- <td><span style="font-family: Courier New,Courier,monospace">Integer</span>
- <p>User text is integer array which application developer freely use.</p>
- <p>This is a optional property.</p>
- </td>
+ <td><span style="font-family: Courier New,Courier,monospace">Integer</span></td>
+ <td>No</td>
+ <td>Integer array which you can use freely.
+ </td>
</tr>
- <tr>
+ <tr>
<td>Custom</td>
- <td><span style="font-family: Courier New,Courier,monospace">key value string pairs</span>
- <p>Custom is key value pairs which application developer freely use.</p>
- <p>This is a optional property.</p>
- </td>
+ <td>Key-value <span style="font-family: Courier New,Courier,monospace">string</span> pairs</td>
+ <td>No</td>
+ <td>Key-value pairs which you can use freely.
+ </td>
</tr>
</tbody>
</table>
<tr>
<th>Account property</th>
<th>Data type</th>
- <th>Property type</th>
+ <th>Mandatory</th>
+ <th>Description</th>
</tr>
<tr>
<td>Multiple accounts support</td>
<td><span style="font-family: Courier New,Courier,monospace">bool</span> </td>
- <td><p>Indicates whether multiple accounts are supported.</p><p>This is a mandatory property.</p></td>
+ <td>Yes</td>
+ <td>Indicates whether multiple accounts are supported.</td>
</tr>
<tr>
<td>Icon</td>
- <td><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>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>Yes</td>
+ <td>File path of the account provider icon.
+ <p>The icon size is:</p>
<ul>
<li>72 x 72 for Xhigh (HD)</li>
<li>48 x 48 for High (WVGA)</li>
</ul>
- <p>Since the icon is used in <strong>Settings > Accounts</strong>, place the icon in a shared directory.</p><p>This is a mandatory property.</p></td>
+ <p>Since the icon is used in <strong>Settings > Accounts</strong>, place the icon in a shared directory.</p></td>
</tr>
<tr>
<td>Small icon</td>
- <td><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>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>Yes</td>
+ <td>File path of the account provider icon.
+ <p>The icon size is:</p>
<ul>
<li>45 x 45 for Xhigh (HD)</li>
<li>30 x 30 for High (WVGA)</li>
</ul>
- <p>Since the small icon is used in other applications, place the icon in a shared directory.</p><p>This is a mandatory property.</p></td>
+ <p>Since the small icon is used in other applications, place the icon in a shared directory.</p></td>
</tr>
<tr>
<td>Display name</td>
- <td><span style="font-family: Courier New,Courier,monospace">String</span> </td>
- <td><p>Display name of the account provider.</p><p>This is a mandatory property.</p></td>
+ <td><span style="font-family: Courier New,Courier,monospace">String</span></td>
+ <td>Yes</td>
+ <td>Display name of the account provider.</td>
</tr>
<tr>
<td>Capabilities</td>
<td><span style="font-family: Courier New,Courier,monospace">String</span></td>
- <td>
- <p>Capability of the account provider.</p>
- <p>Capability may perfrom a role to liaise between the account application and the other application.</p>
- <p>If An account application registers a capability in the manifest file, other application can be known the account application has the capability</p>
- <p>And if the account application gives an account the capability, other application can be known the account has the capability.</p>
- <p>Several capabilities are defined for the account-manager in Tizen, regarding the related services:</p>
- <ul>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or "http://tizen.org/account/capability/contact"</span>
- <p>This is contact capability</p>
- <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or "http://tizen.org/account/capability/calendar"</span>
- <p>This is calendar capability</p>
- <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or "http://tizen.org/account/capability/email"</span>
- <p>This is email capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or "http://tizen.org/account/capability/photo"</span>
- <p>This is photo capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or "http://tizen.org/account/capability/video"</span>
- <p>This is video capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or "http://tizen.org/account/capability/music"</span>
- <p>This is music capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or "http://tizen.org/account/capability/document"</span>
- <p>This is document capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or "http://tizen.org/account/capability/message"</span>
- <p>This is message capability</p>
- </li>
- <li><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or "http://tizen.org/account/capability/game"</span>
- <p>This is game capability</p>
- </li>
- </ul> <p>This is an optional property.</p></td>
+ <td>No</td>
+ <td>Capability of the account provider.
+ <p>Capability can be a liaison between an account application and another application. If an account application registers a capability in the manifest file, other applications know that the account application has the capability. And if an account application gives an account a capability, other applications know that the account has the capability.</p>
+ <p>Several service-specific capabilities are defined for the Account Manager in Tizen:</p>
+
+ <ul>
+ <li>Contact capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CONTACT or "http://tizen.org/account/capability/contact"</span></p>
+ <p>If you register this capability in the manifest file, the user using the contact application can see a list of accounts with the account of your service in the contact application.</p>
+ </li>
+ <li>Calendar capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_CALENDAR or "http://tizen.org/account/capability/calendar"</span></p>
+ <p>If you register this capability in the manifest file, the user using the calendar application can see a list of accounts with the account of your service in the calendar application.</p>
+ </li>
+ <li>Email capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_EMAIL or "http://tizen.org/account/capability/email"</span></p>
+ </li>
+ <li>Photo capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_PHOTO or "http://tizen.org/account/capability/photo"</span></p>
+ </li>
+ <li>Video capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_VIDEO or "http://tizen.org/account/capability/video"</span></p>
+ </li>
+ <li>Music capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MUSIC or "http://tizen.org/account/capability/music"</span></p>
+ </li>
+ <li>Document capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_DOCUMENT or "http://tizen.org/account/capability/document"</span></p>
+ </li>
+ <li>Message capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_MESSAGE or "http://tizen.org/account/capability/message"</span></p>
+ </li>
+ <li>Game capability:
+ <p><span style="font-family: Courier New,Courier,monospace">ACCOUNT_SUPPORTS_CAPABILITY_GAME or "http://tizen.org/account/capability/game"</span></p>
+ </li>
+</ul>
+ </td>
</tr>
</tbody>
</table>
+
<p>If the application has defined the account provider information and implements the appcontrol for the account provider, the account provider is automatically registered when the application is installed.</p>
<h2 id="appcontrol" name="appcontrol">Account Application Control</h2>
<h3 id="ADD" name="ADD">ACCOUNT_OPERATION_SIGNIN Operation</h3>
<p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span> operation enables the user to add a new account for a specific account provider. With the operation, the login page for the specific account provider can be displayed. In <strong>Settings > Accounts</strong>, if the account provider is clicked for adding a new account, this operation is launched.</p>
- <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
+
+ <p>You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>.</p>
+
<p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
<p>The following table shows the ACCOUNT_OPERATION_SIGNIN (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/add</span>) operation.</p>
<table border="1">
<caption>
- Table: The ACCOUNT_OPERATION_SIGNIN operation
- </caption
+ Table: ACCOUNT_OPERATION_SIGNIN operation
+ </caption>
<tbody>
<tr>
<h3 id="CONFIG" name="CONFIG">ACCOUNT_OPERATION_VIEW Operation</h3>
<p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span> operation enables the user to set account information, such as synchronization settings. The delete button must be included for removing accounts.</p>
<p>In <strong>Settings > Accounts</strong>, if the specific account is clicked for setting the account information, this operation is launched.</p>
-
- <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
+ <p> You have to define the <span style="font-family: Courier New,Courier,monospace">app_control_cb()</span> callback and register it to <span style="font-family: Courier New,Courier,monospace">ui_app_lifecycle_callback::app_control</span>. </p>
<p>The results of the operation are returned in the <span style="font-family: Courier New,Courier,monospace">app_control_get_operation()</span> event handler.</p>
<p>The following table shows the ACCOUNT_OPERATION_VIEW (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/account/configure</span>) operation.</p>
<table border="1">
<caption>
- Table: The ACCOUNT_OPERATION_VIEW operation
+ Table: ACCOUNT_OPERATION_VIEW operation
</caption>
<tbody>
<tr>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<h3 id="utc" name="utc">UTC Time Usage</h3>
<p>Structures with UTC time are used for non-all-day events. In such cases, you must convert local time to UTC time. The local time zone identifier must be stored in the record, in the corresponding property.</p>
<p>For example, when setting the start time of an event, the local time zone must be stored in the <span style="font-family: Courier New,Courier,monospace">start_tzid</span> property.</p>
-<p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses <a href="http://icu-project.org/apiref/icu4c/ucal_8h.html" target="blank">UCalendar</a>.</p>
+<p>When converting local time to UTC time, use the function illustrated in the following example. It converts the given date and time to the corresponding UTC time, considering the given time zone (first argument). The function uses the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a> API.</p>
<pre class="prettyprint">#define ms2sec(ms) (long long int)(ms / 1000.0)
long long int _time_convert_itol(char *tzid, int y, int mon, int d, int h, int min, int s)
{
- UErrorCode status = U_ZERO_ERROR;
+ int ret = 0;
+ i18n_uchar utf16_timezone[64] = {0};
+ i18n_ustring_copy_ua_n(utf16_timezone, tzid, sizeof(utf16_timezone)/sizeof(i18n_uchar));
- UChar uft16_timezone[16] = {0};
- U_uastrncpy(uft16_timezone, tzid, sizeof(uft16_timezone));
+ i18n_ucalendar_h ucal = NULL;
+ char *loc_default = NULL;
- UCalendar *ucal = NULL;
- ucal = ucal_open(uft16_timezone, -1, uloc_getDefault(), UCAL_GREGORIAN, &status);
-
- ucal_set(ucal, UCAL_YEAR, y);
- ucal_set(ucal, UCAL_MONTH, mon -1);
- ucal_set(ucal, UCAL_DATE, d);
- ucal_set(ucal, UCAL_HOUR, h);
- ucal_set(ucal, UCAL_MINUTE, min);
- ucal_set(ucal, UCAL_SECOND, s);
-
- long long int lli = 0;
- lli = ms2sec(ucal_getMillis(ucal, &status));
- ucal_close(ucal);
-
- return lli;
+ i18n_ulocale_get_default((const char **)&loc_default);
+ ret = i18n_ucalendar_create(utf16_timezone, -1, loc_default, I18N_UCALENDAR_GREGORIAN, &ucal);
+ if (I18N_ERROR_NONE != ret)
+ {
+ dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() is failed (%d)\n", ret);
+
+ return -1;
+ }
+
+ i18n_ucalendar_set_date_time(ucal, y, mon - 1, d, h, min, s);
+
+ i18n_udate date;
+ ret = i18n_ucalendar_get_milliseconds(ucal, &date);
+ if (I18N_ERROR_NONE != ret)
+ {
+ dlog_print(DLOG_DEBUG, LOG_TAG, "i18n_ucalendar_create() is failed (%d)\n", ret);
+ i18n_ucalendar_destroy(ucal);
+
+ return -1;
+ }
+ i18n_ucalendar_destroy(ucal);
+
+ return ms2sec(date);
}</pre>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#auth">Auth Adaptor</a></li>
- <li><a href="#storage">Storage Adaptor</a></li>
- <li><a href="#contact">Contact Adaptor</a></li>
- <li><a href="#discovery">Discovery Adaptor</a></li>
- <li><a href="#message">Message Adaptor</a></li>
- <li><a href="#push">Push Adaptor</a></li>
- <li><a href="#shop">Shop Adaptor</a></li>
- <li><a href="#start_plugin">How to start plugin?</a></li>
+ <li><a href="#adaptors">Available Adaptors</a></li>
+ <li><a href="#start_plugin">Starting a Plugin</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/social/service_adaptor_client_tutorial_n.htm">Service Adaptor Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Service Adaptor API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Service Adaptor API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm">Service Adaptor Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Service Adaptor</h1>
-Service Adaptor is a set of several adaptors:
-<ul>
- <li><a href="#contact">Contact Adaptor</a></li>
- <li><a href="#discovery">Discovery Adaptor</a></li>
- <li><a href="#message">Message Adaptor</a></li>
- <li><a href="#push">Push Adaptor</a></li>
- <li><a href="#shop">Shop Adaptor</a></li>
-</ul>
-
-But main of them are following:
-<ul>
- <li><a href="#auth">Auth Adaptor</a></li>
- <li><a href="#storage">Storage Adaptor</a></li>
-</ul>
-
-Each adaptor is an agent between Service Adaptor Client and according plugins. There exist Auth and Storage Plugins for such services as: Amazon, Box, Dropbox, Googledrive, Onedrive and Sugarsync. This structure illustrates following figure:
-
-<p class="figure">Figure: Service Adaptor structure</p>
-<p style="text-align:center;"><img alt="Service Adaptor structure" src="../../images/service_adaptor_structure.jpg"></p>
+<p>You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Gogledrive, Onedrive, and Sugarsync.</p>
-<p>The main feature of the Service Adaptor is connecting/disconnecting adaptors to Service Adaptor Client via D-Bus.</p>
+<p class="figure">Figure: Service adaptor structure</p>
+<p style="text-align:center;"><img alt="Service adaptor structure" src="../../images/service_adaptor_structure.png"/></p>
-<p>There are two kinds of path type used in Service Adaptor:
+<p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service adaptor uses 2 path types:</p>
<ul>
- <li><b>"Logical path"</b> - means path of "root file system".<br>
- It starts from root path(= '/') and you can use this path like linux, e.g. "/folder1/image1.jpg".<br><br>
+ <li><b>Logical path</b>
+<p>The path of the root file system. It starts from the root path ("/"), and you can use the path like in Linux (for example, "/folder1/image1.jpg").</p>
</li>
- <li><b>"Physical path"</b> - means specfic uri that be used for cloud server.<br>
- Some clouds use same with "Logical path", but some clouds use specfic key or url, e.g. "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O", "/folder1" is "2JI32UNJDWQEQWQWEADSSAD".<br>
+ <li><b>Physical path</b>
+<p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O" and "/folder1" is "2JI32UNJDWQEQWQWEADSSAD").</p>
</li>
</ul>
-</p>
+<h2 id="adaptors" name="adaptors">Available Adaptors</h2>
+
+<p>The following adaptors are provided:</p>
-<h2 id="auth" name="auth">Auth Adaptor</h2>
-<p>This adaptor manages authentication plugins.</p>
-<p>It allows to:
+<ul>
+ <li>Auth adaptor
+<p>This adaptor manages authentication plugins. It allows you to:</p>
<ul>
- <li>get Auth Plugin List</li>
- <li>set Plugin</li>
- <li>request Channel Auth, i.e. service name like "com.serviceadaptor.message", app id, service id (0: contact, 1: free message) and mobile station identification number (IMSI)</li>
+ <li>Get the Auth Plugin list.</li>
+ <li>Set the Plugin.</li>
+ <li>Request the Channel Auth, such as the service name ("com.serviceadaptor.message"), app ID, service ID (0: contact, 1: free message), and mobile station identification number (IMSI).</li>
</ul>
-</p>
-
-<h2 id="storage" name="storage">Storage Adaptor</h2>
-<p>This module handles files transfer to/from cloud.</p>
-<p>It allows to:
+</li>
+ <li>Storage adaptor
+<p>This adaptor handles files transfers to and from a cloud. It allows you to:</p>
<ul>
- <li>download a server/thumbnail file and write it to local file</li>
- <li>upload a local file to server path</li>
- <li>request file status</li>
- <li>cancel/pause/resume file transfer</li>
+ <li>Download a server or thumbnail file and write it to a local file.</li>
+ <li>Upload a local file to a server path.</li>
+ <li>Request the file status.</li>
+ <li>Cancel, pause, and resume a file transfer.</li>
</ul>
-</p>
-
-<h2 id="contact" name="contact">Contact Adaptor</h2>
-<p>This adaptor manages contacts information in Contact Server, their profiles and service registration information. </p>
-<p>It allows to:
+ </li>
+ <li>Contact adaptor
+<p>This adaptor manages contact information in the Contact server, including the contact profiles and service registration information. It allows you to:</p>
<ul>
- <li>reset contact information in Contact Server and upload native contact information of device to the server</li>
- <li>synchronize native contact information of device with Contact Server according to [type] field of each contact</li>
- <li>get profiles and service registration information of contacts</li>
- <li>set and update device’s profile to server</li>
- <li>upload/delete profile image meta to/from File Server and sets my profile image to Profile Server</li>
- <li>set/get my profile’s privacy levelthe scope of people to be opened</li>
- <li>set my presence ON/OFF information to Presence Server</li>
+ <li>Reset contact information in the Contact server and upload native contact information of the device to the server.</li>
+ <li>Synchronize native contact information of the device with the Contact server according to the <span style="font-family: Courier New,Courier,monospace">[type]</span> field of each contact.</li>
+ <li>Get contact profiles and service registration information.</li>
+ <li>Set and update device profile in the server.</li>
+ <li>Upload and delete profile image meta in the File server and set the my profile image to the Profile server.</li>
+ <li>Set and get my profile privacy level</li>
+ <li>Set my presence ON/OFF information to the Presence server.</li>
</ul>
-</p>
-
-<h2 id="discovery" name="discovery">Discovery Adaptor</h2>
-<p>It is a future development.</p>
-
-<h2 id="message" name="message">Message Adaptor</h2>
-<p>This module manages chatting and messaging.</p>
-<p>Its main functionality is requesting for:
+</li>
+ <li>Discovery adaptor
+ <p>This adaptor is a future development. Not in use yet.</p></li>
+ <li>Message adaptor
+<p>This adaptor manages chatting and messaging. It allows you to:</p>
<ul>
- <li>Creating Chatroom, Inviting to (or Ending) Chat</li>
- <li>All Unread Messages</li>
- <li>Read or Unseal Message</li>
- <li>Forward Online or Unread Message</li>
- <li>Save Call Log</li>
- <li>Chat ID based on phone number</li>
+ <li>Create a chatroom, and invite people to (or end) a chat.</li>
+ <li>Get all unread messages.</li>
+ <li>Read or unseal a message.</li>
+ <li>Forward online or unread messages.</li>
+ <li>Save the call log.</li>
+ <li>Get the chat ID based on the phone number.</li>
</ul>
-</p>
-
-<h2 id="push" name="push">Push Adaptor</h2>
-<p>It just receives push notifications from push service.</p>
-
-<h2 id="shop" name="shop">Shop Adaptor</h2>
-<p>This module makes requests for:
+ </li>
+ <li>Push adaptor
+<p>This adaptor receives push notifications from a push service.</p></li>
+ <li>Shop adaptor
+<p>This adaptor allows you to:</p>
<ul>
- <li>List of Items</li>
- <li>Item Information for Download</li>
- <li>Download of Item</li>
- <li>Item Panel URL</li>
+ <li>Get a list of items.</li>
+ <li>Get item information for download.</li>
+ <li>Download an item.</li>
+ <li>Get the item panel URL.</li>
</ul>
-</p>
+ </li>
+</ul>
-<h2 id="start_plugin" name="start_plugin">How to start plugin?</h2>
-<p>First we need to create service adaptor:</p>
-<pre class="prettyprint">
-int service_adaptor_create(service_adaptor_h *service_adaptor);
-</pre>
-<p>Than for valid service_adaptor handler we need to iterate to all installed plugins:</p>
-<pre class="prettyprint">
-int service_adaptor_foreach_plugin(service_adaptor_h service_adaptor,
- service_adaptor_plugin_cb callback,
- void *user_data);
-</pre>
+<h2 id="start_plugin" name="start_plugin">Starting a Plugin</h2>
-<p>Inside callback (which is invoked for each plugin) we get plugin_uri which is then passed to:</p>
-<pre class="prettyprint">
-int service_adaptor_create_plugin(service_adaptor_h service_adaptor,
- const char *plugin_uri,
- service_plugin_h *plugin);
-</pre>
+<p>To start a plugin, use the following process:</p>
-<p>And finally we have to request start initialization for service plugin:</p>
-<pre class="prettyprint">
-int service_plugin_start(service_plugin_h handle,
- int service_flag);
-</pre>
+<ol><li>Create a Service adaptor with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function.</li>
+<li>With a valid Service adaptor handler, iterate through all installed plugins with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_foreach_plugin()</span> function.</li>
+<li>Inside the callback (invoked for each plugin), get the <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> value, which is passed to the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create_plugin()</span> function.</li>
+<li>Request a start initialization for the service plugin with the <span style="font-family: Courier New,Courier,monospace">service_plugin_start()</span> function.</li></ol>
-Below example starts all installed Auth and Storage plugins appending each plugin_uri to the list object:
+<p>The following example starts all installed Auth and Storage plugins appending each <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> to the <span style="font-family: Courier New,Courier,monospace">list</span> object:</p>
<pre class="prettyprint">
bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data);
service_adaptor_h service_adaptor = NULL;
-ret = service_adaptor_create(&service_adaptor);
+ret = service_adaptor_create(&service_adaptor);
Evas_Object *list;
ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, (void *)list);
bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
{
- Evas_Object *list = (Evas_Object *)user_data;
-
- if (!plugin_uri || !list)
- return false;
+ Evas_Object *list = (Evas_Object *)user_data;
- if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH) && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE))
- {
- elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
+ if (!plugin_uri || !list)
+ return false;
- service_plugin_h plugin = NULL;
- service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin);
+ if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH) && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE))
+ {
+ elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
- // This should be hidden using config file or User input, because it is security information
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "enasvv4l8hdbmhn");
+ service_plugin_h plugin = NULL;
+ service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin);
- // This should be hidden using config file or User input, because it is security information
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "uqhl4pp8mo7hmgn");
- service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH | SERVICE_PLUGIN_SERVICE_STORAGE));
- }
+ // Hide this using config file or user input, because it is security information
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "enasvv4l8hdbmhn");
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "uqhl4pp8mo7hmgn");
+
+ service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH | SERVICE_PLUGIN_SERVICE_STORAGE));
+ }
- return true;
+ return 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>
<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>
+ <li><a href="service_adaptor_n.htm">Service Adaptor</a>
+ <p>Allows you to manage adaptors between the Service Adaptor Client and related plugins.</p></li>
</ul>
-
- <p>The following guides apply in <span style="color: red">mobile applications only</span>:</p>
-
+
+ <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>
+ <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>
<li><a href="contact_n.htm">Contacts</a> <p>Allows you to work with contact information in your application by retrieving and managing individual contact information, searching for contacts, and receiving address book change notifications. </p></li>
- <li><a href="service_adaptor_n.htm">Service Adaptor</a> <p>Allows you to work with cloud storages/services as: Amazon, Box, Dropbox, Googledrive, Onedrive and Sugarsync by managing authentication, contacts information and handling file transfer to/from cloud.</p></li>
-</ul>
-
+ </ul>
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</div></div></div>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>Enables you to set and get the system configuration related to user preferences.</p></li>
<li><a href="storage_n.htm">Storage</a>
<p>Enables you to access parts of the device file system.</p></li>
+ <li><a href="t-trace_n.htm">T-trace</a>
+ <p>Enables you to insert tracepoints in your application.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.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>T-trace</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/system/t-trace_tutorial_n.htm">T-trace Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.devtools/html/native_tools/t_trace_n.htm">T-trace Tool</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>T-trace</h1>
+
+<p>You can insert tracepoints in Tizen native applications to perform trace operations with the <a href="../../../../org.tizen.devtools/html/native_tools/t_trace_n.htm">T-trace tool</a>. The tracepoints allow the framework to write application traces to the system trace buffer to align them with the T-trace traces from the Tizen platform.</p>
+<p>The following T-trace function types are provided for application-level tracepoints:</p>
+<ul>
+ <li>Synchronous tracing functions: <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_end()</span></li>
+ <li>Asynchronous tracing functions: <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span></li>
+ <li>Counter tracking function: <span style="font-family: Courier New,Courier,monospace">trace_update_counter()</span></li>
+</ul>
+<p>With the T-trace tool, you can generate the traces and visualize them.</p>
+
+
+ <p class="figure">Figure: T-trace architecture</p>
+ <p align="center">
+ <img src="../../images/trace.png" alt="T-trace architecture" />
+ </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>
+
<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>
+ <title>Phonenumber utils</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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/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>
+ <li><a href="../../../../org.tizen.tutorials/html/native/telephony/phonenumber_util_tutorial_n.htm">Phonenumber utils Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.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>
+<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>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>
+<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>
</div>
<div id="toc_border"><div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <li><a href="#call">Call Information</a></li>
- <li><a href="#sim">SIM Information</a></li>
- <li><a href="#net">Network Information</a></li>
- <li><a href="#modem">Modem Information</a></li>
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony Tutorial</a></li>
<div id="container"><div id="contents"><div class="content">
<h1>Telephony</h1>
- <p>Telephony features include call, SIM, network, and modem information using the Telephony Service.</p>
-
-
-<p>The main telephony features are:</p>
-
-<ul><li><a href="#call">Call information</a>
-<p>Get the voice and video call states. You can use this information in call-related actions.</p></li>
-
-<li><a href="#sim">SIM information</a>
-<p>Extract information stored on a SIM card without changing the information.</p></li>
-
-<li><a href="#net">Network information</a>
-<p>Access (without changing) information about the current cellular network and telephony service. </p></li>
-
-<li><a href="#modem">Modem information</a>
-<p>Access (without changing) IMEI information.</p></li></ul>
-
-<p>The following figure illustrates the Telephony Service and APIs.</p>
-
- <p class="figure">Figure: Telephony API and Telephony Service</p>
- <p align="center"><img alt="Telephony API and Telephony Service" src="../../images/telephony.png" /></p>
-
-<h2 id="call" name="call">Call Information</h2>
-
-<p>The Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) provides the following functions:</p>
-
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_preferred_voice_subscription()</span>
-<p>Gets the current value for the preferred voice call subscription. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_preferred_voice_subs_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span>
-<p>Gets the list of the current call. It returns the current call count and the call handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span>
-<p>Releases the list allocated to the call handle. When the call handle is no longer needed, this function must be called to free the handle.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_handle_id()</span>
-<p>Gets the call handle ID.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_number()</span>
-<p>Gets the call number.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_type()</span>
-<p>Gets the call type. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_type_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_status()</span>
-<p>Gets the call status. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_status_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_direction()</span>
-<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_direction_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_conference_status()</span>
-<p>Determines whether the call is conference call. It returns <span style="font-family: Courier New,Courier,monospace">true</span> for a conference call or <span style="font-family: Courier New,Courier,monospace">false</span> for a single call.</p></li></ul>
-</ul>
-
-<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table>
- <caption>
- Table: Call information notification IDs
- </caption>
- <tbody>
- <tr>
- <th>Change in state</th>
- <th>Notification ID</th>
- </tr>
- <tr>
- <td>Voice Status Idle</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</span></td>
- </tr>
- <tr>
- <td>Voice Status Active</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</span></td>
- </tr>
- <tr>
- <td>Voice Status Held</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</span></td>
- </tr>
- <tr>
- <td>Voice Status Dialing</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</span></td>
- </tr>
- <tr>
- <td>Voice Status Alerting</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</span></td>
- </tr>
- <tr>
- <td>Voice Status Incoming</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</span></td>
- </tr>
- <tr>
- <td>Video Status Idle</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</span></td>
- </tr>
- <tr>
- <td>Video Status Active</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</span></td>
- </tr>
- <tr>
- <td>Video Status Dialing</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</span></td>
- </tr>
- <tr>
- <td>Video Status Alerting</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</span></td>
- </tr>
- <tr>
- <td>Video Status Incoming</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</span></td>
- </tr>
- <tr>
- <td>Preferred voice subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</span></td>
- </tr>
- </tbody>
- </table>
-
-
-<h2 id="sim" name="sim">SIM Information</h2>
-
-<p>The SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>
-<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>
-<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>
-<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>
-<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>
-<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>
-<p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>
-<p>Gets the state of the SIM. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>
-<p>Checks whether the current SIM card differs from the previous SIM card.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_application_list()</span>
-<p>Gets the application list on the UICC. It returns one of the masking (<span style="font-family: Courier New,Courier,monospace">telephony_sim_application_type_e</span>) values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_id()</span>
-<p>Gets the subscriber ID as a string, which needs to be freed by the application.</p></li>
-</ul>
-
-<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table>
- <caption>
- Table: SIM information notification IDs
- </caption>
- <tbody>
- <tr>
- <th>Change in state</th>
- <th>Notification ID</th>
- </tr>
- <tr>
- <td>SIM state</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td>
- </tr>
- </tbody>
- </table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td>
- </tr>
- </tbody>
- </table>
-
-
-<h2 id="net" name="net">Network Information</h2>
-
-<p>The Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>
-<p>Gets the LAC (Location Area Code) of the current network.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>
-<p>Gets the cell identification number.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>
-<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>
-<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>
-<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>
-<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>
-<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>
-<p>Gets the network service type of the current registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values. </p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>
-<p>Gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_ps_type()</span>
-<p>Gets the packet service type of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_ps_type_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name_option()</span>
-<p>Gets the network name option of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_name_option_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_data_subscription()</span>
-<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_data_subs_e</span> values.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_subscription()</span>
-<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_subs_e</span> values.</p></li>
-</ul>
-
-<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
-
-<p>The following table defines the available notification IDs.</p>
-
-<table>
- <caption>
- Table: Network information notification IDs
- </caption>
- <tbody>
- <tr>
- <th>Change in state</th>
- <th>Notification ID</th>
- </tr>
- <tr>
- <td>Network service state</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td>
- </tr>
- <tr>
- <td>Cell ID</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td>
- </tr>
- <tr>
- <td>Roaming status</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>
- </tr>
- <tr>
- <td>Signal strength</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td>
- </tr>
- <tr>
- <td>Network name</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>
- </tr>
- <tr>
- <td>Packet-switched type</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>
- </tr>
- <tr>
- <td>Default data subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>
- </tr>
- <tr>
- <td>Default subscription</td>
- <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>
- </tr>
- </tbody>
- </table>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">Before retrieving information from the network, you must retrieve the network service state. You can get network-related information only if the network service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</td>
- </tr>
- </tbody>
- </table>
+ <p>Telephony features include managing phone numbers and information related to the Telephony Service.</p>
+
+ <p>The main telephony 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>
+ <li><a href="telephony_info_n.htm">Telephony Information</a>
+ <p>Allows you to manage call, SIM, network, and modem information.</p></li>
+ </ul>
-<h2 id="modem" name="modem">Modem Information</h2>
-
-<p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>
-<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>
-<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the application.</p></li>
-<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_power_status()</span>
-<p>Gets the power status of the modem. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_modem_power_status_e</span> values.</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
--- /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>Telephony Information</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="#call">Call Information</a></li>
+ <li><a href="#sim">SIM Information</a></li>
+ <li><a href="#net">Network Information</a></li>
+ <li><a href="#modem">Modem Information</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm">Telephony Information Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Telephony Information</h1>
+ <p>Telephony information features include call, SIM, network, and modem information using the Telephony Service.</p>
+
+
+<p>The main telephony information features are:</p>
+
+<ul><li><a href="#call">Call information</a>
+<p>Get the voice and video call states. You can use this information in call-related actions.</p></li>
+
+<li><a href="#sim">SIM information</a>
+<p>Extract information stored on a SIM card without changing the information.</p></li>
+
+<li><a href="#net">Network information</a>
+<p>Access (without changing) information about the current cellular network and telephony service. </p></li>
+
+<li><a href="#modem">Modem information</a>
+<p>Access (without changing) IMEI information.</p></li></ul>
+
+<p>The following figure illustrates the Telephony Service and APIs.</p>
+
+ <p class="figure">Figure: Telephony APIs and Telephony Service</p>
+ <p align="center"><img alt="Telephony APIs and Telephony Service" src="../../images/telephony.png" /></p>
+
+<h2 id="call" name="call">Call Information</h2>
+
+<p>The Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) provides the following functions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_preferred_voice_subscription()</span>
+<p>Gets the current value for the preferred voice call subscription. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_preferred_voice_subs_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span>
+<p>Gets the list of the current call. It returns the current call count and the call handle.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span>
+<p>Releases the list allocated to the call handle. When the call handle is no longer needed, this function must be called to free the handle.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_handle_id()</span>
+<p>Gets the call handle ID.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_number()</span>
+<p>Gets the call number.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_type()</span>
+<p>Gets the call type. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_type_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_status()</span>
+<p>Gets the call status. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_status_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_direction()</span>
+<p>Gets the call direction: MO (Mobile Originated) or MT (Mobile Terminated). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_call_direction_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_call_get_conference_status()</span>
+<p>Determines whether the call is conference call. It returns <span style="font-family: Courier New,Courier,monospace">true</span> for a conference call or <span style="font-family: Courier New,Courier,monospace">false</span> for a single call.</p></li></ul>
+
+<p>To get call state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table>
+ <caption>
+ Table: Call information notification IDs
+ </caption>
+ <tbody>
+ <tr>
+ <th>Change in state</th>
+ <th>Notification ID</th>
+ </tr>
+ <tr>
+ <td>Voice status idle</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE</span></td>
+ </tr>
+ <tr>
+ <td>Voice status active</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE</span></td>
+ </tr>
+ <tr>
+ <td>Voice status held</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD</span></td>
+ </tr>
+ <tr>
+ <td>Voice status dialing</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING</span></td>
+ </tr>
+ <tr>
+ <td>Voice status alerting</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING</span></td>
+ </tr>
+ <tr>
+ <td>Voice status incoming</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING</span></td>
+ </tr>
+ <tr>
+ <td>Video status idle</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_IDLE</span></td>
+ </tr>
+ <tr>
+ <td>Video status active</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ACTIVE</span></td>
+ </tr>
+ <tr>
+ <td>Video status dialing</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_DIALING</span></td>
+ </tr>
+ <tr>
+ <td>Video status alerting</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_ALERTING</span></td>
+ </tr>
+ <tr>
+ <td>Video status incoming</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_VIDEO_CALL_STATUS_INCOMING</span></td>
+ </tr>
+ <tr>
+ <td>Preferred voice subscription</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_CALL_PREFERRED_VOICE_SUBSCRIPTION</span></td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2 id="sim" name="sim">SIM Information</h2>
+
+<p>The SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications) provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_icc_id()</span>
+<p>Gets the Integrated Circuit Card IDentification (ICC-ID). You get the ICC-ID as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_operator()</span>
+<p>Gets the SIM operator (MCC + MNC). You get the operator information as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_msin()</span>
+<p>Gets the Mobile Subscription Identification Number (MSIN) of the SIM provider. You get the MSIN as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_spn()</span>
+<p>Gets the Service Provider Name (SPN) of the SIM card. You get the SPN as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_cphs_operator_name()</span>
+<p>Gets the Operator Name String (ONS) of the Common PCN Handset Specification (CPHS) in the SIM card. You get the CPHS as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_number()</span>
+<p>Gets the subscriber number embedded in the SIM card. This value contains the MSISDN related to the subscriber. You get the subscriber number as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span>
+<p>Gets the state of the SIM. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_is_changed()</span>
+<p>Checks whether the current SIM card differs from the previous SIM card.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_application_list()</span>
+<p>Gets the application list on the UICC. It returns one of the masking (<span style="font-family: Courier New,Courier,monospace">telephony_sim_application_type_e</span>) values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_sim_get_subscriber_id()</span>
+<p>Gets the subscriber ID as a string, which needs to be freed by the application.</p></li>
+</ul>
+
+<p>To get SIM state change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table>
+ <caption>
+ Table: SIM information notification IDs
+ </caption>
+ <tbody>
+ <tr>
+ <th>Change in state</th>
+ <th>Notification ID</th>
+ </tr>
+ <tr>
+ <td>SIM state</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_SIM_STATUS</span></td>
+ </tr>
+ </tbody>
+ </table>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Before retrieving information from the SIM card, you must retrieve the state of the SIM card. You can get SIM-related information only if the SIM state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2 id="net" name="net">Network Information</h2>
+
+<p>The Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications) provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_lac()</span>
+<p>Gets the LAC (Location Area Code) of the current network.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_cell_id()</span>
+<p>Gets the cell identification number.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_rssi()</span>
+<p>Gets the RSSI (Received Signal Strength Indicator).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_roaming_status()</span>
+<p>Gets the roaming state (<span style="font-family: Courier New,Courier,monospace">true</span> = roaming and <span style="font-family: Courier New,Courier,monospace">false</span> = not roaming).</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mcc()</span>
+<p>Gets the MCC (Mobile Country Code) of the current registered network. You get the MCC as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_mnc()</span>
+<p>Gets the MNC (Mobile Network Code) of the current registered network. You get the MNC as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name()</span>
+<p>Gets the name of the current registered network. You get the network name as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_type()</span>
+<p>Gets the network service type of the current registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_type_e</span> values. </p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_service_state()</span>
+<p>Gets the current network state of the telephony service. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_ps_type()</span>
+<p>Gets the packet service type of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_ps_type_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_network_name_option()</span>
+<p>Gets the network name option of the currently registered network. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_name_option_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_data_subscription()</span>
+<p>Gets the current default subscription for the data service (packet-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_data_subs_e</span> values.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_network_get_default_subscription()</span>
+<p>Gets the current default subscription for the voice service (circuit-switched). It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_default_subs_e</span> values.</p></li>
+</ul>
+
+<p>To get network-related information change notifications, the application must register for the notifications with the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function, by specifying the notification ID.</p>
+
+<p>The following table defines the available notification IDs.</p>
+
+<table>
+ <caption>
+ Table: Network information notification IDs
+ </caption>
+ <tbody>
+ <tr>
+ <th>Change in state</th>
+ <th>Notification ID</th>
+ </tr>
+ <tr>
+ <td>Network service state</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span></td>
+ </tr>
+ <tr>
+ <td>Cell ID</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span></td>
+ </tr>
+ <tr>
+ <td>Roaming status</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span></td>
+ </tr>
+ <tr>
+ <td>Signal strength</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span></td>
+ </tr>
+ <tr>
+ <td>Network name</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span></td>
+ </tr>
+ <tr>
+ <td>Packet-switched type</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span></td>
+ </tr>
+ <tr>
+ <td>Default data subscription</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span></td>
+ </tr>
+ <tr>
+ <td>Default subscription</td>
+ <td><span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span></td>
+ </tr>
+ </tbody>
+ </table>
+
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Before retrieving information from the network, you must retrieve the network service state. You can get network-related information only if the network service state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="modem" name="modem">Modem Information</h2>
+
+<p>The Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications) provides the following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span>
+<p>Gets the IMEI (International Mobile Station Equipment Identity) of the mobile phone. You get the IMEI as a string, which needs to be freed by the application.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">telephony_modem_get_power_status()</span>
+<p>Gets the power status of the modem. It returns one of the <span style="font-family: Courier New,Courier,monospace">telephony_modem_power_status_e</span> values.</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
<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__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__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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>
<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__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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>
<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__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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>
<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__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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>
<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__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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 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>
+ <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="#iterate">Iterator Functions</a></li>
- <li><a href="#data_structure">Data Structure</a></li>
+ <li><a href="#string">Strings</a></li>
+ <li><a href="#array">Arrays</a></li>
+ <li><a href="#hash">Hash Tables</a></li>
+ <li><a href="#list">Lists</a></li>
+ <li><a href="#generic">Generic Value</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__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>
+ <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.html">Eina API</a></li>
</ul>
</div></div>
</div>
<h2 id="iterate" name="iterate">Iterator Functions</h2>
-<p>Eina provides a set of iterators functions to manipulate data types like arrays.</p>
-<p>These functions allow to access elements of a container in a generic way, without knowing which container is used (a bit like iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides Accessor Functions.</p>
-<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. This means you won't find any creation function for iterators in the Iterator chapter of the EFL documentation, those can be found in the documentation of the container type you're using. Although they are created with container specific functions, iterators are always deleted with the same function: eina_iterator_free().</p>
-<p>To get the data and iterate, use eina_iterator_next(). To call a function on every single element of a container, use eina_iterator_foreach().</p>
-<p>Each data type owns a set of macros, these macros provide the iterators like FOREACH or REVERSE_FOREACH</p>
-<p>More details about iterators are provided in section about data types.</p>
-<h2 id="data_structure" name="data_structure">Data Structure</h2>
-<h3 id="string" name="string">String Data Types</h3>
-<h4 id="share" name="share">Stringshare</h4>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string, and use in multiple places throughout your program. This way you can save a lot of strings with less memory.</p>
-<p>With this data type you reduce the number of duplicated strings kept in memory. It's pretty common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you could have multiple copies of a structure that allocates the string.</p>
-<p>So, rather than duplicating and freeing these strings, you request a read-only pointer to an existing string and only incur the overhead of a hash lookup.</p>
-<p>It sounds like micro-optimizing, but profiling has shown this can have a significant impact as the number of copies grows.</p>
-<p>It improves string creation/destruction speed, reduces memory use and decreases memory fragmentation, so an all-around win.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is quite easy to use. In order create a stringshare, you just have to declare a <span style="font-family: Courier New,Courier,monospace">const char *</span> and call <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add(const char * str)</span></p>
+<p>Eina provides a set of iterator functions to manipulate data types, such as arrays.</p>
+<p>These functions allow access to container elements in a generic way, without knowing which container is used (similar to iterators in the C++ STL). Iterators only allow sequential access (that is, from one element to the next one). For random access, Eina provides accessor functions.</p>
+<p>Getting an iterator to access elements of a given container is done through the functions of that particular container. There is no function to create a generic iterator as iterators absolutely depend on the container. Note that all iterators, regardless of the container type, are always deleted with the same <span style="font-family: Courier New,Courier,monospace">eina_iterator_free()</span> function.</p>
+<p>To get the data and iterate, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_next()</span> function. To call a function on every single element of a container, use the <span style="font-family: Courier New,Courier,monospace">eina_iterator_foreach()</span> function.</p>
+<p>In addition to iterator functions, each data type also owns a set of macros that provide the iterators, such as <span style="font-family: Courier New,Courier,monospace">FOREACH</span> or <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
+
+<h2 id="string" name="string">Strings</h2>
+
+<h3 id="share" name="share">Stringshare</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> data type functions allow you to store a single copy of a string and use it in multiple places throughout your program. This way you can save a lot of strings with less memory. It improves string creation and destruction speed, reduces memory use, and decreases memory fragmentation.</p>
+<p>With this data type you can reduce the number of duplicated strings kept in memory. It is common for the same strings to be dynamically allocated repeatedly between applications and libraries, especially in circumstances where you can have multiple copies of a structure that allocates the string. Rather than duplicating and freeing these strings, request a read-only pointer to an existing string and only incur the overhead of a hash lookup. This can sound like micro-optimizing, but profiling has shown that this can have a significant impact as the number of copies grows.</p>
+
+<p>To manage stringshares:</p>
+<ol>
+<li>To create a stringshare, declare a string variable and call the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_add()</span> function:
<pre class="prettyprint">
const char *mystr;
const char *prologue = "Enlightenment is not just a window manager for Linux/X11 and others"
mystr = eina_stringshare_add(prologue);
-</pre>
-<p>When you are done with this string, you can delete it using <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del(Eina_Stringshare * string)</span>.</p>
-<pre class="prettyprint">eina_stringshare_del(mystr);</pre>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> also provides some useful functions to work with stringshares, such as:</p>
-<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf (const char *fmt, ...)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace(Eina_Stringshare **p_str, const char *news)</span></li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen (Eina_Stringshare *str)</span></li>
-</ul>
+</pre></li>
-<p><span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf (const char *fmt, ...)</span> retrieves a string for use in a program from a format string. If you have a "format" string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span> you can store it as a stringshare too.</p>
+<li>To retrieve or modify the string data:
+<ul>
+<li>Retrieve a string for use in a program from a format string using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_printf()</span> function. If you have a "format" string to pass to a function like <span style="font-family: Courier New,Courier,monospace">printf</span>, you can store it as a stringshare as well.
+<p>The following example produces "1 desktop manager to rule them all".</p>
<pre class="prettyprint">
const char *myfmtstr = "%d desktop manager to rule them all";
const char *str;
print(str)
</pre>
-<p>This example produces "1 desktop manager to rule them all".</p>
-<p>You can replace the value of an Eina_Stringshare using <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace(Eina_Stringshare **p_str, const char *news)</span>. Pass the pointer's address and the new value to this function like this:</p>
-<pre class="prettyprint">eina_stringshare_replace(&str,"One desktop manager to rule them all");
+</li>
+
+<li>Replace the value of a stringshare with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_replace()</span> function. Pass the pointer address and the new value to the function.
+<pre class="prettyprint">
+eina_stringshare_replace(&str,"One desktop manager to rule them all");
+</pre>
+</li>
+
+<li>Retrieve the length of the stringshare value with the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen()</span> function.
+<pre class="prettyprint">
+printf("length: %d\n", eina_stringshare_strlen(str));
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">eina_stringshare_strlen (Eina_Stringshare *str)</span> gives you the length of the stringshare value.</p>
-<pre class="prettyprint">printf("length: %d\n", eina_stringshare_strlen(str));
+</li>
+</ul>
+</li>
+<li>When the string is no longer needed, delete it using the <span style="font-family: Courier New,Courier,monospace">eina_stringshare_del()</span> function:
+<pre class="prettyprint">
+eina_stringshare_del(mystr);
</pre>
+</li>
+</ol>
+
-<h4 id="buffer" name="buffer">String Buffer</h4>
-<p>This data type is designed to be a mutable string, allowing to append, prepend or insert a string to a buffer. By this way, you can easily handle buffers in your applications.</p>
-<p>First you need to initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> and create the buffer.</p>
+
+<h3 id="buffer" name="buffer">String Buffer</h3>
+<p>The string buffer data type is designed to be a mutable string, allowing you to append, prepend or insert a string to a buffer. It allows easy handling of buffers in your applications.</p>
+<p>To manage string buffers:</p>
+<ol>
+<li>Initialize the <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> instance and create the buffer:
<pre class="prettyprint">
Eina_Strbuf *buf;
mybuffer = eina_strbuf_new();
</pre>
-
-<h5>Appending and Prepending Characters to the Buffer</h5>
-<p>To append or prepend characters to your buffer you have multiple ways.</p>
-<p>You can simply use <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append(Eina_Strbuf * buf, const char * str)</span></p>
-<pre class="prettyprint">eina_strbuf_append(mybuffer, "This is my string. ");
-</pre
-><p><span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char(Eina_Strbuf *buf, char c)</span> just appends one character to your buffer, you also can append a "sized" string to the buffer using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length(Eina_Strbuf * buf, const char * str, size_t length)</span></p>
-<pre class="prettyprint">eina_strbuf_append_length(mybuffer, "Buffe", 5);
+</li>
+<li>Manage the buffer content:
+<ul>
+<li>To append characters to the buffer:
+<ul>
+<li>
+<p>For basic strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append()</span> function:</p>
+<pre class="prettyprint">
+eina_strbuf_append(mybuffer, "This is my string.");
+</pre>
+</li>
+<li>To append 1 character to your buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_char()</span> function. You can also append a sized string to the buffer using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_length()</span> function.
+<pre class="prettyprint">
+eina_strbuf_append_length(mybuffer, "Buffe", 5);
eina_strbuf_append_char(mybuffer, 'r');
</pre>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> also handles "printf" format strings, <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf(Eina_Strbuf * buf, const char * fmtmt, ...)</span> adds formatted strings to the buffer.</p>
-<pre class="prettyprint">eina_strbuf_append_printf(buf, "%s%c", "buffe", 'r');
+</li>
+<li>To handle "printf" format strings, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_append_printf()</span> function to add formatted strings to the buffer:
+<pre class="prettyprint">
+eina_strbuf_append_printf(buf, "%s%c", "buffe", 'r');
</pre>
+</li>
+</ul>
+</li>
-<h5>Removing and Replacing Characters from the Buffer</h5>
-<p>To remove characters from a position to another, use <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove(Eina_Strbuf * buf, size_t started, size_t end)</span> The first parameter is the buffer, the second is the start position of characters you want to delete, and the last the end position.</p>
+<li>To remove characters from one position to another, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_remove()</span> function. The first parameter is the buffer, the second is the start position of the characters you want to delete, and the last the end position.
<p>This example removes the first 19 characters of the buffer:</p>
-<pre class="prettyprint">eina_strbuf_remove(buf, 0, 18);
+<pre class="prettyprint">
+eina_strbuf_remove(buf, 0, 18);
</pre>
+</li>
-<p>To replace characters, call <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace (Eina_Strbuf *buf, const char *str, const char *with, unsigned int n)</span> or <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all (Eina_Strbuf *buf, const char *str, const char *with)</span>. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace</span> replaces the n-th occurrence of given <span style="font-family: Courier New,Courier,monospace">str</span> in the <span style="font-family: Courier New,Courier,monospace">buf</span> with <span style="font-family: Courier New,Courier,monospace">with</span> string. <span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all</span> replaces all occurrences of given <span style="font-family: Courier New,Courier,monospace">str</span> in the <span style="font-family: Courier New,Courier,monospace">buf</span> with <span style="font-family: Courier New,Courier,monospace">with</span> string.</p>
+<li>To replace characters:
+
+<ul><li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace()</span> replaces a specific occurrence of a given string in the buffer with another string.</li>
+<li>
+<span style="font-family: Courier New,Courier,monospace">eina_strbuf_replace_all()</span> replaces all occurrences of a given string in the buffer with another string.
+</li>
+</ul>
<pre class="prettyprint">
eina_strbuf_append(mybuffer, "buffer buffer buffer");
-// Replace one occurrence of "buffer" by "B-U-F-F-E-R"
+// Replacing one occurrence of "buffer" by "B-U-F-F-E-R"
eina_strbuf_replace(mybuffer, "buffer", "B-U-F-F-E-R", 1);
-// Replace all the occurrences of "buffer" by "B-U-F-F-E-R"
+// Replacing all the occurrences of "buffer" by "B-U-F-F-E-R"
eina_strbuf_replace_all(mybuffer, "buffer", "B-U-F-F-E-R");
-// Replace all the occurrences of "B-U-F-F-E-R" by "Buffer"
+// Replacing all the occurrences of "B-U-F-F-E-R" by "Buffer"
eina_strbuf_replace_all(mybuffer, "B-U-F-F-E-R", "Buffer");
</pre>
-
-<h5>Inserting Characters in the Buffer</h5>
-<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);
+</li>
+<li>To insert a string at the specified position, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_insert_printf()</span> function with formatted strings.
+<pre class="prettyprint">
+eina_strbuf_insert(mybuffer, "More buffer", 10);
// 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>
+</li>
-<h5>Counting and Printing the Buffer</h5>
-<p>You may want to print or get the length of your buffer. In order to get the complete string, calling <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get(Eina_Strbuf *buf)</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get(Eina_Strbuf *buf)</span> will return the buffer length.</p>
-<pre class="prettyprint">printf("%s : %d\n", eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
+<li>To get the complete length of the string and the buffer, use the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_get()</span> and <span style="font-family: Courier New,Courier,monospace">eina_strbuf_length_get()</span> functions:
+<pre class="prettyprint">
+printf("%s : %d\n", eina_strbuf_string_get(mybuffer), eina_strbuf_length_get(buf));
</pre>
+</li>
+</ul>
+</li>
-<h5>Freeing the Buffer</h5>
-<p>When you are done with the buffer don't forget to free the buffer using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free(Eina_Strbuf * buf)</span>. You can also free the content of a <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free(Eina_Strbuf * buf)</span>.</p>
-<pre class="prettyprint">eina_strbuf_free(mybuffer);
+<li>When no longer needed, free the buffer with the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_free()</span> function. You can also free the content of <span style="font-family: Courier New,Courier,monospace">Eina_Strbuf</span> without freeing the buffer itself using the <span style="font-family: Courier New,Courier,monospace">eina_strbuf_string_free()</span> function.
+<pre class="prettyprint">
+eina_strbuf_free(mybuffer);
</pre>
+</li>
+</ol>
-<h3 id="array" name="array">Arrays</h3>
+<h2 id="array" name="array">Arrays</h2>
<p>An array is a data type which describes an ordered collection of values. The values are accessed by their index. </p>
-<pre class="prettyprint">INDEX | VALUE
+<pre class="prettyprint">
+INDEX | VALUE
--------------
0 | value0
1 | value1
6 | value6
7 | value7
</pre>
-<p>Eina provides two types of array: the classic Array and an inline array.</p>
+<p>Eina provides 2 array types: the classic array and an inline array.</p>
-<h4>Array Data Type</h4>
+<h3>Creating and Destroying a Classic Array</h3>
-<h5>Creating and Destroying the Array</h5>
-<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new(unsigned int step)</span> function creates a new array. You can store strings or "objects" in the created array.</p>
-<p>In this example, we create an array to store "strings":</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function creates a new array. You can store strings or objects in the created array. The function returns a new array, or if memory allocation fails, <span style="font-family: Courier New,Courier,monospace">NULL</span>.</p>
+<p>The first parameter of the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function defines the size of the array allocation step. For example, if you set it to 4, the function returns an array of 4 elements and the next time you grow the array it grows by 4 elements. Unless you have pushed 4 elements inside, it does not grow. But once you add the 5th element, it grows again and becomes an array of 8 elements. The allocation step feature is very useful for optimizing performance, and it also reduces memory fragmentation by having a size that fits the array usage. If you set the step to 0, the function sets a default safe value.</p>
+
+<p>To create an array to store strings:</p>
+<ol>
+<li>Create the array:
<pre class="prettyprint">
-// The strings we want to store in the array
+// Strings to store in the array
const char* strings[] =
{
"helo", "hera", "starbuck", "kat", "boomer",
// Inserting elements in the array
for (i = 0; i < 20; i++)
eina_array_push(array, strdup(strings[i]));
-
-// We have to free the array elements
+</pre>
+</li>
+<li>To change the allocation step, use the <span style="font-family: Courier New,Courier,monospace">eina_array_step_set()</span> function:
+<ul><li>The first parameter is the array you want to change.</li>
+<li>The second parameter is the size of that specific array (retrieved with the <span style="font-family: Courier New,Courier,monospace">sizeof()</span> function).</li>
+<li>The last parameter is the new step size.</li></ul>
+<p>In this example, the array step changes from 20 to 30.</p>
+<pre class="prettyprint">
+eina_array_step_set(array, sizeof(*array), 30);
+</pre>
+</li>
+<li>When no longer used, use the <span style="font-family: Courier New,Courier,monospace">eina_array_free()</span> function to free the array. It first calls the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function and frees the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, use a <span style="font-family: Courier New,Courier,monospace">while</span> statement with the <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span> function.
+<pre class="prettyprint">
+// Freeing the array elements
while (eina_array_count(array))
free(eina_array_pop(array));
-// Free the array itself
+// Freeing the array itself
eina_array_free(array);
</pre>
-<p>The first parameter called 'step' defines the size of the allocation step, the array is allocated accordingly to the step. If you set 4 to this parameter, the function will return an array of 4 elements and next time you grow the array it will grow of 4 elements. Unless you have pushed 4 elements inside, it will not grow. But once you add the 5th element, it will grow again and become an array of 8 elements. This is very useful regarding performance issues and reduces also memory fragmentation by having a size that fit the array usage. If you set 0, the function will set a default safe value. This step can be changed using the function <span style="font-family: Courier New,Courier,monospace">eina_array_step_set</span>.</p>
-<p>This function return a valid array on success, or NULL if memory allocation fails.</p>
-<p>In the previous example we use <span style="font-family: Courier New,Courier,monospace">eina_array_free(Eina_Array *array)</span> to free the array. This function frees array. It first calls <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> and then free the memory of the pointer. It does not free the memory allocated for the elements of the array. To free them, we use a 'while' statement with <span style="font-family: Courier New,Courier,monospace">eina_array_pop</span>, this function is explained in the "Array push and pop" part of this document.</p>
-<p>Like we said before we can change the step of an array using <span style="font-family: Courier New,Courier,monospace">eina_array_step_set(Eina_Array *array, unsigned int sizeof_eina_array, unsigned int step)</span></p>
+</li>
+</ol>
+
+<h3>Modifying Classic Array Content</h3>
+
+<p>To modify classic array content:</p>
+<ul>
+<li>To set the data of an element, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_set()</span> function. The first parameter is the array, the second is the index of the element you want to set, and the last one is the data. You must first get the related pointer if you need to free it, as this function replaces the previously held data. Be careful, as there is no array or index check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the application can crash.
<pre class="prettyprint">
-Eina_Array *array;
-array = eina_array_new(10);
-eina_array_step_set(array, sizeof(*array), 20);
-eina_array_free(array);
+free(eina_array_data_get(array, 0));
+eina_array_data_set(array, 0, strdup(strings[3]);
</pre>
-<p>The first parameter is the array you want to change, the second one is the size of this very array. We use <span style="font-family: Courier New,Courier,monospace">sizeof(*array)</span> to get this size. The last parameter is the new step size. Here we pass from 10 to 20, next time the array grows, it grows of 20 elements.</p>
-
-<h5>Array Push and Pop Operations</h5>
-<p>In the creation example we add elements to the array using <span style="font-family: Courier New,Courier,monospace">eina_array_push(Eina_Array *array, const void *data)</span></p>
-<pre class="prettyprint">// Inserting elements in the array
+</li>
+<li>To add elements to the end of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_push()</span> function. The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The first parameter is the array to store the element, the second one is the data you want to store. If you store strings, remember to allocate the memory first. The example uses the <span style="font-family: Courier New,Courier,monospace">strdup</span> function to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>. This function allocates the memory of the returned string, so you do not have to do it yourself.
+<pre class="prettyprint">
for (i = 0; i < 20; i++)
eina_array_push(array, strdup(strings[i]));
</pre>
-<p>The first parameter is the array to store the element, the second one is the data you want to store. Be careful if you store strings you will have to allocate the memory first. Here we use <span style="font-family: Courier New,Courier,monospace">strdup</span> to duplicate the string contained in <span style="font-family: Courier New,Courier,monospace">strings[]</span>, this function allocates the memory of the returned string, so we don't have to do it by ourselves.</p>
-<p><span style="font-family: Courier New,Courier,monospace">eina_array_push</span> puts the element at the end of the array and returns EINA_TRUE if everything runs well, EINA_FALSE if it doesn't.</p>
-<p>To remove the last element of an array, we use <span style="font-family: Courier New,Courier,monospace">eina_array_pop(Eina_Array *array)</span>, it takes the array as parameter and if the operation succeeds, it will return a pointer to the data of the removed element. That is the reason why we use this method to free the array's elements in this part of the example:</p>
-<pre class="prettyprint">// We have to free the array elements
-while (eina_array_count(array))
- free(eina_array_pop(array));
-</pre>
+</li>
-<h5>Getting and Setting Data in an Array</h5>
-<p>If you want to access the data in the array, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_data_get(const Eina_Array *array, unsigned int idx)</span>, with the array and the index of the element you want to get.</p>
-<pre class="prettyprint">// Get the data of the first element
-char *mydata;
-mydata = eina_array_data_get(array, 0);
-</pre>
-<p>The function returns a pointer to the data.</p>
-<p>You can also set the data of an element using <span style="font-family: Courier New,Courier,monospace">eina_array_data_set(const Eina_Array *array, unsigned int idx, const void *data)</span> The first parameter is the array, the second the index of the element you want to set, and the last one is the data. This effectively replaces the previously held data. You must therefore get the related pointer if you need to free it. Be careful, for performance reasons, there is no checks of array or idx. If it is NULL or invalid, the program may crash.</p>
-<pre class="prettyprint">// Get the data of the first element
-free(eina_array_data_get(array, 0));
-eina_array_data_set(array, 0, strdup(strings[3]);
+<li>To remove the last element of an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_pop()</span> function. It takes the array as a parameter, and if the operation is successful, returns a pointer to the data of the removed element.
+<pre class="prettyprint">
+while (eina_array_count(array))
+ free(eina_array_pop(array));
</pre>
+</li>
-<h5>Array Removal Operations</h5>
-<p><span style="font-family: Courier New,Courier,monospace">eina_array_remove(Eina_Array *array, Eina_Bool(*keep)(void *data, void *gdata), void *gdata)</span> rebuilds an array by specifying the data to be kept. The first parameter is the array to be changed, the second is the function which selects the data to keep in the rebuild array, the last one is the data to pass to the 'callback' function defined as the second parameter.</p>
-<p>The keep function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, EINA_TRUE if the element stays and EINA_FALSE if it has to be removed.</p>
-<p>In this example we remove all the elements of the array which has a length greater than 5.</p>
-<pre class="prettyprint">// The keep function
+<li>To rebuild the array by specifying the data to be kept, use the <span style="font-family: Courier New,Courier,monospace">eina_array_remove()</span> function:
+<ul><li>The first parameter is the array to be changed.</li>
+<li>The second parameter is the function which selects the data to keep in the rebuilt array.</li>
+<li>The last parameter is the data to pass to the selector function defined as the second parameter.</li></ul>
+<p>The selector function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the element stays, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it has to be removed.</p>
+<p>The following example shows how to remove all the elements of the array that are longer than 5.</p>
+<pre class="prettyprint">
+// Selector function
Eina_Bool keep(void *data, void *gdata)
{
if (strlen((const char*)data) <= 5)
int remove_array()
{
- const char* strs[] =
- {
- "one", "two", "three", "four", "five", "six", "seven", "eight", "nine",
- "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen",
- "seventeen", "eighteen", "nineteen", "twenty"
- };
- const char* strings[] =
- {
- "helo", "hera", "starbuck", "kat", "boomer",
- "hotdog", "longshot", "jammer", "crashdown", "hardball",
- "duck", "racetrack", "apolo", "husker", "freaker",
- "skulls", "bulldog", "flat top", "hammerhead", "gonzo"
- };
Eina_Array *array;
Eina_Array_Iterator iterator;
const char *item;
unsigned int i;
- array = eina_array_new(10);
-
- for (i = 0; i < 20; i++)
- eina_array_push(array, strs[i]);
-
- eina_array_clean(array);
- for (i = 0; i < 20; i++)
- eina_array_push(array, strings[i]);
-
- eina_array_data_set(array, 17, "flattop");
+ // Creating and populating an array
// Removing the undesired elements
eina_array_remove(array, keep, NULL);
- EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
- printf("item #%d: %s\n", i, item);
-
- // Flushing the array
- eina_array_flush(array);
-
- // Free the array
- eina_array_free(array);
+ // Flushing and freeing the array
return 0;
}
</pre>
-
-<h5>Array Flush Operation</h5>
-<p>To completely wipe an array out, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_flush (Eina_Array *array)</span>. This function sets the counting and total members of array to 0, frees and sets to NULL all its data members. For performance issues, there is no check of the array. If it is NULL or invalid, the program may crash. The only parameter of this function is a pointer to the array (Eina_Array *) you want to flush.</p>
-<pre class="prettyprint">eina_array_flush(array);
+</li>
+<li>To completely wipe an array out, use the <span style="font-family: Courier New,Courier,monospace">eina_array_flush()</span> function. This function sets the count and total members of an array to 0, and frees and sets its data members to <span style="font-family: Courier New,Courier,monospace">NULL</span>. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash. The only parameter of this function is a pointer to the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> array you want to flush.
+<pre class="prettyprint">
+eina_array_flush(array);
+</pre>
+</li>
+<li>To empty an array quickly, use the <span style="font-family: Courier New,Courier,monospace">eina_array_clean()</span> function. This function sets the counting of members in the array to 0. It does not free any space so you have to use it carefully. For performance reasons, there is no array check. If the value is <span style="font-family: Courier New,Courier,monospace">NULL</span> or invalid, the program can crash.
+<pre class="prettyprint">
+eina_array_clean(array);
</pre>
+</li>
+</ul>
-<h5>Counting Operations</h5>
-<p>To get the number of elements in an array you must use <span style="font-family: Courier New,Courier,monospace">eina_array_count(const Eina_Array *arrays)</span></p>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The function returns an unsigned int representing to the number of elements.</p>
-<pre class="prettyprint">unsigned int nb_elm;
-nb_elm = eina_array_count(array);
+<h3>Accessing Classic Array Data</h3>
+
+<p>To access classic array data:</p>
+<ul>
+<li>To access the data in the array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_data_get()</span> function with the array and the index of the element you want to get. The function returns a pointer to the data.
+<pre class="prettyprint">
+// Getting the data of the first element
+char *mydata;
+mydata = eina_array_data_get(array, 0);
</pre>
+</li>
+
-<h5>Array Clean Operation</h5>
-<p>If you need to empty an array quickly, you can use <span style="font-family: Courier New,Courier,monospace">eina_array_clean(Eina_Array *array)</span> this function sets the counting of members in the array to 0. It doesn't free any space so you have to use it carefully. For performance reasons, there is no check of array. If it is NULL or invalid, the program may crash.</p>
-<pre class="prettyprint">eina_array_clean(array);
+<li>To get the number of elements in an array, use the <span style="font-family: Courier New,Courier,monospace">eina_array_count()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_array_new()</span> function.
+<p>The function returns the number of elements.</p>
+<pre class="prettyprint">
+unsigned int nb_elm;
+nb_elm = eina_array_count(array);
</pre>
+</li>
-<h5>Iterating in an Array</h5>
-<p>We may want to iterate through the array. Eina implements Iterators to give the ability to the programmer of iterating in the data type.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> has one iterator the <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>. You can use it by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT(array, i, item, iterator)</span>. It takes the array to iterate as first parameter, an counter for the current index during iteration, and variable of the same type of item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. So in order to use it, you have to declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and for example an <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains 'strings'</p>
+<li>To iterate through an array, you can use various methods:
+<ul>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">Eina_Array</span> iterator called <span style="font-family: Courier New,Courier,monospace">ITER_NEXT</span>.
+<p>You can use the iterator by calling the macro <span style="font-family: Courier New,Courier,monospace">EINA_ARRAY_ITER_NEXT()</span>. It takes the array to iterate as the first parameter, a counter for the current index during the iteration, and a variable of the same type as the item data and an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>. To use it, declare an <span style="font-family: Courier New,Courier,monospace">Eina_Iterator</span>, an <span style="font-family: Courier New,Courier,monospace">int</span> counter, and, for example, a <span style="font-family: Courier New,Courier,monospace">char *</span> item if your array contains any strings.</p>
<pre class="prettyprint">
Eina_Array_Iterator iterator;
const char *item;
EINA_ARRAY_ITER_NEXT(array, i, item, iterator)
printf("item #%d: %s\n", i, item);
</pre>
-<p>Eina also provides a function to iterate over an array, <span style="font-family: Courier New,Courier,monospace">eina_array_foreach(Eina_Array *array, Eina_Each_Cb cb, void *fdata)</span>. This function takes as first parameter the array to iterate, the second parameter called "cb" is a callback function which determines if the iteration can continue or not, the last parameter called fdata is the data passed to the callback function.</p>
-<p>In this example we print the data of each element:</p>
-<pre class="prettyprint">// The callback function
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function to iterate over the array.
+<p>The first parameter is the array to iterate, the second is a callback function which determines whether the iteration can continue,and the last is the data passed to the callback function.</p>
+<p>To iterate over the array and to print the data of each array element:</p>
+<pre class="prettyprint">
+// Callback function
static Eina_Bool
elm_print(const void *container, void *data, void *fdata)
{
int iterating_array()
{
- const char* strings[] =
- {
- "helo", "hera", "starbuck", "kat", "boomer",
- "hotdog", "longshot", "jammer", "crashdown", "hardball",
- "duck", "racetrack", "apolo", "husker", "freaker",
- "skulls", "bulldog", "flat top", "hammerhead", "gonzo"
- };
Eina_Array *array;
unsigned int i;
- array = eina_array_new(10);
- eina_array_step_set(array, sizeof(*array), 20);
-
- for (i = 0; i < 20; i++)
- eina_array_push(array, strdup(strings[i]));
+ // Creating and populating an array
// Iterating over the array and calling elm_print on each element
eina_array_foreach(array, elm_print, NULL);
- // Free the elements data
- while (eina_array_count(array))
- free(eina_array_pop(array));
-
- // Free the array
- eina_array_free(array);
+ // Freeing the element data and array
return 0;
}
</pre>
+</li>
-<p><span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new(const Eina_Array *array)</span> function returns a newly allocated iterator associated to array. If array is NULL or the counting of array members is less or equal than 0, this function will return NULL. If the memory cannot be allocated, NULL is returned and EINA_ERROR_OUT_OF_MEMORY is thrown. Otherwise, a valid iterator is returned.*</p>
-<p>Pass to this function the array for which you want to create a new Iterator.</p>
-<p>The iterator is used to run a sequential walk through the array, just like <span style="font-family: Courier New,Courier,monospace">eina_array_foreach</span>.</p>
-<p>In this example we print the data for all elements.</p>
-<pre class="prettyprint">static Eina_Bool
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_iterator_new()</span> function to create an iterator for the array. <p>The function returns a newly allocated iterator associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the count of the array members is less than or equal to 0, the function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid iterator is returned.</p>
+<p>Pass to this function the array for which you want to create a new iterator. The iterator is used to run a sequential walk through the array, just like the <span style="font-family: Courier New,Courier,monospace">eina_array_foreach()</span> function.</p>
+<p>To create an iterator and use it to print the data of each array element:</p>
+<pre class="prettyprint">
+static Eina_Bool
print_one(const void *container, void *data, void *fdata)
{
printf("%s\n", (char*)data);
void *uninteresting;
Eina_Bool rt;
- array = eina_array_new(4);
-
- const char *strings[] =
- {
- "uninteresting string", "husker", "starbuck", "husker"
- };
-
- for (i = 0; i < 4; i++)
- {
- eina_array_push(array, strings[i]);
- }
+ // Creating and populating an array
it = eina_array_iterator_new(array);
return 0;
}
</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new(const Eina_Array *array)</span> function returns a newly allocated accessor associated to the array. If the array is NULL or the counting of array members is less or equal than 0, this function will return NULL. If the memory cannot be allocated, NULL is returned and EINA_ERROR_OUT_OF_MEMORY is thrown. Otherwise, a valid accessor is returned. The accessors allows random access on the array.</p>
-<p>This example shows how to use accessors for a random access to the array elements.</p>
-<pre class="prettyprint">int random_access()
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_array_accessor_new()</span> function to get random access to the array elements.
+<p>The function returns a newly allocated accessor associated with the array. If the array is <span style="font-family: Courier New,Courier,monospace">NULL</span> or the counting of array members is less than or equal to 0, this function returns <span style="font-family: Courier New,Courier,monospace">NULL</span>. If the memory cannot be allocated, <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned and <span style="font-family: Courier New,Courier,monospace">EINA_ERROR_OUT_OF_MEMORY</span> is thrown. Otherwise, a valid accessor is returned.</p>
+<p>To use the accessor to retrieve and print the data of every other array element:</p>
+<pre class="prettyprint">
+int random_access()
{
- const char *strings[] =
- {
- "even", "odd", "even", "odd", "even", "odd", "even", "odd", "even", "odd"
- };
- const char *more_strings[] =
- {
- "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"
- };
// Declaration of the array
Eina_Array *array;
// Declaration of the accessor
Eina_Accessor *acc;
- // A generic counter
+ // Generic counter
unsigned short int i;
// Variable to put the data retrieved from an array element
void *data;
- array = eina_array_new(10);
-
- for (i = 0; i < 10; i++)
- {
- eina_array_push(array, strings[i]);
- }
+ // Creating and populating an array
// Creating the array accessor
acc = eina_array_accessor_new(array);
// Random access to the data of the array elements
- for (i = 1; i < 10; i += 2)
- {
- // Put the data in the variable 'data'
- eina_accessor_data_get(acc, i, &data);
- printf("%s\n", (const char *)data);
- }
-
- // Free the accessor
+ for(i = 1; i < 10; i += 2)
+ {
+ // Putting the data in the variable 'data'
+ eina_accessor_data_get(acc, i, &data);
+ printf("%s\n", (const char *)data);
+ }
+
+ // Freeing the accessor
eina_accessor_free(acc);
- // Free the array
- eina_array_free(array);
+ // Freeing the array
return 0;
}
</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h3 id="inline" name="inline">Creating and Destroying an Inline Array</h3>
+
+<p>An inline array is a container that stores the data itself, not the pointers to the data. This means there is no memory fragmentation, and for small data types, such as char, short, and int, it is more memory-efficient. This is because the data is stored in the cache and is faster to access. The bigger the data gets, however, the less likely it is and the less interesting it becomes.</p>
+<p>To create an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function:</p>
+<ul><li>The first parameter is the size of the value. In this example, only the characters are stored, and because of that, only <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> is passed to the function.</li>
+<li>The second parameter defines the size of the array allocation step. For example, if you set it to 4, the function returns an inline array of 4 elements, and the next time you grow the inline array, it grows by 4 elements and becomes an array of 8 elements. If you set the step to 0, the function sets a default safe value.
+<p>The step can be changed later on using the <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set()</span> function.</p></li></ul>
-<h3 id="inline" name="inline">Inline Arrays</h3>
-<p>The inline array is a container that stores the data itself (not the pointers to the data), this means there is no memory fragmentation. Also, for small data types (such as char, short, int, etc.), it's more memory efficient: data will be stored in cache and faster accessible, but the bigger the data gets, the less likely it is and the less interesting it becomes).</p>
-<p>To create an inline array you have to use <span style="font-family: Courier New,Courier,monospace">eina_inarray_new(unsigned int member_size, unsigned int step)</span> like in this example:</p>
-<pre class="prettyprint">int inline_array()
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function returns a pointer to the new <span style="font-family: Courier New,Courier,monospace">Eina_Inarray</span> variable.</p>
+<pre class="prettyprint">
+int inline_array()
{
- // Declaration of inline array variable of the type Eina_Inarray
+ // Declare an inline array variable of the type Eina_Inarray
Eina_Inarray *iarr;
- // Creation of an Inline array of "char"
+ // Create an inline array of "char"
iarr = eina_inarray_new(sizeof(char), 0);
- // Free the memory
+ // When no longer needed, free the array memory
eina_inarray_free(iarr);
return 0;
}
</pre>
-<p>The first parameter called 'member_size' is the size of the value. In this example we want to store only characters, so we pass <span style="font-family: Courier New,Courier,monospace">sizeof(char)</span> to the function. The second parameter called 'step' defines the size of the allocation step, the inline array is allocated by step. If you set 4 to this parameter, the function will return an inline array of 4 elements, next time you grow the inline array it will grow of 4 elements, so next time you grow the inline array will be a inline array of 8 elements. I you set 0, the function will set a default safe value. This step can be changed using the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_step_set</span>.</p>
-<p>The function will return a pointer to the new Eina_Inarray variable.</p>
-<p>This example only shows the creation of an array, now we will see the following manipulation operations:</p>
-<ul>
-<li>push and pop</li>
-<li>insert and insert sorted</li>
-<li>remove and flush</li>
-<li>replace</li>
-<li>search</li>
-<li>sort</li>
-<li>count</li>
-</ul>
-
-<h4>Push and Pop Operations</h4>
-<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);
+<h3>Modifying Inline Array Content</h3>
-// Adding a value to the inline array
+<p>To modify inline array content:</p>
+<ul>
+<li>
+<p>To add data as the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_push()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to push to the inline array.</p>
+<p>If everything runs fine, the function returns the index of the new element. If something goes wrong, it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
+<pre class="prettyprint">
ch = 'a';
eina_inarray_push(iarr, &ch);
</pre>
-
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called 'data' is the data you want to push to the inline array</p>
-<p>If everything runs fine the function will return the index of the new element. If something goes wrong it returns <span style="font-family: Courier New,Courier,monospace">-1</span>.</p>
-<p>To remove the last element of the inline array you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop(Eina_Inarray *array)</span> like in this example:</p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = 'a';
-eina_inarray_push(iarr, &ch);
-
-// Removing the last element
-eina_inarray_pop(iarr);
-</pre>
-
-<p>The only parameter of <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop</span> is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>·</p>
-<p>This function returns the data removed from the inline array.</p>
-<h4>Insertion Operations</h4>
-<p>To insert data on a given position of the inline array, you can use the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at(Eina_Inarray *array, unsigned int position, const void *data)</span>.</p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-
+</li>
+<li>
+<p>To insert data to a given position of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_at()</span> function:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to add to the inline array.</li>
+<li>The last parameter is a pointer to the content to be added.</li></ul>
+<p>The content of the pointer is copied to the given position in the inline array. All the members from the position to the end of the array are shifted towards the end. If the position is equal to the end of the array, the member is appended. If the position is bigger than the array length, the function fails.</p>
+<pre class="prettyprint">
ch = 'a';
eina_inarray_push(iarr, &ch);
ch = 'b';
eina_inarray_push(iarr, &ch);
ch = 'd';
eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
// Adding data on position 3
ch = 'c';
eina_inarray_insert_at(iarr, 2, &ch)
</pre>
-
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called 'position' is the index of the element you want to remove from the inline array.</p>
-<p>The content of pointer is copied at the given position in the inline array. All the members from position to the end of the array are shifted to the end.</p>
-<p>If position is equal to the end of the array, then the member is appended.</p>
-<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>
+</li>
+<li>
+<p>To insert data with your own position criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function. The only difference between these functions is that the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function assumes that the array is already sorted and consequently optimizes the insertion position by doing a binary search.</p>
+<p>In both functions:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data you want to push to the inline array.</li>
+<li>The last parameter is the callback comparison function.
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback function compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert()</span> or <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted()</span> function as the second parameter. If data1 is less than data2, -1 must be returned, if it is greater, 1 must be returned, and if they are equal, 0 must be returned.</p></li></ul>
+<p>The following example shows how to insert a value before a greater value:</p>
<pre class="prettyprint">
-// Defining the function with our own criteria of position
+// Defining the comparison function with the position criteria
Eina_Compare_Cb cmp(const void *a, const void *b)
{
return *(int*)a > *(int*)b;
char ch, *ch3;
int a, *b;
- // Creation of an inline array of ints with step of 4
- iarr = eina_inarray_new(sizeof(int), 4);
+ // Creating an inline array
- // Adding data to this inline array
+ // Adding data to the inline array
a = 97;
eina_inarray_push(iarr, &a);
a = 98;
a = 100;
eina_inarray_push(iarr, &a);
- // Inserting data with our own criteria
+ // Inserting data with the criteria
a = 99;
eina_inarray_insert_sorted(iarr, &a, cmp);
eina_inarray_free(iarr);
}
</pre>
+</li>
+<li>
+<p>To remove the last element of the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_pop()</span> function. The only parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. This function returns the data removed from the inline array.</p>
+<pre class="prettyprint">
+eina_inarray_pop(iarr);
+</pre>
+</li>
+<li>
+<p>To remove specific data from an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the data you want to remove from the inline array.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function finds the data and removes the matching members from the array. The data can be an existing member of an inline array for optimized usage. In other cases, the content is matched using the <span style="font-family: Courier New,Courier,monospace">memcmp()</span> function.</p>
+
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called 'data' is the data you want to push to the inline array</p>
-<p>The last parameter called 'compare' is the callback comparison function. This "callback" function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If data1 is 'less' than data2, -1 must be returned, if it is 'greater', 1 must be returned, and if they are equal, 0 must be returned.</p>
-<h4>Remove and Flush Operations</h4>
-<p>If you want to remove some data from an inline array you can use the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove(Eina_Inarray *array, const void *data)</span>. It finds the data and removes matching members from the array. The data may be an existing member of inline array for an optimized usage. If it's not the case the contents will be matched using <span style="font-family: Courier New,Courier,monospace">memcmp()</span>.</p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove()</span> function returns the index of the removed member, or -1 if failed.</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
ch = 'a';
eina_inarray_push(iarr, &ch);
-ch = 'b';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'd';
-eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
// Removing data from the array
eina_inarray_remove(iarr, &ch);
</pre>
+</li>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The second parameter called 'data' is the data you want to remove from the inline array.</p>
-<p>The function returns the index of the removed member or -1 on errors.</p>
-<p>You can also remove data from a defined position in the array, you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at(Eina_Inarray *array, unsigned int position)</span></p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = 'a';
-eina_inarray_push(iarr, &ch);
-ch = 'b';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'd';
-eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
-
+<li>
+<p>To remove data from a defined position in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_remove_at()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The second parameter is the index of the element you want to remove from the inline array.</p>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if something goes wrong. The member is removed from the inline array and any members after it are moved towards the array's head.</p>
+<pre class="prettyprint">
// Removing data from position 2
eina_inarray_remove_at(iarr, 2);
</pre>
-
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The second parameter called 'position' is the index of the element you want to remove from the inline array.</p>
-<p>The function returns EINA_TRUE on success and EINA_FALSE if something goes wrong</p>
-<p>The member is removed from the inline array and any members after it are moved towards the array's head.</p>
-<p>You can also remove all the elements of the array using <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush(Eina_Inarray *array)</span>.</p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = 'a';
-eina_inarray_push(iarr, &ch);
-ch = 'b';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'd';
-eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
-
-// Removing all inline array members
+</li>
+<li><p>To remove all the elements of the array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_flush()</span> function. The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function removes every member from the array.</p>
+<pre class="prettyprint">
eina_inarray_flush(iarr);
</pre>
+</li>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The function removes every member from array.</p>
-<h4>Replace Operations</h4>
-<p>In most of the cases when we use arrays we want to replace some values, you can do it using the function <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at(Eina_Inarray *array, unsigned int position, const void *data)</span> This function will copy the data over the given position.</p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
-
-ch = 'a';
-eina_inarray_push(iarr, &ch);
-ch = 'b';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
-
-// Removing all inline array members
+<li>
+<p>To replace values in the inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at()</span> function, which copies the data over the given position:</p>
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the index of the element you want to remove from the inline array.</li>
+<li>The last parameter is the data you want to copy in place of the current data.</li></ul>
+<p>The function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> on success, and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> on failure. The given pointer content is copied to the given position in the array. The pointer is not referenced, instead its contents are copied to the member's array using the previously defined <span style="font-family: Courier New,Courier,monospace">member_size</span>. If the position does not exist, the function fails.</p>
+<pre class="prettyprint">
+// Replacing the member at position 3
ch = 'd';
eina_inarray_replace_at(iarr, 3, &ch);
</pre>
+</li>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The second parameter called 'position' is the index of the element you want to remove from the inline array.</p>
-<p>The last parameter called 'data' is the data you want to be copied in place of the current data.</p>
-<p><span style="font-family: Courier New,Courier,monospace">eina_inarray_replace_at</span> returns EINA_TRUE on success, EINA_FALSE on failure.</p>
-<p>The given pointer contents is copied at the given position in the array.</p>
-<p>The pointer is not referenced, instead it's contents is copied to the members array using the previously defined member_size.</p>
-<p>If position does not exist, it will fail.</p>
-<h4>Searching in the Inline Array</h4>
-<p>The function <span style="font-family: Courier New,Courier,monospace">eina_inarray_search(const Eina_Inarray * array, const void * data, Eina_Compare_Cb compare)</span> allows you to search a member in an inline array. It runs a linear walk looking for the given data.</p>
-<pre class="prettyprint">Eina_Compare_Cb
-compare(const void *pa, const void *pb)
+<li>
+<p>To sort an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort()</span> function, which applies a quick sorting algorithm to the inline array:</p>
+<ul><li>The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
+<p>data1 and data2 are values contained in the inline array. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<pre class="prettyprint">
+static int
+short_cmp(const void *pa, const void *pb)
{
const short *a = pa, *b = pb;
- if (*a == *b)
- {
- return EINA_TRUE;
- }
- return EINA_FALSE;
+ return *a - *b;
}
-int search_inline_array()
+int sorting_inline_array()
{
Eina_Inarray *array;
int i;
- int elm_index;
- int to_search = 3;
- array = eina_inarray_new(sizeof(short), 1);
+ // Creating and populating the inline array
- for (i = 0; i < numbers_count; i++)
- {
- short val = i;
- eina_inarray_push(array, &val);
- }
- elm_index = eina_inarray_search(array, &to_search, compare);
+ eina_inarray_sort(array, short_cmp);
eina_inarray_free(array);
}
</pre>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The second parameter called 'data' is the data used by the callback function to run comparison.</p>
-<p>The last parameter called 'compare' is the callback comparison function. This "callback" function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If data matches function must return 0, if data1 is 'less' than data2, -1 must be returned and if it is 'greater', 1 must be returned.</p>
-<p>The function returns the member index or -1 if not found.</p>
-<p>Be careful the data given to compare function is the pointer to member memory itself, do no change it.</p>
-<p>The function <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted</span> does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search</span> but uses binary search instead for given data as compared by the compare function.</p>
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+</li>
+</ul>
+<h3>Accessing Inline Array Data</h3>
-<h4>Sorting and Counting the Inline Array Elements</h4>
-<p>To sort and inline array you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_sort(Eina_Inarray *array, Eina_Compare_Cb compare)</span> this function applies a quick sort algorithm to the inline array.</p>
-<pre class="prettyprint">static int
-short_cmp(const void *pa, const void *pb)
+<p>To access inline array data:</p>
+<ul>
+<li>
+<p>To search a member in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function that runs a linear walk looking for the given data:</p>
+
+<ul><li>The first parameter is a pointer to the array variable returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the data used by the callback function to run the comparison.</li>
+<li>The last parameter is the <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> callback comparison function, which compares data1 and data2.
+<p>data1 is the value contained in the inline array and data2 is the data you pass to the <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span> function as the second parameter. If the data matches, the function must return 0, if data1 is less than data2, -1 must be returned and if it is greater, 1 must be returned.</p></li></ul>
+<p>The function returns the member index, or -1 if not found.</p>
+<pre class="prettyprint">
+Eina_Compare_Cb
+compare(const void *pa, const void *pb)
{
const short *a = pa, *b = pb;
+ if (*a == *b)
+ {
+ return EINA_TRUE;
+ }
- return *a - *b;
+ return EINA_FALSE;
}
-static const short rand_numbers[] =
-{
- 9, 0, 2, 3, 6, 5, 4, 7, 8, 1, 10
-};
-
-int sorting_inline_array()
+int search_inline_array()
{
Eina_Inarray *array;
int i;
+ int elm_index;
+ int to_search = 3;
- array = eina_inarray_new(sizeof(short), 1);
+ // Creating and populating the inline array
- for (i = 0; i < sizeof(rand_numbers)/sizeof(rand_numbers[0]); i++)
- {
- short val = rand_numbers[i];
- eina_inarray_push(array, &val);
- }
- eina_inarray_sort(array, short_cmp);
+ elm_index = eina_inarray_search(array, &to_search, compare);
eina_inarray_free(array);
}
</pre>
-<p>The first parameter called 'array' is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>. The last parameter called 'compare' is the callback comparison function. This "callback" function of type <span style="font-family: Courier New,Courier,monospace">Eina_Compare_Cb</span> compares data1 and data2. data1 is the value contained in the inline array and data2 is the data you pass to <span style="font-family: Courier New,Courier,monospace">eina_inarray_insert_sorted</span> as second parameter. If the data matches, the function must return 0, if data1 is 'less' than data2, -1 must be returned and if it is 'greater', 1 must be returned.</p>
-<p>Same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search</span>, the data given to compare function is the pointer to member memory itself, do no change it.</p>
-<p>To get the number of elements in an inline array you must use <span style="font-family: Courier New,Courier,monospace">eina_inarray_count(const Eina_Inarray *arrays)</span></p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+<p>Be careful, the data given to the compare function is the pointer to the member memory itself. Do not change it.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_search_sorted()</span> function does exactly the same as <span style="font-family: Courier New,Courier,monospace">eina_inarray_search()</span>, but uses a binary search for the given data.</p>
+</li>
-ch = 'a';
-eina_inarray_push(iarr, &ch);
-ch = 'b';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'c';
-eina_inarray_push(iarr, &ch);
-ch = 'e';
-eina_inarray_push(iarr, &ch);
-
-// Printing the number of array elements using eina_inarray_count
+<li>
+<p>To get the number of elements in an inline array, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_count()</span>. The first parameter is a pointer to the array returned by the <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function. The function returns an unsigned <span style="font-family: Courier New,Courier,monospace">int</span>, the number of elements.</p>
+<pre class="prettyprint">
printf("Inline array of integers with %d elements:\n", eina_inarray_count(iarr));
</pre>
+</li>
+
+<li>To iterate through an inline array, you can use various methods:
+<ul>
+<li><p>You can use the iterator macros for the inline arrays: <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p></li>
+<li>
+<p>To run a linear walk over an array of elements, use the <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH()</span> macro. The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>, and the second parameter is the variable into which the current value is put during the walk. The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH()</span> macro does the same thing but starts from the last element.</p>
-<p>The first parameter called 'array' is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span> The function returns an unsigned int, the number of elements.</p>
-<h4>Iterating over an Inline Array</h4>
-<p>When we use datatypes in any language we want to iterate through lists and arrays, Eina implements Iterators to give the ability for the programmer to iterate over the datatype.</p>
-<p>The inline array have two iterators macros: the <span style="font-family: Courier New,Courier,monospace">FOREACH</span> and the <span style="font-family: Courier New,Courier,monospace">REVERSE_FOREACH</span>.</p>
-<p>To run a linear walk over an array of elements, we use the macro <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_FOREACH(array, itr)</span></p>
-<pre class="prettyprint">iarr = eina_inarray_new(sizeof(char), 0);
+<p>The following example illustrates the printing of each element and its pointer:</p>
+<pre class="prettyprint">
+iarr = eina_inarray_new(sizeof(char), 0);
int a, *b;
a = 97;
eina_inarray_push(iarr, &a);
a = 98;
eina_inarray_push(iarr, &a);
-a = 100;
-eina_inarray_push(iarr, &a);
a = 99;
+eina_inarray_push(iarr, &a);
+
EINA_INARRAY_FOREACH(iarr, b)
printf("int: %d(pointer: %p)\n", *b, b);
</pre>
-
-<p>In this example we print each element and its pointer.</p>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span>.</p>
-<p>The second parameter called 'itr' is the variable used to put the current value during the walk.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace">EINA_INARRAY_REVERSE_FOREACH</span> macro does the same thing but starts from the last element.</p>
-<p>You might need to perform some processing on the array's data, to do this you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach(const Eina_Inarray *array, Eina_Each_Cb function, const void * user_data)</span>. It will invoke the given function on each element of the array with the given data.</p>
+</li>
+<li>To process the array data, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function, which invokes the given function on each element of the array with the given data:
+<ul><li>The first parameter is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span>.</li>
+<li>The second parameter is the function to run on each element.
+<p>The function must return <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> as long as you want to continue iterating. By returning <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>, you stop the iteration and make the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function return <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<p>The data given to the function is the pointer to the member itself.</p></li>
+<li>The last parameter is the data passed to the function called on each element.</li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach()</span> function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if it successfully iterates through all items of the array. Call the function for every given data in the array. This is a safe way to iterate over an array.</p>
<pre class="prettyprint">
static Eina_Bool
array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
return 0;
}
</pre>
+</li>
-<p>The first parameter called 'array' is a pointer to the array variable returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The second parameter called 'function' is the function to run on each element.</p>
-<p>The last parameter called 'user_data' is the data passed to the 'function' called on each element.</p>
-<p>The function returns EINA_TRUE if it successfully iterates through all items of the array.</p>
-<p>Call function for every given data in array.</p>
-<p>Safe way to iterate over an array.</p>
-<p>The 'callback' function should return EINA_TRUE as long as you want the function to continue iterating, by returning EINA_FALSE it will stop and return EINA_FALSE as result.</p>
-<p>The data given to the function is the pointer to the member itself.</p>
-<p>If you want to remove some elements based on your own criteria you can use <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove(Eina_Inarray *array, Eina_Each_Cb match, const void *user_data)</span> to do that. This function walks through the array and if the value matches in the 'callback' function, it removes the element.</p>
-<pre class="prettyprint">static Eina_Bool
+<li>To remove some elements based on your own criteria, use the <span style="font-family: Courier New,Courier,monospace">eina_inarray_foreach_remove()</span> function, which walks through the array and, if the value matches in the callback function, removes the element:
+<ul><li>The first parameter is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new()</span> function.</li>
+<li>The second parameter is the callback function to run on each element.
+<p>The callback function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the value matches, or <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if it does not match.</p></li>
+<li>The last parameter is the data passed to the callback function.</li></ul>
+<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
+<pre class="prettyprint">
+static Eina_Bool
array_foreach(const void *array __UNUSED__, void *p, void *user_data __UNUSED__)
{
short *member = p;
}
</pre>
-<p>The first parameter called 'array' is a pointer to the array returned by <span style="font-family: Courier New,Courier,monospace">eina_inarray_new</span></p>
-<p>The second parameter called 'match' is the function to run on each element.</p>
-<p>The last parameter called 'user_data' is the data passed to the 'function' called on each element.</p>
-<p>The function returns the number of removed entries or -1 if something goes wrong.</p>
-<p>The match function have to return EINA_TRUE if it matches or EINA_FALSE if it doesn't.</p>
-<h3 id="hash" name="hash">Hash Tables</h3>
-<p>Eina_Hash has the same goal as every other hash table implementations. It provides a way to store values in association with a key.</p>
-<p>For example, if you want to store some tuples into a table, you can do it using <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
-<p>The Eina_Hash is implemented using an array of N "buckets", where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week key as at worst case you will still depend on an efficient binary tree implementation.</p>
-
-<p>First, like for the other data types of Eina, you have to create the "hash
-table", you can do it using `eina_hash_new(Eina_Key_Length key_length_cb, Eina_Key_Cmp key_cmp_cb, Eina_Key_Hash key_hash_cb, Eina_Free_Cb data_free_cb, int buckets_power_size)`</p>
-<p>To understand Eina_Hash, we are going to detail the parameters you must pass to this function.</p>
-<ul>
-<li>key_length_cb is the function called when getting the size of the key.</li>
-<li>key_cmp_cb is function called when comparing the keys.</li>
-<li>key_hash_cb is the function called when getting the values.</li>
-<li>data_free_cb is the function called on each value when the hash table is freed, or when an item is deleted from it. NULL can be passed as callback.</li>
-<li>buckets_power_size is the size of the buckets.</li>
+</li>
+</ul>
+</li>
</ul>
-<p>So when you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>, you will have to create 4 callback functions and this can be very long. That's why <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers you pre-defined functions to create a hash table like</p>
+
+<h2 id="hash" name="hash">Hash Tables</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides a way to store values in association with a key. For example, if you want to store some tuples into a table, you can do it using the <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> is implemented using an array of "buckets" where each bucket is a pointer to a structure that is the head of a red-black tree. This implementation makes it very robust against week keys as in the worst case scenario, you can still depend on an efficient binary tree implementation.</p>
+
+<h3 id="hash_create" name="hash_create">Creating a Hash Table</h3>
+
+<p>To create the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_new()</span> function:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new(Eina_Free_Cb data_free_cb)</span> this function creates a new hash table using the djb2 algorithm for strings.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new (Eina_Free_Cb data_free_cb)</span> creates a new hash table for use with strings (better with long strings).</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new (Eina_Free_Cb data_free_cb)</span> which creates a new hash table for use with strings with small bucket size.</li>
-<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new(Eina_Free_Cb data_free_cb)</span> for use with 32bit integers. and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new(Eina_Free_Cb data_free_cb)</span> for 64bit integers.</li>
+<li>The first parameter is the function called when getting the size of the key.</li>
+<li>The second parameter is the function called when comparing the keys.</li>
+<li>The third parameter is the function called when getting the values.</li>
+<li>The fourth parameter is the function called on each value when the hash table is freed, or when an item is deleted from it. <span style="font-family: Courier New,Courier,monospace">NULL</span> can be passed as the callback.</li>
+<li>The last parameter is the size of the buckets.</li>
</ul>
-<p>With this predefined functions, you only have to manage the function to free the data you store in you hash. <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> also have pre-defined functions to use white pointers and shared strings, <span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new(Eina_Free_Cb data_free_cb)</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new(Eina_Free_Cb data_free_cb)</span>.</p>
-<p>In the following example we manage a "small phone book" using <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new</span></p>
-<p>First we create the structure of the "phone book" and some static data.</p>
-<pre class="prettyprint">struct _Phone_Entry
+<p>When you create an <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> instance, you have to create 4 potentially long callback functions. To make the functions shorter, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers some predefined functions to create the following kinds of hash tables:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_djb2_new()</span> creates a new hash table using the djb2 algorithm for strings.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> creates a new hash table for use with strings (better with long strings).</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_string_small_new()</span> creates a new hash table for use with strings with a small bucket size.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_int32_new()</span> and <span style="font-family: Courier New,Courier,monospace">eina_hash_int64_new()</span> create a new hash table for use with 32-bit and 64-bit integers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_pointer_new()</span> creates a new hash table for use with pointers.</li>
+<li><span style="font-family: Courier New,Courier,monospace">eina_hash_stringshared_new()</span> creates a new hash table for use with shared strings.</li>
+</ul>
+<p>All these predefined functions require only one parameter, which is the function to free the data you store in the hash table.</p>
+<p>The following example shows how to manage a small phone book using the <span style="font-family: Courier New,Courier,monospace">eina_hash_string_superfast_new()</span> function to create the hash table.</p>
+<ol>
+<li><p>Create the phone book structure and some static data:</p>
+<pre class="prettyprint">
+struct _Phone_Entry
{
const char *name; // Full name
const char *number; // Phone number
{ NULL, NULL }
};
</pre>
+</li>
-<p>Now we create the free callback:</p>
-<pre class="prettyprint">static void
+<li><p>Create the callback to free the data:</p>
+<pre class="prettyprint">
+static void
_phone_entry_free_cb(void *data)
{
free(data);
}
</pre>
+<p>The free callback can be changed later using the <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set()</span> function. You need to pass the hash and the new callback function.</p>
+</li>
-<p>And finally we create the Hash and destroy the hash.</p>
-<pre class="prettyprint">int free_data()
+<li><p>Create and destroy the hash table.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_free_buckets()</span> function frees all hash table buckets. It empties the hash but does not destroy it, and you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free()</span> is called, the space allocated for the hash is freed.</p>
+<pre class="prettyprint">
+int free_data()
{
Eina_Hash *phone_book = NULL;
phone_book = eina_hash_string_superfast_new(_phone_entry_free_cb);
- // Empty the phone book, but do not destroy it
+
+ // Empty the phone book without destroying it
eina_hash_free_buckets(phone_book);
eina_hash_free(phone_book);
}
</pre>
+</li>
+</ol>
+
+
-<p><span style="font-family: Courier New,Courier,monospace">eina_hash_free_bucket</span> Free all 'buckets' of the hash table, that empties the hash but don't destroy it so you can still use it for another purpose. When <span style="font-family: Courier New,Courier,monospace">eina_hash_free</span> is called the space allocated for the hash is freed.</p>
-<p>The free callback can be changed using <span style="font-family: Courier New,Courier,monospace">eina_hash_free_cb_set(Eina_Hash *hash, Eina_Free_Cb data_free_cb)</span>, you need to pass the hash and the new callback function.</p>
-<h4>Working with Eina_Hash</h4>
-<p>In the example we create a hash but we do nothing with it. We may want to add some data to this hash, to do that we can use the function <span style="font-family: Courier New,Courier,monospace">eina_hash_add(Eina_Hash *hash, const void *key, const void *data)</span>. This function takes the hash as first parameter and the key to access to the data as second parameter and finally the data.</p>
-<pre class="prettyprint">// Add initial entries to our hash
+
+<h3>Modifying Hash Table Content</h3>
+
+<p>To modify hash table content:</p>
+<ul>
+<li>
+<p>To add some data to a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_add()</span> function. This function takes the hash, the key to access the data, and the data as its parameters.</p>
+<p>The following example shows how to add the initial data declared earlier to the hash:</p>
+<pre class="prettyprint">
for (i = 0; _start_entries[i].name != NULL; i++)
{
eina_hash_add(phone_book, _start_entries[i].name, strdup(_start_entries[i].number));
}
</pre>
-<p>Here we add the "initial" data we declared before to the hash.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers lots of methods to add elements to an hash like <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add(Eina_Hash *hash, const void *key, const void *data)</span> which adds the entry without duplicating the string key. We are storing the key in our struct so we can use this function with eina_stringshare to avoid key data duplication. We develop the usage of Eina_Stringshare in a following chapter. So we could initialize our hash like in this example:</p>
-<pre class="prettyprint">// Add initial entries to our hash, using direct_add
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> offers various ways to add elements to a hash, such as the <span style="font-family: Courier New,Courier,monospace">eina_hash_direct_add()</span> function, which adds the entry without duplicating the string key. The key is stored in the struct, so this function can be used with <span style="font-family: Courier New,Courier,monospace">eina_stringshare</span> to avoid key data duplication.</p>
+<pre class="prettyprint">
for (i = 0; _start_entries[i].name != NULL; i++)
{
- // Allocating memory for the "phone entry"
+ // Allocating memory for the phone entry
Phone_Entry *e = malloc(sizeof(Phone_Entry));
- // Creating an eina_stringshare for the Name and the phone number
+ // Creating an eina_stringshare for the name and the phone number
e->name = eina_stringshare_add(_start_entries[i].name);
e->number = eina_stringshare_add(_start_entries[i].number);
- // Adding entry to the hash
+ // Adding the entry to the hash
eina_hash_direct_add(phone_book, e->name, e);
}
</pre>
-
-<p>To delete entries of a table we can use <span style="font-family: Courier New,Courier,monospace">eina_hash_del(Eina_Hash *hash, const void *key, const void *data)</span> this function removes the entry identified by a key or a data from the given hash table</p>
+</li>
+<li>
+<p>To modify an entry, use <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span> function passing the hash, the key of the data to change, and the new data. The function returns the old data on success.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_hash_set()</span> function does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify()</span>, but if the entry does not exist, the function creates a new one.</p>
+<pre class="prettyprint">
+char *old_phone = NULL;
+char *phone = NULL;
+// Replace the phone number of Richard Strauss
+old_phone = eina_hash_modify(phone_book, "Richard Georg Strauss", strdup("+23 45 111-11111"));
+phone = eina_hash_set(phone_book, "Philippe de Magalhães", strdup("+33 6 111-11111"));
+eina_hash_set(phone_book, "Richard Georg Strauss", strdup("+23 45 111-117711"));
+</pre>
+</li>
+<li>
+<p>To change the key associated with the data without freeing and creating a new entry, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_move()</span> function. You only have to pass the hash, the old key, and the new key. If the operation succeeds, the function returns <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span>, if not, it returns <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span>.</p>
+<pre class="prettyprint">
+Eina_Bool res;
+res = eina_hash_move(phone_book, "Philippe de Magalhães", "Filipe de Magalhães");
+</pre>
+</li>
+<li>
+<p>To delete entries from a hash table:</p>
+<ul><li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del()</span> function to remove the entry identified by a key or data from the given hash table:
<pre class="prettyprint">
Eina_Bool r;
const char *entry_name = "Heitor Villa-Lobos";
r = eina_hash_del(phone_book, entry_name, NULL);
+</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key()</span> function to remove an entry based on the key:
+<pre class="prettyprint">
+r = eina_hash_del_by_key(phone_book, "Richard Georg Strauss");
</pre>
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_key(Eina_Hash *hash, const void *key)</span> to remove an entry by key.</p>
-<pre class="prettyprint">r = eina_hash_del_by_key(phone_book, "Richard Georg Strauss");
-</pre>
-<p>To remove en entry by data you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data(Eina_Hash *hash, const void *data)</span> by passing hash and the data of entry to be removed.</p>
-<pre class="prettyprint">r = eina_hash_del_by_data(phone_book, "+12 34 567-89101");
+</li>
+<li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">eina_hash_del_by_data()</span> function to remove an entry based on the data:</p>
+<pre class="prettyprint">
+r = eina_hash_del_by_data(phone_book, "+12 34 567-89101");
</pre>
+</li>
+</ul></li></ul>
-<h4>Finding, Modifying, Counting Eina Hash</h4>
-<p>The other interesting thing with Hash is the ability to find elements and get data by key name.</p>
-<p>To retrieve an entry by its key you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_find(const Eina_Hash *hash, const void *key)</span> by passing the hash and the key you are looking for.</p>
+<h3>Accessing Hash Table Data</h3>
+<p>To find hash table elements and get data based on the key name:</p>
+<ul>
+<li>
+<p>To retrieve an entry based on its key, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_find()</span> function by passing the hash and the key you are looking for:</p>
<pre class="prettyprint">
char *phone = NULL;
const char *entry_name = "Heitor Villa-Lobos";
// Look for a specific entry and get its phone number
phone = eina_hash_find(phone_book, entry_name);
</pre>
-
-<p>You can also modify some entry using <span style="font-family: Courier New,Courier,monospace">eina_hash_modify(Eina_Hash *hash, const void *key, const void *data)</span> passing the hash, the key of data to change and the new data, the function will return the old data on success. <span style="font-family: Courier New,Courier,monospace">eina_hash_set(Eina_Hash *hash, const void *key, const void *data)</span> does the same work as <span style="font-family: Courier New,Courier,monospace">eina_hash_modify</span> but if the entry doesn't exist the function will create a new one.</p>
-<pre class="prettyprint">
-char *old_phone = NULL;
-char *phone = NULL;
-// Replacing the phone number of Richard Strauss
-old_phone = eina_hash_modify(phone_book, "Richard Georg Strauss", strdup("+23 45 111-11111"));
-phone = eina_hash_set(phone_book, "Philippe de Magalhães", strdup("+33 6 111-11111"));
-eina_hash_set(phone_book, "Richard Georg Strauss", strdup("+23 45 111-117711"));
-</pre>
-
-<p>The function <span style="font-family: Courier New,Courier,monospace">eina_hash_move(Eina_Hash *hash, const void *old_key, const void *new_key)</span> changes the key associated with a data without freeing and creating a new entry. You just have to pass the hash, the old key and the new one. If the operation succeeds the function will return EINA_TRUE, if it's not it returns EINA_TRUE.</p>
-<pre class="prettyprint">
-Eina_Bool res;
-res = eina_hash_move(phone_book, "Philippe de Magalhães", "Filipe de Magalhães");
-</pre>
-
-<p>If you need to know the number of entries in a hash you can use <span style="font-family: Courier New,Courier,monospace">eina_hash_population(const Eina_Hash *hash)</span> simply passing the Hash as only argument.</p>
+</li>
+<li>
+<p>To get the number of entries in a hash, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_population()</span> function. Pass the hash as the only argument.</p>
<pre class="prettyprint">
unsigned int nb_elm;
nb_elm = eina_hash_population(phone_book);
</pre>
+</li>
+
+<li>To iterate through a hash table, you can use various methods:
+<ul>
+
+<li>to iterate over the hash table, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach()</span> function:
+
+<ul><li>The first parameter is the hash.</li>
+<li>The second parameter is the callback function called on each iteration.
+<p>The callback function has to return an <span style="font-family: Courier New,Courier,monospace">Eina_Bool</span>, <span style="font-family: Courier New,Courier,monospace">EINA_TRUE</span> if the iteration has to continue and <span style="font-family: Courier New,Courier,monospace">EINA_FALSE</span> if the iteration has to stop.</p></li>
+<li>The last parameter one is the data passed to the callback function.</li></ul>
-<h4>Iterating over Eina Hash Tables</h4>
-<p>Like the other "container" data type of Eina library, <span style="font-family: Courier New,Courier,monospace">Eina_Hash</span> provides Iterators. These iterators can be used for calling functions like <span style="font-family: Courier New,Courier,monospace">eina_hash_foreach(const Eina_Hash *hash, Eina_Hash_Foreach func, const void *fdata)</span>.</p>
-<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
+<p>The following example prints the key and the data of the hash entry (the name and the phone number):</p>
+
+<pre class="prettyprint">
static Eina_Bool
pb_foreach_cb(const Eina_Hash *phone_book, const void *key, void *data, void *fdata)
{
eina_hash_foreach(phone_book, pb_foreach_cb, NULL);
printf("\n");
</pre>
-
-<p>You can also use <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new(const Eina_Hash *hash)</span> just to iterate over the keys. To iterate over the hash data, we can use <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new (const Eina_Hash *hash)</span> the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new</span>.</p>
-<pre class="prettyprint">// Declaration of the Eina_Iterator
+</li>
+<li>To iterate over the keys, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
Eina_Iterator *it;
-// Variable to handle current iteration "data"
+// Variable to handle the current iteration "data"
void *data;
// Iterate over the keys (names)
it = eina_hash_iterator_key_new(phone_book);
-// Using the generic eina_iterator_next()
+// Use the generic eina_iterator_next()
while (eina_iterator_next(it, &data))
{
const char *name = data;
printf("%s\n", name);
}
-// You need to free the iterator
+// Free the iterator
eina_iterator_free(it);
+</pre>
+</li>
+
+<li>To iterate over the hash data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_data_new()</span> function the same way as <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_key_new()</span>:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
+Eina_Iterator *it;
-// Iterating over hash data
+// Variable to handle the current iteration "data"
+void *data;
+
+// Iterate over hash data
printf("List of numbers in the phone book:\n");
it = eina_hash_iterator_data_new(phone_book);
printf("%s\n", number);
}
-// You need to free the iterator
+// 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>
-<pre class="prettyprint">// Declaration of the Eina_Iterator
+</li>
+<li>To iterate over a tuple composed of keys and data, use the <span style="font-family: Courier New,Courier,monospace">eina_hash_iterator_tuple_new()</span> function:
+<pre class="prettyprint">
+// Declaration of the Eina_Iterator
Eina_Iterator *tit;
-// Variable to handle current iteration "data"
+// Variable to handle the current iteration "data"
void *tuple;
printf("List of phones:\n");
printf("%s: %s\n", name, number);
}
-eina_iterator_free(tit); // Always free the iterator after its use
+// Always free the iterator after its use
+eina_iterator_free(tit);
</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+
+<h2 id="list" name="list">Lists</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_List</span> is a double-linked list that can store data of any type as void pointers. It provides a set of functions to create and manipulate the list to avoid the access to the struct's fields, similar to a self-made double-link list.</p>
+<p>In addition to the previous and next node and its data, the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> nodes keep a reference to an accounting structure. The accounting structure is used to improve the performance of some functions. The structure is private and must not be modified.</p>
-<h3 id="list" name="list">Lists</h3>
+<p>In an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a "list": the list itself is a list where each node is a list as well.</p>
-<p>The Eina list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) is a double linked list. It can store data of any type as void pointers.</p>
-<p>It provides a set of functions to create and manipulate a list to avoid the access to the struct's fields like in self made double link list.</p>
-<p>In addition of keeping references to the references to the previous and the next node and it's data, the Eina_List nodes keeps a reference to an accounting structure.</p>
-<p>This accounting structure is used to improve the performance of some functions. This structure is private and should not be modified.</p>
-<p>In Eina_List everything is a "list", the list itself is a list where each "node" is a list as well.</p>
-<h4>Creating and Destroying an Eina_List</h4>
-<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()
+<p>Eina provides 2 list types: the classic list (<span style="font-family: Courier New,Courier,monospace">Eina_List</span>) and an inline list (<span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span>).</p>
+
+<h3>Creating and Destroying a List</h3>
+<p>To use an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+
+<ol><li>Declare the list with <span style="font-family: Courier New,Courier,monospace">NULL</span> as the default value:
+<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;
+</pre></li>
+<li>Call the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function with the list and the data you want to append as parameters.
+<p>The list must be a pointer to the first element of the list (or <span style="font-family: Courier New,Courier,monospace">NULL</span>). The function returns a pointer to the list.</p>
+<pre class="prettyprint">
// Creating the first element of the list
list = eina_list_append(list, "watch");
list = eina_list_append(list, "phone");
list = eina_list_append(list, "ivi");
list = eina_list_append(list, "notebook");
+</pre></li>
+<li>When you no longer need the list, free it:
+<pre class="prettyprint">
// Free the Eina_List
eina_list_free(list);
return 0;
}
+</pre></li>
+</ol>
+
+
+<h3>Modifying List Content</h3>
+
+<p>To modify list content:</p>
+<ul>
+<li>
+<p>To add data to a list:</p>
+
+<ul>
+<li>To add data at the end of the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> function. To add data at the top of the list, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>. The functions work in the same way, only adding the data to different places.
+<pre class="prettyprint">
+list = eina_list_prepend(list, "set-top box");
+</pre>
+</li>
+
+<li>To insert data into the list after a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function. As the last parameter, define the element after which the data is added.
+<p>For example to append data after the "phone" element:</p>
+<pre class="prettyprint">
+list = eina_list_append_relative(list, "single-board computer", "phone");
</pre>
+</li>
-<h4>Adding Elements to a List</h4>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_append</span> as the name says, appends data to the list. You may want to put some data at the top of the list. To do this, you can use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend(Eina_List *list, const void *data)</span> it works in the same way as <span style="font-family: Courier New,Courier,monospace">eina_list_append</span> but puts the new element on top of the list</p>
-<pre class="prettyprint">list = eina_list_prepend(list, "set-top box");</pre>
+<li>To add a new entry before a specified data, use the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative()</span> function. It is similar to the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span> function.
+<pre class="prettyprint">
+list = eina_list_prepend_relative(list, "ultrabook", "ivi");
+</pre>
+</li>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_append_relative(Eina_List *list, const void *data, const void *relative)</span> inserts the given data into the given linked list after the specified data. In order to append data after the "phone" element of the example, we pass this data as the last parameter of <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative</span> like this:</p>
-<pre class="prettyprint">list = eina_list_append_relative(list, "single-board computer", "phone");</pre>
+<li>To append a list node to a linked list after a specified member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> function. To prepend a list node to a linked list before a specified member, use the <span style="font-family: Courier New,Courier,monospace">Eina_List * eina_list_prepend_relative_list()</span> function.
+</li>
+</ul>
+</li>
-<p>In order to put a new entry after the "ivi" entry, use <span style="font-family: Courier New,Courier,monospace">eina_list_prepend_relative(Eina_List *list, const void *data, const void *relative)</span> like you used <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative</span></p>
-<pre class="prettyprint">list = eina_list_append_relative(list, "ultrabook", "ivi");</pre>
+<li>To set data in a list member, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_set()</span> function. Pass the "list" (node) as the first argument and the data to set as the second.
-<p>Eina_List * eina_list_append_relative_list (Eina_List *list, const void *data, Eina_List *relative) Appends a list node to a linked list after the specified member. More...</p>
-<p>Eina_List * eina_list_prepend_relative_list (Eina_List *list, const void *data, Eina_List *relative) Prepends a list node to a linked list before the specified member. More...</p>
+<p>The following example also shows the usage of the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span> function, which returns the last element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
-<h4>Removing Elements from a List</h4>
-<p>To remove a node of the list you can use <span style="font-family: Courier New,Courier,monospace">eina_list_remove(Eina_List *list, const void *data)</span>, this function removes the first instance of the specified data from the given list.</p>
-<pre class="prettyprint">list = eina_list_remove(list, "ultrabook");</pre>
+<pre class="prettyprint">
+// Setting new data for the last element
+eina_list_data_set(eina_list_last(list), eina_stringshare_add("Boris"));
+</pre>
+</li>
-<p>You can also remove a "list" (understand a node) from a list using <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list (Eina_List *list, Eina_List *remove_list)</span>. Pass the list you want to delete an element from and a 'list' (understand a node) you want to delete.</p>
-<pre class="prettyprint">Eina_List *app_list = NULL;
+<li id="remove_list">To remove a node from the list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_remove()</span> function. This function removes the first instance of the specified data from the given list.
+<pre class="prettyprint">
+list = eina_list_remove(list, "ultrabook");
+</pre>
+<p>You can also remove a "list" (node) from a list using the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function. Pass the list you want to delete an element from and a 'list' (node) you want to delete.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
Eina_List *to_remove = NULL;
// Adding some elements to the list (using stringshares)
app_list = eina_list_append(app_list, eina_stringshare_add("eyelight"));
app_list = eina_list_append(app_list, eina_stringshare_add("ephoto"));
-// Finding the "list" we want to remove
+// Finding the "list" to remove
to_remove = eina_list_data_find_list(list, eina_string_share_add("enlightenment"));
list = eina_list_remove_list(list, to_remove);
</pre>
+</li>
+
+<li>To move elements in a list, you can use various function, such as <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list()</span> that promotes an element to the top of the list or <span style="font-family: Courier New,Courier,monospace">eina_list_demote_list()</span> that puts the specified element at the end of the list. Remember that everything is a list so the second parameter represents the "list" (node) you want to move. Use the functions just like the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function.
+<pre class="prettyprint">
+list = eina_list_promote_list(list, eina_list_data_find_list(list, "ivi"));
+</pre>
+</li>
+<li>To reverse all the elements of a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse()</span> function. To obtain a reversed copy of the list while keeping the initial list unchanged, use the <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone()</span> function.
+<pre class="prettyprint">
+Eina_List *rev_copy;
+
+app_list = eina_list_reverse(app_list);
+rev_copy = eina_list_reverse_clone(app_list);
+</pre>
+</li>
+<li>To sort a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function. This function takes a list which needs to be sorted, the maximum number of elements to be sorted, and a callback function that compares data. To sort all list elements, set the maximum number of elements to 0.
+<pre class="prettyprint">
+int sort_cb(const void *d1, const void *d2)
+{
+ const char *txt = d1;
+ const char *txt2 = d2;
+ if(!txt) return(1);
+ if(!txt2) return(-1);
+
+ return(strcmp(txt, txt2));
+}
+
+extern Eina_List *list;
+list = eina_list_sort(list, 0, sort_cb);
+</pre>
+</li>
+<li>To merge 2 list into 1, use the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function. The <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge()</span> function merges 2 sorted lists according to the ordering function that you pass as the last argument.
+<pre class="prettyprint">
+int sort_cb(void *d1, void *d2)
+{
+ const char *txt = NULL;
+ const char *txt2 = NULL;
+ if(!d1) return(1);
+ if(!d2) return(-1);
+
+ return(strcmp((const char*)d1, (const char*)d2));
+}
+
+Eina_List *sorted1;
+Eina_List *sorted2;
+Eina_List *newlist;
+
+// Insert some values and sort your lists
+
+// Simply merge 2 lists without any process
+newlist = eina_list_merge(sorted1, sorted2);
+
+newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
+</pre>
+</li>
+<li>To split a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_split_list()</span> function:
+<ul><li>The first parameter is the list to split.</li>
+<li>The second parameter is the "list" (element) after which the list is split.</li>
+<li>The last parameter is the head of the second list.</li></ul>
+<pre class="prettyprint">
+// Original list (left list)
+Eina_List *list = NULL;
+
+// New list (right list)
+Eina_List *other_list = NULL;
+
+// Eina_List (element)
+Eina_List *l;
+
+list = eina_list_append(list, "super tux");
+list = eina_list_append(list, "frozen bubble");
+list = eina_list_append(list, "lincity-ng");
+
+// Sorting the list (just for fun)
+list = eina_list_sort(list, 0, cmp_func);
+
+// Looking for the 'split' element
+l = eina_list_search_sorted_list(list, cmp_func, "frozen bubble");
+
+// Splitting the list
+list = eina_list_split_list(list, l, &other_list);
+</pre>
+</li>
+<li>To copy a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_clone()</span> function. The function copies all the elements in the list in the exact same order.
+<pre class="prettyprint">
+Eina_List *app_list_copy;
+
+app_list_copy = eina_list_clone(app_list);
+</pre>
+</li>
+
+</ul>
-<h4>Moving Elements in a List</h4>
-<p>Eina_List implements some functions to move elements in a list. For example you can promote an element to the top of the list with <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list (Eina_List *list, Eina_List *move_list)</span>. Remember that everything is a list so the 'move_list' parameter represents the "list" (understand node) you want to move, use it just like <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list</span>.</p>
-<pre class="prettyprint">list = eina_list_promote_list(list, eina_list_data_find_list(list, "ivi"));
-</pre><p><span style="font-family: Courier New,Courier,monospace">eina_list_demote_list(Eina_List *list, Eina_List *move_list)</span> puts the "element" at the end of the list, use it like <span style="font-family: Courier New,Courier,monospace">eina_list_promote_list</span>.</p>
-<h4>Finding Elements in a List</h4>
-<p>You will probably need to find some data on your list, <span style="font-family: Courier New,Courier,monospace">eina_list_data_find(const Eina_List *list, const void *data)</span> can help you. Pass the list containing your data as first argument and the data you are looking for as last one. It returns the found member data pointer if found, NULL otherwise.</p>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_find</span> searches in list from beginning to end for the first member for which data pointer is data. If it is found, data will be returned, otherwise NULL will be returned. The function just compares pointers, that's why using Eina_Stringshare is very useful with lists, because it always returns the same pointer for the same string.</p>
-<pre class="prettyprint">Eina_List *app_list = NULL;
+<h3>Accessing List Data</h3>
+<p>To access list data:</p>
+<ul>
+<li>To find some data on your list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function. Pass the list containing your data as the first parameter and the data you are looking for as the last one. The function returns the found member data pointer if found, <span style="font-family: Courier New,Courier,monospace">NULL</span> otherwise.
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span> function searches the list from the beginning to the end for the first member for which the data pointer is data. If it is found, the data is returned, otherwise <span style="font-family: Courier New,Courier,monospace">NULL</span> is returned. The function only compares pointers, which is why using <span style="font-family: Courier New,Courier,monospace">Eina_Stringshare</span> is very useful with lists, because it always returns the same pointer for the same string.</p>
+<pre class="prettyprint">
+Eina_List *app_list = NULL;
const char *res_str;
// Adding some elements to the list (using stringshares)
app_list = eina_list_append(app_list, eina_stringshare_add("eyelight"));
app_list = eina_list_append(app_list, eina_stringshare_add("ephoto"));
-// Finding the data we need
+// Finding the data
res_str = eina_list_data_find(list, eina_string_share_add("enlightenment"));
if (res_str == eina_stringshare_add("enlightenment"))
printf("Data is present");
else
- printf("Data not present");
+ printf("Data not present");
</pre>
-<p>This example will return "Data is present".</p>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list(const Eina_List *list, const void *data)</span> does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find</span> but returns a "Eina_List". You can see an example of this in the <span style="font-family: Courier New,Courier,monospace">eina_list_remove_list</span> paragraph.</p>
-<p>You can access the data or a "list" (understand a node) of a Eina_List, using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth(const Eina_List *list, unsigned int n)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list (const Eina_List *list, unsigned int n)</span>. The first one will return a pointer to the data of the "n" element and the second a pointer to the "list". So if you want to access to the data of the 3rd element of a Eina_List proceed like this:</p>
-<pre class="prettyprint">const char *res;
+<p>The above example returns "Data is present".</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_data_find_list()</span> function does the same thing as <span style="font-family: Courier New,Courier,monospace">eina_list_data_find()</span>, but returns an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>. For an example, see the <a href="#remove_list"><span style="font-family: Courier New,Courier,monospace">eina_list_remove_list()</span> function</a>.</p>
+<p>You can access the data or a "list" (node) of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> using the <span style="font-family: Courier New,Courier,monospace">eina_list_nth()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_nth_list()</span> functions. The first one returns a pointer to the data of the "n" element and the second a pointer to the "list". To access the data of the 3rd element of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>:</p>
+<pre class="prettyprint">
+const char *res;
Eina_List *res_lst;
res = eina_list_nth(app_list, 2);
res_lst = eina_list_nth_list(app_list, 2);
</pre>
-<p>The variable <span style="font-family: Courier New,Courier,monospace">res</span> will contain the pointer to the string "calaos". <span style="font-family: Courier New,Courier,monospace">res_lst</span> the list containing "calaos"</p>
-<h4>Copying a List</h4>
-<p>You can clone a list with <span style="font-family: Courier New,Courier,monospace">eina_list_clone (const Eina_List *list)</span>, this function copies all the elements in the list in the exact same order.</p>
-<pre class="prettyprint">Eina_List *app_list_copy;
+<p>The <span style="font-family: Courier New,Courier,monospace">res</span> variable contains the pointer to the string "calaos". The <span style="font-family: Courier New,Courier,monospace">res_lst</span> variable is the list containing "calaos".</p>
+</li>
-app_list_copy = eina_list_clone(app_list);
-</pre>
+<li>To search for data in a list, select your function based on whether the list is sorted or unsorted.
+<ul>
+<li>To search in an unsorted list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function:
+<ul><li>The first parameter is the list.</li>
+<li>The second parameter is a callback function for comparison.</li>
+<li>The last parameter is the data you are looking for.</li></ul>
-<h4>Reversing a List</h4>
-<p>To reverse all the elements of a <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use <span style="font-family: Courier New,Courier,monospace">eina_list_reverse(Eina_List *list)</span>. To obtain a reversed copy of the list keeping the initial list unchanged use <span style="font-family: Courier New,Courier,monospace">eina_list_reverse_clone(const Eina_List *list)</span></p>
-<pre class="prettyprint">Eina_List *rev_copy;
+<p>The <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> function does the same but returns an "Eina_List".</p>
-app_list = eina_list_reverse(app_list);
-rev_copy = eina_list_reverse_clone(app_list);
-</pre>
-<h4>Searching and Sorting Lists</h4>
-<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()
+<p>The following example shows 2 searches using both the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list()</span> functions:</p>
+<pre class="prettyprint">
+int search_list()
{
// Declaring the list
Eina_List *list = NULL;
}
</pre>
-<p>Here we perform two searches: one with <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted</span> and another with <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted_list</span> and we compare the result of the two searches.</p>
-<p>You can search in sorted lists with <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list (const Eina_List *list, Eina_Compare_Cb func, const void *data)</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted (const Eina_List *list, Eina_Compare_Cb func, const void *data)</span>, these functions work just like <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted</span> but sorted list.</p>
-<p>You can sort a list using <span style="font-family: Courier New,Courier,monospace">eina_list_sort(Eina_List * list, unsigned int limit, Eina_Compare_Cb func)</span>. This function takes a list which needs to be sorted, "limit" is the maximum number of elements to be sorted, you can set this limit to 0 to sort all the list elements. The last parameter is the callback function that compares data.</p>
-<pre class="prettyprint">int sort_cb(const void *d1, const void *d2)
-{
- const char *txt = d1;
- const char *txt2 = d2;
- if (!txt) return(1);
- if (!txt2) return(-1);
-
- return(strcmp(txt, txt2));
-}
-
-extern Eina_List *list;
-list = eina_list_sort(list, 0, sort_cb);
-</pre>
-
-<h4>Merging and Splitting Lists</h4>
-<p>Another interesting thing to do with lists is merging, <span style="font-family: Courier New,Courier,monospace">eina_list_merge(Eina_List *left, Eina_List *right)</span> simply merges two lists into a new one. <span style="font-family: Courier New,Courier,monospace">eina_list_sorted_merge(Eina_List *left, Eina_List *right, Eina_Compare_Cb func)</span> merges two sorted lists according to the ordering func that you pass as last argument, will return.</p>
-<pre class="prettyprint">int sort_cb(void *d1, void *d2)
-{
- const char *txt = NULL;
- const char *txt2 = NULL;
- if (!d1) return(1);
- if (!d2) return(-1);
-
- return(strcmp((const char*)d1, (const char*)d2));
-}
-
-Eina_List *sorted1;
-Eina_List *sorted2;
-Eina_List *newlist;
-
-// Put some values and sort your lists
-
-// Simply merge two lists without any process
-newlist = eina_list_merge(sorted1, sorted2);
-
-newlist = eina_list_sorted_merge(sorted1, sorted2, sort_cb);
-</pre>
-
-<p>As you can merge, you can also split lists. <span style="font-family: Courier New,Courier,monospace">eina_list_split_list(Eina_List *list, Eina_List *relative, Eina_List **right)</span> will split a list into two lists.</p>
-<p>The first argument is the list to split, the second is the "list" (element) that will be split after and the last is the head of the second list.</p>
-<pre class="prettyprint">// The origin list (left list)
-Eina_List *list = NULL;
-
-// The new list (right list)
-Eina_List *other_list = NULL;
-
-// An Eina_List (element)
-Eina_List *l;
-
-list = eina_list_append(list, "super tux");
-list = eina_list_append(list, "frozen bubble");
-list = eina_list_append(list, "lincity-ng");
-
-// Sorting the list (just for fun)
-list = eina_list_sort(list, 0, cmp_func);
+</li>
+<li>To search in sorted lists, use the <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted_list()</span> and <span style="font-family: Courier New,Courier,monospace">eina_list_search_sorted()</span> functions. They work similarly as the <span style="font-family: Courier New,Courier,monospace">eina_list_search_unsorted()</span> function.
+</li>
+</ul>
+</li>
-// Looking for the 'split' element
-l = eina_list_search_sorted_list(list, cmp_func, "frozen bubble");
-// Splitting the list
-list = eina_list_split_list(list, l, &other_list);
-</pre>
+<li>To get data from a list element, use the <span style="font-family: Courier New,Courier,monospace">eina_list_data_get()</span> function. The function returns the data contained in the given list.
-<h4>Getting and Setting Data from a List Element</h4>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_data_get(const Eina_List *list)</span> will return the data contained in the given list.</p>
-<pre class="prettyprint">int list_data_set()
+<p>The following example uses the <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span> function to move through the list in a statement.</p>
+<pre class="prettyprint">
+int list_data_set()
{
// Declaring the list
Eina_List *list = NULL;
- // An Eina_List to place the Elements or lists
+ // Eina_List in which to place the elements or lists
Eina_List *l;
void *list_data;
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));
return 0;
}
</pre>
+</li>
-<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
-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))
- printf("%s\n", (char*)eina_list_data_get(l));
+<li>To move in a list, use the <span style="font-family: Courier New,Courier,monospace">eina_list_last()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_next()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_prev()</span> functions to move to the last, next, or previous element in the list.
+<p>The following example scrolls backwards starting from the end of the list:</p>
+<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>
-<h4>Counting List Elements</h4>
-<p><span style="font-family: Courier New,Courier,monospace">eina_list_count(const Eina_List *list)</span> returns the number of items in a list.</p>
-<pre class="prettyprint">printf("List size: %d\n", eina_list_count(list));
-</pre>
+</li>
-<h4>Iterators</h4>
-<p>Like the others Eina data types, <span style="font-family: Courier New,Courier,monospace">Eina_List</span> has iterators:</p>
+<li>To count the list elements, use the <span style="font-family: Courier New,Courier,monospace">eina_list_count()</span> function. The function returns the number of items in a list.
+<pre class="prettyprint">
+printf("List size: %d\n", eina_list_count(list));
+</pre>
+</li>
+<li>To iterate through an array, you can use various iterators:
<ul>
-<li>EINA_LIST_FOREACH(list, l, data)</li>
-<li>EINA_LIST_REVERSE_FOREACH(list, l, data)</li>
-<li>EINA_LIST_FOREACH_SAFE(list, l, l_next, data)</li>
-<li>EINA_LIST_FREEE(list, data)</li>
-</ul>
-<p>This iterators gives you the possibility of walking through the list from the begin or from the end.</p>
-<p>For example, in order to print the data of each "List" (understand node) of the list you can use <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span>. It takes the list to iterate, a <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current "List" (understand node) and a data parameter to receive the current data during the run.</p>
-<pre class="prettyprint">Eina_List *list = NULL;
+<li>To iterate over a list from the beginning to the end, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH</span> macro:
+<ul><li>The first parameter is the list to iterate.</li>
+<li>The second parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_List *</span> to hold the current "List" (node).</li>
+<li>The last parameter receives the current data during the run.</li></ul>
+
+<p>The following example prints the data of each "List" (node) of the list:</p>
+<pre class="prettyprint">
+Eina_List *list = NULL;
Eina_List *l;
void *list_data;
eina_list_free(list);
</pre>
-
-<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro works like EINA_LIST_FOREACH, but iterates from the last element of a list to the first. The parameters are also the same.</p>
-<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro iterates over list from the first element to the last. It is called safe because it stores the next "List" (understand node) so you can safely remove the current "List" (node) and continue the iteration.</p>
-<pre class="prettyprint">Eina_List *list;
+</li>
+<li>To iterate from the last element to the first, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_REVERSE_FOREACH</span> macro. It works similarly as <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH()</span>.
+</li>
+<li>To iterate over a list from the beginning to the end, you can also use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FOREACH_SAFE</span> macro. It is called safe, because it stores the next "List" (node), so you can safely remove the current "List" (node) and continue the iteration.
+<pre class="prettyprint">
+Eina_List *list;
Eina_List *l;
Eina_List *l_next;
char *data;
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 the elements that match "tizen"
EINA_LIST_FOREACH_SAFE(list, l, l_next, data)
if (strcmp(data, "tizen") == 0)
list = eina_list_remove_list(list, l);
}
</pre>
+</li>
-<p><span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro removes each list element while having access to node's data. Just pass the list and a pointer to hold the current data.</p>
-<pre class="prettyprint">Eina_List *list;
+
+<li>To remove each list element while having access to the node's data, use the <span style="font-family: Courier New,Courier,monospace">EINA_LIST_FREE</span> macro. Pass the list and a pointer to hold the current data.
+<pre class="prettyprint">
+Eina_List *list;
char *data;
-// The list is filled
+// List is filled
-EINA_LIST_FOREE(list, data)
+EINA_LIST_FREE(list, data)
free(data);
</pre>
+</li>
+</ul>
+</li>
+</ul>
+
+<h3 id="inlist" name="inlist">Using an Inline List</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> is a special data type drawn to store nodes pointers in the same memory as data. This way the memory is less fragmented, but operations, such as sort and count, are slower. The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> has its own purpose, but if you do not understand what the purpose is, use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with the <span style="font-family: Courier New,Courier,monospace">eina_list_append()</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span> functions.</p>
-<h3 id="inlist" name="inlist">Inline Lists</h3>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> are a special datatype drawn to store nodes pointers in the same memory as data.</p>
-<p>This way the memory is less fragmented but operations like 'sort' or 'count' are slower.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes can be part of a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, simply added with <span style="font-family: Courier New,Courier,monospace">eina_list_append</span> or <span style="font-family: Courier New,Courier,monospace">eina_list_prepend</span>.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> have their own purposes, but if you don't understand what those purposes are, just use the regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span> instead.</p>
-<h4>Creating and Adding Items to an Inline List</h4>
-<p>Like we said before <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> nodes pointers are part of the node's "data". So before creating a list, we need to define the structure of our data.</p>
-<pre class="prettyprint">struct my_struct
+<p>To use the inline list:</p>
+<ol>
+<li>Define the structure of the data before creating the inline list:
+<pre class="prettyprint">
+struct my_struct
{
EINA_INLIST;
int a, b;
};
</pre>
-<p>Our structure is composed by the EINA_INLIST "type" which is composed by 3 pointers defining the Inline list structure:</p>
+<p>The structure is composed of 2 integers, the real data, and the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> type which is composed of 3 pointers defining the inline list structure:</p>
+
<ul>
-<li>Eina_Inlist * next // The next node</li>
-<li>Eina_Inlist * prev // The previous node</li>
-<li>Eina_Inlist * last // The last node</li>
-</ul>
-<p>and two integers, the real "data".</p>
-<p>To create the Inlist nodes, you need to allocate the memory and use <span style="font-family: Courier New,Courier,monospace">eina_inlist_append</span>.</p>
-<pre class="prettyprint">struct my_struct *d, *cur;
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * next</span>: next node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * prev</span>: previous node</li>
+<li><span style="font-family: Courier New,Courier,monospace">Eina_Inlist * last</span>: last node</li>
+</ul></li>
+
+<li>
+<p>To create the inlist nodes, allocate the memory and use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function:</p>
+<ul><li>The first parameter is the existing list head or <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.
+<p>The following example passes <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list.</p></li>
+<li>The second parameter is the new list node, and it must not be <span style="font-family: Courier New,Courier,monospace">NULL</span>.
+<p>You must use the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET()</span> macro to get the inlist object of the datastruct.</p></li></ul>
+<pre class="prettyprint">
+struct my_struct *d, *cur;
Eina_Inlist *list, *itr, *tmp;
d = malloc(sizeof(*d));
list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
</pre>
-<p>The first parameter is the existing list head or NULL to create a new list. in the example we pass <span style="font-family: Courier New,Courier,monospace">NULL</span> to create a new list. The second parameter is the new list node, must not be NULL. You have to use <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_GET</span> macro to get the inlist object of the "data" struct.</p>
-<p>You have to repeat this operation for every single new node.</p>
-<pre class="prettyprint">d = malloc(sizeof(*d));
+<p>Repeat this operation for every new node:</p>
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
d->a = 2;
d->b = 20;
list = eina_inlist_append(list, EINA_INLIST_GET(d));
</pre>
+</li>
-<p>You also can put data at the end of the inline list using <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend</span>.</p>
-<pre class="prettyprint">d = malloc(sizeof(*d));
+<li>To add data to the inline list:
+<ul><li>Put data at the end of the inline list with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> function:
+<pre class="prettyprint">
+d = malloc(sizeof(*d));
d->a = 3;
d->b = 30;
list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
</pre>
+</li>
-<p>You also can add a node before or after a given node using <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative</span>.</p>
+<li>Add a node before or after a given node with the <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> functions.
+<p>In both functions, the first parameter is the target list, the second is the element you want to add, and the last is the reference element to place data after (in this case). Similarly as in a regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a list, so the last parameter is an <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
<pre class="prettyprint">d = malloc(sizeof(*d));
d->a = 4;
d->b = 40;
list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
</pre>
+</li></ul></li>
+
+<li>To sort and iterate an inline list, to find and move list elements, and to perform other inline list operations, see the <a href="../../../../org.tizen.native.mobile.apireference/group__Eina__Inline__List__Group.html">Inline List</a> API.</li>
+
+<li>When the inline list is no longer needed, destroy it by looping over the list to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data using allocated memory. Use the <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove()</span> function on each node.
-<p>The first parameter is the target list, the second is the element you want to add, and the last is the "reference" element to place data after (in this case). Such as in regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, everything is a List, so this last parameter is a <span style="font-family: Courier New,Courier,monospace">Eina_Inlist</span> typed variable.</p>
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST_CONTAINER_GET()</span> macro returns the container object of an inlist (the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struc</span>), and the list element is removed and the allocated memory of the container "object" is freed.</p>
-<h4>Destroying an Inline List</h4>
-<p>To destroy a list you need to loop over the list, to free each <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> structure and the data if your data use allocated memory and use <span style="font-family: Courier New,Courier,monospace">eina_inlist_remove</span> on each node.</p>
<pre class="prettyprint">while (list)
{
struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list, struct my_struct);
free(aux);
}
</pre>
-<p>The EINA_INLIST_CONTAINER_GET macro returns the container object of an inlist. In our case it returns the <span style="font-family: Courier New,Courier,monospace">EINA_INLIST</span> of <span style="font-family: Courier New,Courier,monospace">my_struc</span>. Then we will remove the list element and free the allocated memory of our container "object".</p>
-<p>You've probably realized that this is not really easy to use so if you don't really need this, just use regular <span style="font-family: Courier New,Courier,monospace">Eina_List</span>.</p>
-<p>For sorting, iterating, finding, moving and other operations you can refer to the EFL technical documentation.</p>
+</li>
-<h3 id="generic" name="generic">Generic Value</h3>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> provides is a generic data storage and access. It comes with pre-defined types for numbers, array, list, hash, blob and structs.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> is able to convert between data types, including string. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types.</p>
-<p>In brief you can store what you want in one single type <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>.</p>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
+
+</ol>
+
+<h2 id="generic" name="generic">Generic Value</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> object provides generic data storage and access, allowing you to store what you want in one single type of <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It is meant for simple data types, providing uniform access and release functions, useful to exchange data preserving their types. The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> comes with predefined types for numbers, array, list, hash, blob, and structs, and it can convert between data types, including string.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can handle the following types:</p>
<ul>
-<li>EINA_VALUE_TYPE_UCHAR manages unsigned char type,</li>
-<li>EINA_VALUE_TYPE_USHORT manages unsigned short type,</li>
-<li>EINA_VALUE_TYPE_UINT manages unsigned int type,</li>
-<li>EINA_VALUE_TYPE_ULONG manages unsigned long type,</li>
-<li>EINA_VALUE_TYPE_TIMESTAMP manages unsigned long type used for timestamps,</li>
-<li>EINA_VALUE_TYPE_UINT64 manages unsigned integer of 64 bits type,</li>
-<li>EINA_VALUE_TYPE_CHAR manages char type,</li>
-<li>EINA_VALUE_TYPE_SHORT manages short type,</li>
-<li>EINA_VALUE_TYPE_INT manages int type,</li>
-<li>EINA_VALUE_TYPE_LONG manages long type,</li>
-<li>EINA_VALUE_TYPE_INT64 manages integer of 64 bits type,</li>
-<li>EINA_VALUE_TYPE_FLOAT manages float type,</li>
-<li>EINA_VALUE_TYPE_DOUBLE manages double type,</li>
-<li>EINA_VALUE_TYPE_STRINGSHARE manages stringshared string type,</li>
-<li>EINA_VALUE_TYPE_STRING manages string type,</li>
-<li>EINA_VALUE_TYPE_ARRAY manages array type,</li>
-<li>EINA_VALUE_TYPE_LIST manages list type,</li>
-<li>EINA_VALUE_TYPE_HASH manages hash type,</li>
-<li>EINA_VALUE_TYPE_TIMEVAL manages 'struct timeval' type,</li>
-<li>EINA_VALUE_TYPE_BLOB manages blob of bytes type,</li>
-<li>EINA_VALUE_TYPE_STRUCT manages struct type.</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UCHAR</span>: unsigned char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_USHORT</span>: unsigned short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT</span>: unsigned int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ULONG</span>: unsigned long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMESTAMP</span>: unsigned long used for timestamps</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_UINT64</span>: unsigned integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_CHAR</span>: char</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_SHORT</span>: short</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT</span>: int</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LONG</span>: long</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_INT64</span>: integer of 64 bits</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_FLOAT</span>: float</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_DOUBLE</span>: double</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRINGSHARE</span>: stringshared string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRING</span>: string</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_ARRAY</span>: array</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>: list</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_HASH</span>: hash</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_TIMEVAL</span>: 'struct timeval'</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_BLOB</span>: blob of bytes</li>
+<li><span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_STRUCT</span>: struct</li>
</ul>
-<p>To use <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> you need to do some variable declarations.</p>
-<pre class="prettyprint">// The Eina_Value itself
+
+<p>To set up a generic value:</p>
+<ol>
+<li>Declare the necessary variables:
+<pre class="prettyprint">
+// The Eina_Value itself
Eina_Value v;
// An integer
int i;
// And a char *
char *newstr;
</pre>
+</li>
-<p>Now we can start using <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and setup a <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer (if you prefer "create" the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>). Use <span style="font-family: Courier New,Courier,monospace">eina_value_setup(Eina_Value * value, const Eina_Value_Type *value type)</span>. First argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and second is the type.</p>
-<pre class="prettyprint">eina_value_setup(&v, EINA_VALUE_TYPE_INT);
+<li>To set up an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> for an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_setup()</span> function. The first argument is the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> and the second is the type.
+<pre class="prettyprint">
+eina_value_setup(&v, EINA_VALUE_TYPE_INT);
</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> is created and can receive a "value", here we set it up for an Integer, so we set an integer using <span style="font-family: Courier New,Courier,monospace">eina_value_set(eina_value_set(Eina_Value *value, ...)</span></p>
-<pre class="prettyprint">eina_value_set(&v, 123);
+</li>
+</ol>
+<p>To manage the generic value:</p>
+<ul>
+<li>To set an integer, use the <span style="font-family: Courier New,Courier,monospace">eina_value_set()</span> function:
+<pre class="prettyprint">
+eina_value_set(&v, 123);
</pre>
+</li>
-<p>We can get the value using <span style="font-family: Courier New,Courier,monospace">eina_value_get(const Eina_Value *v, ...)</span>: we pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as first argument, and a pointer to a variable to "store" the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).</p>
-<pre class="prettyprint">eina_value_get(&v, &i);
+<li>To get the value, use the <span style="font-family: Courier New,Courier,monospace">eina_value_get()</span> function. Pass the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> as the first argument, and a pointer to a variable to store the value (the target variable must have the same type as the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>).
+<pre class="prettyprint">
+eina_value_get(&v, &i);
printf("v=%d\n", i);
</pre>
+<p>The above example prints "v=123".</p>
+</li>
-<p>This will print "v=123".</p>
-<p>Here comes the interesting part with <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>, in the above snippet of code we printed an int value. We can however print the value as string. We can use <span style="font-family: Courier New,Courier,monospace">eina_value_to_string(const Eina_Value *v()</span> to convert an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to string.</p>
-<pre class="prettyprint">newstr = eina_value_to_string(&v);
+<li>To convert an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function. The code snippet above printed an <span style="font-family: Courier New,Courier,monospace">int</span> value. It is also possible to print the value as a string.
+<pre class="prettyprint">
+newstr = eina_value_to_string(&v);
printf("v as string: %s\n", newstr);
free(newstr);
</pre>
+</li>
-<p>Don't forget to free the memory allocated by eina_value_to_string</p>
-<p>When you are done with the Generic Value, don't forget to destroy it using <span style="font-family: Courier New,Courier,monospace">eina_value_flush(cont Eina_Value *v)</span></p>
-<pre class="prettyprint">eina_value_flush(&v);
+<li>To free the memory allocated by <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_flush()</span> function:
+<pre class="prettyprint">
+eina_value_flush(&v);
</pre>
+</li>
-<p>Of course we can setup a string, store it, and use it with <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>.</p>
-<p>We now reuse v to store a string, get its value and print it:</p>
-<pre class="prettyprint">const char *s;
+<li>To store a string, get its value, and print it:
+<pre class="prettyprint">
+const char *s;
eina_value_setup(&v, EINA_VALUE_TYPE_STRING);
eina_value_set(&v, "My string");
printf("v=%s (pointer: %p)\n", s, s);
</pre>
+</li>
-<p>we also can use <span style="font-family: Courier New,Courier,monospace">eina_value_to_string</span> with an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> setup for strings.</p>
-<pre class="prettyprint">char *newstr;
+<li>To set up a string, use the <span style="font-family: Courier New,Courier,monospace">eina_value_to_string()</span> function with an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>:
+<pre class="prettyprint">
+char *newstr;
newstr = eina_value_to_string(&v);
printf("v as string: %s (pointer: %p)\n", newstr, newstr);
eina_value_flush(&v);
</pre>
+</li>
-<p>Another way to convert from one <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to another is <span style="font-family: Courier New,Courier,monospace">eina_value_convert(Eina_Value *ori, Eina_Value *target)</span>. This function put the converted value into another Eina_Value. This function excepts pointers so you have to pass a Eina_Value pointer.</p>
-<pre class="prettyprint">Eina_Value v;
+<li>To convert from one <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> to another, use the <span style="font-family: Courier New,Courier,monospace">eina_value_convert()</span> function.
+<p>The function puts the converted value into another <span style="font-family: Courier New,Courier,monospace">Eina_Value</span>. It accepts pointers, so you have to pass an <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> pointer.</p>
+<pre class="prettyprint">
+Eina_Value v;
Eina_Value otherv;
// Set up 2 Eina_Values: 1 int and 1 string
eina_value_flush(&otherv);
eina_value_flush(&v);
</pre>
+</li>
-<p><span style="font-family: Courier New,Courier,monospace">Eina_Value</span> can be used to store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, which corresponds to the type <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span>.</p>
-<p>To Create a <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, you can use <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup(Eina_Value * value, const Eina_Value_Type_Type * subtype)</span> This function initializes a generic value storage of type list. The first parameter is value "object", the second is type (how to manage the stored list members).</p>
+<li>To store an <span style="font-family: Courier New,Courier,monospace">Eina_List</span>, use the <span style="font-family: Courier New,Courier,monospace">Eina_Value</span> that corresponds to the <span style="font-family: Courier New,Courier,monospace">EINA_VALUE_TYPE_LIST</span> type.
+</li>
+<li>To create an <span style="font-family: Courier New,Courier,monospace">Eina_Value_List</span>, use the <span style="font-family: Courier New,Courier,monospace">eina_value_list_setup()</span> function. The function initializes a generic value storage of the list type. The first parameter is the "object" value, and the second one is the type (how to manage the stored list members).
+</li>
+</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<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__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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<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__Edje.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__Edje.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>
}
</pre>
-<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document's root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span> and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">set</span> block is used to define an image with different content depending on their size. Besides the document's root, additional <span style="font-family: Courier New,Courier,monospace;">set</span> blocks can be included inside other blocks, normally <span style="font-family: Courier New,Courier,monospace;">collections</span>, <span style="font-family: Courier New,Courier,monospace;">group</span>, and <span style="font-family: Courier New,Courier,monospace;">part</span>. This makes file list maintenance easier when the theme is split among multiple files.</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">name [image name]</span>
<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__Edje.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__Edje.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>
<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__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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<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>
+ <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="eina_n.htm">Eina</a>.</li>
</ul>
<p>The EFL include more than just the above libraries, but the above are the most important libraries to get started with. The other libraries, such as Eet, Embryo, and Emotion, will be explored later in the programming guides and the <a href="../../../../org.tizen.native.mobile.apireference/index.html">API Reference</a>.</p>
<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__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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<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__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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.html">Eina API for Wearable Native</a></li>
</ul>
</div></div>
</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>
+ <li><a href="#getting_started">Getting Started with the Elementary Library</a></li>
+ <li><a href="#config">Managing Elementary Profiles</a></li>
+ <li><a href="#options">Configuring Elementary Options</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__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__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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>
</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 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>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 to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the <a href="ui_component_mn.htm#containers">container UI components</a> and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, 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_mn.htm#containers">Containers</a>.</p>
+<h2 id="getting_started" name="getting_started">Getting Started with the Elementary Library</h2>
-<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>To use the Elementary library:</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>
+<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
+<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
+<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
+<li>Add Elementary UI components in the main loop.
+<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 passed to the functions that are used to configure the UI component.</p></li>
+<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
+<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
+<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
-<h3 id="first_use" name="first_use">First Use of the Elementary Library</h3>
-<p>A minimal Elementary application looks like this:</p>
+<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
-<pre class="prettyprint">#include <Elementary.h>
+<pre class="prettyprint">
+#include <Elementary.h>
int main(int argc, char **argv)
{
elm_init(argc, argv);
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>
+ <td class="note">An Elementary application must use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which 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">HelloWorld 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>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both 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>
+<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 to 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, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</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>Several callbacks can be registered to handle Elementary object events:</p>
-<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>
+<ul>
+<li>Evas event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+</li>
-<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>
+<li>Evas smart callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the "smart event" to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
-<h4>Elementary Signal Callback</h4>
+<li>Edje signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
+</li>
-<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>
+<li>Elementary signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component's theme. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
-<h4>Elementary Event Callback</h4>
+<li>Elementary event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for 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 process the event.</p>
+</li>
+</ul>
-<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>
+<p>For more information about events related to Elementary objects, 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>
- <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>
+ <h2 id="config" name="config">Managing Elementary Profiles</h2>
-<pre class="prettyprint">elm_config_save();</pre>
+<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</p>
-<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>
+<p>To manage Elementary profiles:</p>
+<ul>
+<li>List the existing profiles:
+<pre class="prettyprint">
+Eina_List *list = elm_config_profile_list_get();
+</pre>
+</li>
+<li>Set a particular profile:
+<pre class="prettyprint">
+elm_config_profile_set("myprofile");
+</pre>
+</li>
+<li>Get the current profile:
+<pre class="prettyprint">
+char *profile = elm_config_profile_get();
+</pre>
+</li>
+<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function:
+<pre class="prettyprint">
+elm_config_save();
+</pre>
+</li>
+<li>To reload the Elementary configuration saved for the current profile:
+<pre class="prettyprint">
+elm_config_reload();
+</pre>
+</li>
+</ul>
-<pre class="prettyprint">elm_config_profile_set("myprofile");</pre>
+<h2 id="options" name="options">Configuring Elementary Options</h2>
-<p>We can get the current profile:</p>
+<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
+<ul>
-<pre class="prettyprint">char *profile = elm_config_profile_get();</pre>
+<li>To scale UI components:
+<p>You can configure <a href="ui_component_mn.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
+<ul>
+<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
+<pre class="prettyprint">
+elm_config_scale_set(2.0);
+</pre>
+</li>
+
+<li>Set the finger size:
+<pre class="prettyprint">
+elm_config_finger_size_set(1.5);
+</pre>
+</li>
+</ul>
+</li>
-<h3 id="scaling" name="scaling">Scaling UI Components</h3>
+<li>To manage caches:
+<ul>
+<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
+<pre class="prettyprint">
+elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);
+</pre>
+</li>
+
+<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
+<pre class="prettyprint">
+elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);
+</pre>
+</li>
+
+<li>Set the Edje collection and Edje file cache sizes:
+<pre class="prettyprint">
+elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);
+</pre>
+</li>
+</ul>
+</li>
-<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 UI components:</p>
+<li>To configure the gesture layer:
+<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
-<pre class="prettyprint">elm_config_scale_set(2.0);</pre>
+<pre class="prettyprint">
+elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);
+</pre>
+</li>
+<li>To manage scrolling:
+<ul>
+<li>Make the scroller bounce when it reaches its viewport's edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
+<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>
+</li>
-<p>We can also set the finger size:</p>
+<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
-<pre class="prettyprint">elm_config_finger_size_set(1.5);</pre>
+<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger scrolling is 20 pixels.</p>
+<pre class="prettyprint">
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+elm_config_scroll_thumbscroll_threshold_set(20);
+</pre>
+</li>
+</ul>
+</li>
-<h3 id="config_cache" name="config_cache">Configuring the Cache</h3>
+<li>To configure long press events:
+<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
+<pre class="prettyprint">
+double lp_timeout = elm_config_longpress_timeout_get();
+elm_config_longpress_timeout_set(lp_timeout + 1.0);
+</pre>
+</li>
-<p>We can enable the globally configured cache flush, and we can then set the flush interval to 60 seconds:</p>
+<li>To configure tooltips:
+<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
-<pre class="prettyprint">elm_config_cache_flush_enabled_set(EINA_TRUE);
-elm_config_cache_flush_interval_set(60);</pre>
+<pre class="prettyprint">
+elm_config_tooltip_delay_set(2.0);
+</pre>
+</li>
-<p>We can configure the font cache size to 500 bytes and the image cache size to 5 000 000 bytes:</p>
+<li>To configure the password show last feature:
+<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
-<pre class="prettyprint">elm_config_cache_font_cache_size_set(500);
-elm_config_cache_image_cache_size_set(5000000);</pre>
+<ul>
+<li>Enable the password show last feature:
+<pre class="prettyprint">
+elm_config_password_show_last_set(EINA_TRUE);
+</pre>
+</li>
+<li>Set the visibility timeout (how many seconds the input is visible):
+<pre class="prettyprint">
+elm_config_password_show_last_timeout_set(5.0);
+</pre>
+</li>
+</ul>
+</li>
+<li>To set the Elementary engine:
+<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
-<p>Finally, we can set the Edje collection cache size and the Edje file cache size:</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>
-<pre class="prettyprint">elm_config_cache_edje_file_cache_size_set(500);
-elm_config_cache_edje_collection_cache_size_set(500);</pre>
+<pre class="prettyprint">
+elm_config_engine_set("opengl_x11");
+</pre>
+</li>
+
+<li>To activate the access mode:
+<p>Set the access mode as active, so that 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:</p>
+
+<pre class="prettyprint">
+elm_config_access_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To configure the selection mode:
+<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
+<pre class="prettyprint">
+elm_config_selection_unfocused_clear_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To enable mirroring:
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays 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>
+
+<pre class="prettyprint">
+elm_config_mirrored_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To set the frame rate:
+<p>Define the frames per second (FPS) value for the <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. This example sets the FPS 60.</p>
+
+<pre class="prettyprint">
+elm_config_fps_set(60.0);
+</pre>
+</li>
+</ul>
<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>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme 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>
+<p>For <a href="preferences_n.htm#customize">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces 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 UI component is themed. If something is missing from the extension, it can break the UI component's behavior.</td>
+ <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must 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>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must 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. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</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>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
+ </tr>
+ </tbody>
+</table>
-<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">Managing Focus</h3>
-<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 application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
-<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>
+<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Only visible objects can be focused.</td>
+ <td class="note">Only visible objects can have the focus.</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>Elementary supports focus chains that 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 are added to the code. It is also possible to define custom focus chains, when needed.</p>
+
+<p>For more information on focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</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>To manage the focus:</p>
+
+<ul>
+<li>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. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
<pre class="prettyprint">Eina_List *obj_list = NULL;
list = eina_list_append(list, obj3);
elm_object_focus_custom_chain_set(container_object, list);</pre>
+</li>
-<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>
+<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
+</li>
-<p>For detailed information about focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
+<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
+</li>
-<p>We can show a highlight on the focused object:</p>
+<li>To show a highlight on the focused object:
-<pre class="prettyprint">elm_config_focus_highlight_enabled_set(EINA_TRUE);</pre>
+<pre class="prettyprint">
+elm_config_focus_highlight_enabled_set(EINA_TRUE);
+</pre>
+</li>
-<p>We can also activate an animation when the focus shifts from one object to another:</p>
+<li>To activate an animation when the focus shifts from one object to another:
-<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.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();
-
-// 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>
+<pre class="prettyprint">
+elm_config_focus_highlight_animate_set(EINA_TRUE);
+</pre>
+</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>
<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>
+ <li><a href="#getting_started">Getting Started with the Elementary Library</a></li>
+ <li><a href="#config">Managing Elementary Profiles</a></li>
+ <li><a href="#options">Configuring Elementary Options</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__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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>
</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>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 to facilitate the creation of new UI components. The Elementary UI components inherit a lot of their code from the <a href="ui_component_wn.htm#containers">container UI components</a> and the layout component (a container component that takes a standard Edje design file and wraps it very thinly). You can use the container and layout functions on the Elementary UI components, as well as the Elementary object functions, 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>
+<h2 id="getting_started" name="getting_started">Getting Started with the Elementary Library</h2>
-<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>To use the Elementary library:</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>
+<ol><li>Initialize the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_init()</span> function.</li>
+<li>Start the Elementary main loop with the <span style="font-family: Courier New,Courier,monospace">elm_run()</span> function.
+<p>The function does not return, instead, it constantly loops and runs the event and the processing tasks.</p></li>
+<li>Add Elementary UI components in the main loop.
+<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 passed to the functions that are used to configure the UI component.</p></li>
+<li>Stop the main loop and return to the <span style="font-family: Courier New,Courier,monospace">main()</span> function with the <span style="font-family: Courier New,Courier,monospace">elm_exit()</span> function.</li>
+<li>When your application terminates, shut down the Elementary library with the <span style="font-family: Courier New,Courier,monospace">elm_shutdown()</span> function.
+<p>The function frees the Elementary objects that were allocated in the main loop, so you do not need to separately deallocate them.</p></li></ol>
-<h3 id="first_use" name="first_use">First Use of the Elementary Library</h3>
-<p>A minimal Elementary application looks like this:</p>
+<p>The following code snippet shows the <span style="font-family: Courier New,Courier,monospace">main()</span> function of a minimal Elementary application:</p>
-<pre class="prettyprint">#include <Elementary.h>
+<pre class="prettyprint">
+#include <Elementary.h>
int main(int argc, char **argv)
{
elm_init(argc, argv);
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>
+ <td class="note">An Elementary application must use the <span style="font-family: Courier New,Courier,monospace">ELM_MAIN()</span> macro, which 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">HelloWorld 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>All objects created using Elementary are of the <span style="font-family: Courier New,Courier,monospace">Evas_Object*</span> type. This means that both 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>
+<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 to 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, the <span style="font-family: Courier New,Courier,monospace">Elm_Object_Item</span> instance is bigger than expected, but can still help in saving memory.</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>
+<p>Several callbacks can be registered to handle Elementary object events:</p>
-<h4>Edje Signal Callbacks</h4>
+<ul>
+<li>Evas event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function to add a callback for input events (key up, key down, mouse wheel) on an Evas object. In case of an Elementary object, the callback is registered on the underlying Evas object without considering the Elementary object infrastructure (no event propagation).</p>
+</li>
-<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>
+<li>Evas smart callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function to add a callback for a smart event emitted by an Elementary object. Smart callbacks can only be registered on smart objects, and the "smart event" to register must be implemented by the corresponding smart object. Otherwise, the callback does nothing. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
-<h4>Elementary Signal Callback</h4>
+<li>Edje signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">edje_object_signal_callback_add()</span> function to add a callback for a signal coming from an Edje object (a theme object).</p>
+</li>
-<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>
+<li>Elementary signal callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function to add a callback for a signal coming from an Elementary UI component's theme. The callback does not apply to input events (keyboard or mouse).</p>
+</li>
-<h4>Elementary Event Callback</h4>
+<li>Elementary event callback
+<p>Use the <span style="font-family: Courier New,Courier,monospace">elm_object_event_callback_add()</span> function to add a callback for 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 process the event.</p>
+</li>
+</ul>
-<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>
+<p>For more information about events related to Elementary objects, 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>
- <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>
+ <h2 id="config" name="config">Managing Elementary Profiles</h2>
-<p>When a profile is selected, we can ask Elementary to reload its configuration with the saved profile:</p>
+<p>An Elementary profile is a set of preconfigured options that affects the entire look and feel of an application. The options linked to a specific profile form an Elementary configuration, which can be used to store the desired set of options for use in multiple sessions. Once loaded, the Elementary profile configures all the options and sets the look and feel of your Elementary application.</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>
+<p>To manage Elementary profiles:</p>
+<ul>
+<li>List the existing profiles:
+<pre class="prettyprint">
+Eina_List *list = elm_config_profile_list_get();
+</pre>
+</li>
+<li>Set a particular profile:
+<pre class="prettyprint">
+elm_config_profile_set("myprofile");
+</pre>
+</li>
+<li>Get the current profile:
+<pre class="prettyprint">
+char *profile = elm_config_profile_get();
+</pre>
+</li>
+<li>To save the current option values as an Elementary configuration for later use, use the <span style="font-family: Courier New,Courier,monospace">elm_config_save()</span> function:
+<pre class="prettyprint">
+elm_config_save();
+</pre>
+</li>
+<li>To reload the Elementary configuration saved for the current profile:
+<pre class="prettyprint">
+elm_config_reload();
+</pre>
+</li>
+</ul>
-<pre class="prettyprint">elm_config_profile_set("myprofile");</pre>
+<h2 id="options" name="options">Configuring Elementary Options</h2>
-<p>We can get the current profile:</p>
+<p>You can set the following options in the Elementary configuration. In addition, you can <a href="#customizing_themes">customize themes</a> and <a href="#config_focus">manage focus</a>.</p>
+<ul>
-<pre class="prettyprint">char *profile = elm_config_profile_get();</pre>
+<li>To scale UI components:
+<p>You can configure <a href="ui_component_wn.htm#scalability">UI component scaling</a> in terms of both interactive and readable areas.</p>
+<ul>
+<li>Set the global scaling factor (for example, setting it to 2.0 doubles the size of all scalable UI components):
+<pre class="prettyprint">
+elm_config_scale_set(2.0);
+</pre>
+</li>
+
+<li>Set the finger size:
+<pre class="prettyprint">
+elm_config_finger_size_set(1.5);
+</pre>
+</li>
+</ul>
+</li>
-<h3 id="scaling" name="scaling">Scaling UI Components</h3>
+<li>To manage caches:
+<ul>
+<li>Enable the globally configured cache flush, and set the flush interval (in this example, to 60 seconds):
+<pre class="prettyprint">
+elm_config_cache_flush_enabled_set(EINA_TRUE);
+elm_config_cache_flush_interval_set(60);
+</pre>
+</li>
+
+<li>Configure the font and image cache sizes (to 500 and 5 000 000 bytes, respectively):
+<pre class="prettyprint">
+elm_config_cache_font_cache_size_set(500);
+elm_config_cache_image_cache_size_set(5000000);
+</pre>
+</li>
+
+<li>Set the Edje collection and Edje file cache sizes:
+<pre class="prettyprint">
+elm_config_cache_edje_file_cache_size_set(500);
+elm_config_cache_edje_collection_cache_size_set(500);
+</pre>
+</li>
+</ul>
+</li>
-<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>
+<li>To configure the gesture layer:
+<p>You can set the duration of the long tap and double tap events on the gesture layer objects. The following example sets the duration to 500 ms.</p>
-<pre class="prettyprint">elm_config_scale_set(2.0);</pre>
+<pre class="prettyprint">
+elm_config_glayer_long_tap_start_timeout_set(0.5);
+elm_config_glayer_double_tap_timeout_set(0.5);
+</pre>
+</li>
+<li>To manage scrolling:
+<ul>
+<li>Make the scroller bounce when it reaches its viewport's edge during scrolling by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_enabled_set()</span> function:
+<pre class="prettyprint">
+elm_config_scroll_bounce_enabled_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>Control the inertia of the bounce animation by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_bounce_friction_set()</span> function:
+<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>
+</li>
-<p>We can also set the finger size:</p>
+<li>Set the scroller to be draggable by using the <span style="font-family: Courier New,Courier,monospace">elm_config_scroll_thumbscroll_enabled_set()</span> function. You can configure several drag options, such as friction, sensitivity, acceleration, and momentum.
-<pre class="prettyprint">elm_config_finger_size_set(1.5);</pre>
+<p>The following example sets the scroller to be draggable, defines that the number of pixels one must travel while dragging the scroller view to actually trigger scrolling is 20 pixels.</p>
+<pre class="prettyprint">
+elm_config_scroll_thumbscroll_enabled_set(EINA_TRUE);
+elm_config_scroll_thumbscroll_threshold_set(20);
+</pre>
+</li>
+</ul>
+</li>
-<h3 id="config_cache" name="config_cache">Configuring the Cache</h3>
+<li>To configure long press events:
+<p>Get the current timeout before a long press event is retrieved, and modify it. The following example increases the timeout by 1 second.</p>
+<pre class="prettyprint">
+double lp_timeout = elm_config_longpress_timeout_get();
+elm_config_longpress_timeout_set(lp_timeout + 1.0);
+</pre>
+</li>
-<p>We can enable the globally configured cache flush, and we can then set the flush interval to 60 seconds:</p>
+<li>To configure tooltips:
+<p>Set the duration after which a tooltip is shown. The following example sets the delay to 2 seconds.</p>
-<pre class="prettyprint">elm_config_cache_flush_enabled_set(EINA_TRUE);
-elm_config_cache_flush_interval_set(60);</pre>
+<pre class="prettyprint">
+elm_config_tooltip_delay_set(2.0);
+</pre>
+</li>
-<p>We can configure the font cache size to 500 bytes and the image cache size to 5 000 000 bytes:</p>
+<li>To configure the password show last feature:
+<p>The password show last feature enables the user to view the last input entered for a few seconds before it is masked.</p>
-<pre class="prettyprint">elm_config_cache_font_cache_size_set(500);
-elm_config_cache_image_cache_size_set(5000000);</pre>
+<ul>
+<li>Enable the password show last feature:
+<pre class="prettyprint">
+elm_config_password_show_last_set(EINA_TRUE);
+</pre>
+</li>
+<li>Set the visibility timeout (how many seconds the input is visible):
+<pre class="prettyprint">
+elm_config_password_show_last_timeout_set(5.0);
+</pre>
+</li>
+</ul>
+</li>
+<li>To set the Elementary engine:
+<p>You can define the rendering engine that Elementary uses to draw the windows. The following rendering engines are supported:</p>
-<p>Finally, we can set the Edje collection cache size and the Edje file cache size:</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>
-<pre class="prettyprint">elm_config_cache_edje_file_cache_size_set(500);
-elm_config_cache_edje_collection_cache_size_set(500);</pre>
+<pre class="prettyprint">
+elm_config_engine_set("opengl_x11");
+</pre>
+</li>
+
+<li>To activate the access mode:
+<p>Set the access mode as active, so that 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:</p>
+
+<pre class="prettyprint">
+elm_config_access_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To configure the selection mode:
+<p>Set the selection mode so that the selection is cleared when the entry component is unfocused:</p>
+<pre class="prettyprint">
+elm_config_selection_unfocused_clear_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To enable mirroring:
+<p>Elementary allows UI mirroring both on a single object and on the entire UI. If mirroring is enabled, an Elementary UI component displays 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>
+
+<pre class="prettyprint">
+elm_config_mirrored_set(EINA_TRUE);
+</pre>
+</li>
+
+<li>To set the frame rate:
+<p>Define the frames per second (FPS) value for the <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. This example sets the FPS 60.</p>
+
+<pre class="prettyprint">
+elm_config_fps_set(60.0);
+</pre>
+</li>
+</ul>
<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>Elementary uses Edje to theme its UI components. Edje provides a default theme for each UI component in an application. You can change the theme using the <span style="font-family: Courier New,Courier,monospace">ELM_THEME</span> environment variable. You can also modify the theme 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>
+<p>For <a href="preferences_n.htm#customize">custom styles</a>, use extensions. Extensions allow you to write styles for specific UI components. Add a new extension to the list of Elementary themes with the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function, and apply the new style to the UI component with the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function. Once set, the extension replaces 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 UI component is themed. If something is missing from the extension, it can break the UI component's behavior.</td>
+ <td class="note">When developing an extension, to respect the signals emitted and the elements that need to be in place, you must 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>To modify Elementary themes, you can also use overlays. An overlay can replace the look of all UI components by overriding the default styles. As with extensions, you must 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. To add or remove an overlay, use the <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_add()</span> and <span style="font-family: Courier New,Courier,monospace">elm_theme_overlay_del()</span> functions.</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>
+<table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">With overlays, you can replace the default view and affect every UI component. This is very similar to setting the theme for the whole application, and probably clashes with end user options. Using overlays also runs the risk of non-matching styles across the application. Unless you have a very good reason to use them, avoid overlays.</td>
+ </tr>
+ </tbody>
+</table>
-<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">Managing Focus</h3>
-<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 application window. The focused object can also change its decoration to show the user where the focus is. In an Elementary application, only one object can have the focus at a time.</p>
-<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>
+<p>To set the focus to a new Elementary object and take the focus away from the previous focused object, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_set()</span> function. You can make an object unfocusable with the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_allow_set()</span> function.</p>
<table class="note">
<tbody>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Only visible objects can be focused.</td>
+ <td class="note">Only visible objects can have the focus.</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>Elementary supports focus chains that 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 are added to the code. It is also possible to define custom focus chains, when needed.</p>
+
+<p>For more information on focus, see <a href="preferences_n.htm#focus">Managing UI Component Focus</a>.</p>
+
+<p>To manage the focus:</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>
+<ul>
+<li>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. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_set()</span> function to set the final list as the custom focus chain of the parent object (in the following example, <span style="font-family: Courier New,Courier,monospace">container_object</span> is the parent object).
<pre class="prettyprint">Eina_List *obj_list = NULL;
list = eina_list_append(list, obj3);
elm_object_focus_custom_chain_set(container_object, list);</pre>
+</li>
-<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>
+<li>To remove the custom focus chain and use the default focus chain instead, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_custom_chain_unset()</span> function.
+</li>
-<p>We can show a highlight on the focused object:</p>
+<li>To programmatically cycle through the focus chain, use the <span style="font-family: Courier New,Courier,monospace">elm_object_focus_next()</span> function.
+</li>
-<pre class="prettyprint">elm_config_focus_highlight_enabled_set(EINA_TRUE);</pre>
+<li>To show a highlight on the focused object:
-<p>We can also activate an animation when the focus shifts from one object to another:</p>
+<pre class="prettyprint">
+elm_config_focus_highlight_enabled_set(EINA_TRUE);
+</pre>
+</li>
-<pre class="prettyprint">elm_config_focus_highlight_animate_set(EINA_TRUE);</pre>
+<li>To activate an animation when the focus shifts from one object to another:
-<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>
+<pre class="prettyprint">
+elm_config_focus_highlight_animate_set(EINA_TRUE);
+</pre>
+</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/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>EOM</title>
+ <title>External Output Manager</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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/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> -->
+ <li><a href="../../../../org.tizen.tutorials/html/native/ui/eom_tutorial_n.htm">External Output Manager Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>EOM</h1>
+<h1>External Output Manager</h1>
<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>
+<p>The main features of the External Output Manager API include:</p>
<ul>
<li>Managing modes
<ul>
<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__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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__Ecore.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>
<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__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__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.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__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.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>
<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__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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Ecore.html">Ecore API for Wearable Native</a></li>
</ul>
</div></div>
</div>
</div>
<div id="toc_border"><div id="toc">
-
-
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#apply">Applying System Font Settings</a></li>
+ <li><a href="#supported">Supported Font Styles</a></li>
+ </ul>
<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__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.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__Edje.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>
<li>Setting the font using EDC</li>
<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>
+<p>In the application, you can set a system-wide font and font size to text(textblock) parts with text classes (except <span style="font-family: Courier New,Courier,monospace;">tizen</span>). When the system applies a new system-wide font and font size to the application, the font size of text(textblock) parts with the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class are not affected. </p>
+<p>The following words in the <span style="font-family: Courier New,Courier,monospace;">text_class</span> definition are reserved for the system:</p>
<ul>
<li><span style="font-family: Courier New,Courier,monospace;">button</span></li>
<li><span style="font-family: Courier New,Courier,monospace;">tizen</span></li>
</ul>
-<p>The <span style="font-family: Courier New,Courier,monospace;">tizen</span> class is not affected by the system font settings.</p>
<p>Set a specific ratio to a given font size for each object through the text class. If you give a negative value as font size, it is used as the percentage of the originally given font size. The following example code show set the font size as 150% of the given font size.</p>
<pre class="prettyprint">
</li>
</ul>
+<h2 id="apply" name="apply">Applying System Font Settings</h2>
+
+<p>Tizen provides a special "Tizen" font name. The "Tizen" font name does not match with any specific font; it is just an alias for a system-defined font (system font). When you create a text(textblock) part with the "Tizen" font name in the application's EDC, the system font is loaded into the user application when those objects are created. Additionally, you can apply the system font to a text or textblock part by using the text class, as described above.</p>
+
+<p>The following EDC example shows how to apply the system font to a TEXT or TEXTBLOCK part by using the "Tizen" font name and the <span style="font-family: Courier New,Courier,monospace;">tizen</span> text class. As font name is "Tizen" and the font size is set to 36, the system font is loaded in size 36. If the system setting changes, this part loads the new system font. However, its font size is not changed, because the text class is <span style="font-family: Courier New,Courier,monospace;">tizen</span>.</p>
+
+<pre class="prettyprint">
+description
+{
+ text
+ {
+ font: "Tizen:style=Regular";
+ font_size: 36;
+ text_class: "tizen";
+ }
+}</pre>
+
+<p>If the part has a predefined text classes other than <span style="font-family: Courier New,Courier,monospace;">tizen</span>, its font size is resized as well.</p>
+
+<pre class="prettyprint">
+description
+{
+ text
+ {
+ font: "Tizen:style=Regular";
+ font_size: 36;
+ text_class: "label";
+ }
+}</pre>
+
<h2 id="supported" name="supported">Supported Font Styles</h2>
<p>The font styles supported by the EFL are listed in the following table.</p>
<ul class="toc">
<li><a href="#Timers">Timers</a></li>
<li><a href="#Animators">Animators</a></li>
- <li><a href="#Descriptors_Handling">Handling File Descriptors</a></li>
+ <li><a href="#Descriptors_Handling">File Descriptors</a></li>
<li><a href="#Threads">Threads</a></li>
<li><a href="#Idlers">Idlers</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__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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__Ecore.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>
<h1>Main Loop</h1>
-<p>The EFL are event-driven: The application is be polling for data, but listening for events to interact with it.</p>
+<p>The EFL is event-driven. This means that the application polls for data, and listens for events to interact with it.</p>
-<p>Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptor handling.</p>
-
-<p>When there is no ongoing event, it automatically enters an "idle" mode, leading to less power being consumed. It wakes up when needed.</p>
+<p>The Ecore library provides the main loop abstraction. It gets data when data is available and sends the events so that costly polling threads are not needed. Ecore manages polling, timers, events, and file descriptors. When there is no ongoing event, the main loop automatically enters an idle mode, minimizing the power consumption. The loop wakes up when needed.</p>
<h2 id="Timers" name="Timers">Timers</h2>
-<p>Ecore provides timers for applications. Timers schedule events that are executed later at a specific time, be it once or even several times with an interval.</p>
-<p>A timer callback prototype looks like <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_timed_cb(void *data)</span>. This function receives data from the application, and returns a Boolean value to specify whether it is called again or if it is done. The following macros are also provided:</p>
+<p>Ecore provides timers, which schedule events that are executed later at a specific time. The event can occur once or several times at specific intervals.</p>
+
+<p>A timer callback prototype looks like the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> callback function. This function receives data from the application, and returns a Boolean value to specify whether it is called again or completed. The following macros are also provided:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: function is called again after the timeout.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: function is not called again, Ecore destroys automatically everything associated with the timer.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>: the function is called again after the timeout.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span>: the function is not called again, Ecore destroys automatically everything associated with the timer.</li>
</ul>
-<p>Adding a timer is done with <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add(interval, function, data)</span>. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.</p>
-
-<p>To create a simple timer: </p>
+<p>To create and destroy a timer:</p>
+<ul>
+<li>To create a timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> function. The interval, specified in seconds, indicates when the given function is called, and receives the specified data as a parameter. It returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Timer</span> object.
+<p>In the following example, the <span style="font-family: Courier New,Courier,monospace;">my_timed_cb()</span> function is run after 2 seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable value is under 5, and stops after that.</p>
<pre class="prettyprint">
Eina_Bool my_timed_cb(void *data)
{
}
ecore_timer_add(2.0, my_timed_cb, my_data);
</pre>
+</li>
-<p>In this example, the function <span style="font-family: Courier New,Courier,monospace;">my_timed_cb</span> is run with after two seconds and it receives <span style="font-family: Courier New,Courier,monospace;">my_data</span>. It is renewed while its count variable's value is under 5, and stops after that.</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del(timer)</span> to delete the timer. To delete the timer, it must still be running, that is, it has not returned a false value meaning that it cannot be called any more.</p>
-
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set(timer, interval)</span> to change the timer's interval, the interval being specified in seconds. If set during a timer call, this affects the next interval. Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get(timer)</span> to get a timer's current interval.</p>
+<li>To delete the timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_del()</span> function. The timer to delete must still be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the timer is not running, the function cannot be called.</li>
+</ul>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get(timer)</span> to get a timer's pending time.</p>
+<p>To manage a timer:</p>
+<ul>
+<li>To change the timer's interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_set()</span> function. The interval is specified in seconds. If set during a timer call, this affects the next interval. Use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_interval_get()</span> function to get the timer's current interval.</li>
-<p>Delay the timer's next occurrence using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay(timer, time)</span>, which adds the specified time to the current interval. It does not change the future occurrences' interval. You can also reset the current interval to its full value by using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset(timer)</span>.</p>
+<li>To get the timer's pending time, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_pending_get()</span> function.</li>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze(timer)</span> to pause the currently running timer. The remaining time is saved and used again when the timer is resumed with <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw(timer)</span>.</p>
+<li>To delay the timer's next occurrence, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_delay()</span> function. The function adds the specified time to the current interval. It does not change the future occurrences' interval. You can also reset the current interval to its full value by using the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_reset()</span> function.</li>
-<p>The timer infrastructure has a defined precision. Query its current value by using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span>. A higher delay means that more timers can be run together. It diminishes the need to use system wake ups and thus lowers the power consumption.</p>
+<li>To pause the currently running timer, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_freeze()</span> function. The remaining time is saved and used again when the timer is resumed with the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_thaw()</span> function.</li>
-<p>Set the precision using <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set(precision)</span>. This sets it for all timers. For example, there are two timers, one that expires in a 2.0s and another that expires in 2.1s. The precision is set to 0.1s, then Ecore requests for the next expiration to happen in 2.1s and run both callbacks at once, instead of one at 2.0s and another one 0.1s later. However, if there were not one in 2.1s, the timeout would have been at the minimum interval, 2s.</p>
+<li>To query the current value of the defined timer infrastructure precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_get()</span> function. A higher delay means that more timers can be run together. It diminishes the need to use system wake-ups and thus lowers the power consumption.
+<p>To set the precision, use the <span style="font-family: Courier New,Courier,monospace;">ecore_timer_precision_set()</span> function. This sets the precision for all timers. For example, there are 2 timers, one that expires in 2.0 seconds and another that expires in 2.1 seconds. If the precision is set to 0.1 seconds, Ecore requests the next expiration to happen in 2.1 seconds and runs both callbacks at once, instead of one at 2.0 seconds and the other one 0.1 seconds later. However, if there is no timer expiring in 2.1 seconds, the timeout is at the minimum interval, 2 seconds.</p></li>
+</ul>
<h2 id="Animators" name="Animators">Animators</h2>
-<p>Animators are a specific type of timers, specially designed for on-screen animation purposes:</p>
+<p>Animators are a specific type of timer, specially designed for on-screen animation purposes:</p>
<ul>
<li>The time interval is usually known when they are created.</li>
-<li>They are called at each screen refresh, however that interval can vary: it may be dependant upon the system load, the target power consumption, and other factors; the exact interval is not really relevant.</li>
+<li>They are called at each screen refresh and their interval can vary. The interval can depend on the system load, the target power consumption, and other factors. The exact interval is not relevant.</li>
</ul>
-<p>Due to that, Ecore provides the Ecore animator subsystem.</p>
+<p>To implement animators, Ecore provides the Ecore animator subsystem.</p>
<h3>Forever-running Animator</h3>
-<p>To create an animation which runs for an indefinite time, the prototype is exactly the same as when using Ecore timers: </p>
+<p>To create an animation that runs for an indefinite time: </p>
<pre class="prettyprint">
Eina_Bool my_anim_cb(void *data)
ecore_animator_add(my_anim_cb, my_data);
</pre>
-<p>This example looks the same as the one using an Ecore timer, save for the use of <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add</span> instead of <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add</span>. <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add</span> takes the function to call back and data to pass it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. However, this time, the function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
+<p>This example looks the same as the one using an Ecore timer. The <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function takes the callback function and data to pass to it, and returns an <span style="font-family: Courier New,Courier,monospace;">Ecore_Animator</span> object. The function is called at a system-defined interval until it returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> instead of <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span>.</p>
<h3>Specific-duration Animator</h3>
-<p>An animator callback has a different prototype <span style="font-family: Courier New,Courier,monospace;">Eina_Bool my_anim_cb(void *data, double position)</span>.</p>
+<p>An animator callback for an animator running a specific time has a different prototype than the forever running animator.</p>
-<p>This function receives data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
-
-<p>The animator itself is created using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add(runtime, function, data)</span>. <span style="font-family: Courier New,Courier,monospace;">runtime</span> specifies the animator duration, <span style="font-family: Courier New,Courier,monospace;">function</span> is the one to call, and <span style="font-family: Courier New,Courier,monospace;">data</span> is the data to pass to the function and is optional. </p>
+<p>This callback function receives both data and a position which represents the current time among the full timeline, 0 meaning the beginning of the animation, and 1 meaning the end of the animation, returning <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> to abort, or <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_RENEW</span> to continue.</p>
+<p>To create and destroy the animator:</p>
+<ul>
+<li>To create the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span> function. The first parameter specifies the animator duration, the second parameter is the callback function, and the third parameter is the data to pass to the callback. The data parameter is optional.
<pre class="prettyprint">
Eina_Bool my_anim_cb(void *data, double position)
{
ecore_animator_timeline_add(5., my_anim_cb, my_data);
</pre>
-<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passed half of the duration, so 2.5s.</p>
+<p>In this example, the animator is specified to run for five seconds. The function returns <span style="font-family: Courier New,Courier,monospace;">ECORE_CALLBACK_CANCEL</span> as soon as the position among the timeline passes half of the duration, 2.5 seconds.</p>
<p>Ecore can generate a virtual position from the original one using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_pos_map(position, map, v1, v2)</span>. Several maps are available:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at end</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), 3.0 is cubed, etc</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), 3.0 is cubed, etc</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), 3.0 is cubed, etc</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated via power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve</li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span></li>
-<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_LINEAR</span>: linear from 0.0 to 1.0.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE</span>: start slow, then speed up.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE</span>: start fast, then slow down.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL</span>: start slow, speed up, then slow down at the end.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_ACCELERATE_FACTOR</span>: start slow, then speed up, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard acceleration, 2.0 is a much more pronounced acceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DECELERATE_FACTOR</span>: start fast, then slow down, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is standard deceleration, 2.0 is a much more pronounced deceleration (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SINUSOIDAL_FACTOR</span>: start slow, speed up, then slow down at the end, <span style="font-family: Courier New,Courier,monospace;">v1</span> being a power factor: 0.0 is linear, 1.0 is a standard sinusoidal, 2.0 is a much more pronounced sinusoidal (squared), and 3.0 is cubed.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_DIVISOR_INTERP</span>: start at gradient <span style="font-family: Courier New,Courier,monospace;">* v1</span>, interpolated with the power of <span style="font-family: Courier New,Courier,monospace;">v2</span> curve.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_BOUNCE</span>: start at 0.0, then drop like a ball bouncing to the ground at 1.0, and bounce <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">ECORE_POS_MAP_SPRING</span>: start at 0.0, then wobble like a spring to the rest position 1.0, and wobble <span style="font-family: Courier New,Courier,monospace;">v2</span> times, with a decay factor of <span style="font-family: Courier New,Courier,monospace;">v1</span>.</li>
</ul>
<p class="figure">Figure: Position maps</p>
<p align="center"><img alt="Position maps" src="../../images/pos_map_all.png" /></p>
+</li>
-<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>Use <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze(animator)</span> to pause a currently running animator. Note that time continues ticking even if an animator is frozen, and that resuming the animation using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw(animator)</span> not actually resumes if the full runtime meanwhile has been passed.</p>
+<li>To destroy the animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_del()</span> function. The animator to destroy must be running, that is, it has not returned a <span style="font-family: Courier New,Courier,monospace;">false</span> value. If the animator is not running, the function cannot be called.</li>
+</ul>
-<p>Query Ecore for the interval between two animator calls by using <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span>. Use <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> to change it. Note that too small a value causes performance and power consumption issues, and too high value makes the animation jerky.</p>
+<p>To manage the animator:</p>
+<ul>
+<li>To pause the currently running animator, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_freeze()</span> function. Note that time continues ticking even if the animator is frozen, and that resuming the animation using the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_thaw()</span> function does not actually resume, if the full runtime has been passed in the meanwhile.</li>
-<h2 id="Descriptors_Handling" name="Descriptors_Handling">Handling File Descriptors</h2>
+<li>To query Ecore for the interval between 2 animator calls, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_get()</span> function.</li>
-<p>Ecore provides infrastructure to handle file descriptors monitoring, so that files do not have to be blocked or polled to read or write on them. Instead monitor sockets, pipes or other streams are used to get a file descriptor.</p>
+<li>To change the interval, use the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set(interval)</span> function. Note that too small a value causes performance and power consumption issues, and too high a value makes the animation jerky.</li>
+</ul>
-<p>Set callback using the following prototype: <span style="font-family: Courier New,Courier,monospace;">Eina_Bool _my_cb_func(void *data, Ecore_Fd_Handler *handler)</span>. Its first parameter is data passed to it (optional), the second one is the Ecore file descriptor handler. Its return value is, as most Ecore callbacks, <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>. It tells Ecore whether it wants to be called again or is its treatment finished.</p>
+<h2 id="Descriptors_Handling" name="Descriptors_Handling">File Descriptors</h2>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add(fd, flags, function, data, buffer_function, buffer_data)</span> to listen the events. Its parameters are defined as follows:</p>
+<p>Ecore provides an infrastructure to monitor file descriptors, so that files do not have to be blocked or polled to read or write on them. Instead, monitor sockets, pipes, or other streams are used to get a file descriptor.</p>
+<p>To manage the file descriptors:</p>
<ul>
-<li><span style="font-family: Courier New,Courier,monospace;">fd</span>: this is the file descriptor to monitor.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">flags</span>: this indicates what Ecore file descriptor monitors: <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> is for reading, <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_WRITE</span> is for writing, <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span> is for errors: define multiple values like <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ | ECORE_FD_ERROR</span> to monitor for both reading and errors.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">function</span>: the function to be called back.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">dat</span>a: some data passed to the function.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">buffer_function</span>: the function to call to check whether any data has been buffered and already read from the <span style="font-family: Courier New,Courier,monospace;">fd</span>: this is for internal use only and must not be used (give NULL): its description is beyond the current guide's scope.</li>
-<li><span style="font-family: Courier New,Courier,monospace;">buffer_data</span>: data to pass to <span style="font-family: Courier New,Courier,monospace;">buffer_function</span>.</li>
-</ul>
+<li>To set a callback, use the <span style="font-family: Courier New,Courier,monospace;">_my_cb_func()</span> function. Its first parameter is the data passed to it (optional), and the second one is the Ecore file descriptor handler. Its return value is, as in most Ecore callbacks, <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>. It tells Ecore whether it wants to be called again or whether its treatment is finished.</li>
+
+<li>To listen to events, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_add()</span> function.</li>
-<p>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:</p>
+<li>To wait for incoming data (that is, to read data) on the <span style="font-family: Courier New,Courier,monospace;">my_fd</span> file descriptor, passing <span style="font-family: Courier New,Courier,monospace;">my_data</span>:
<pre class="prettyprint">
Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
}
ecore_main_fd_handler_add(my_fd, ECORE_FD_READ, my_fd_cb, my_data, NULL, NULL);
</pre>
+</li>
-<p>To delete a file descriptor handler, use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del(handler)</span>. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</p>
+<li>To delete a file descriptor handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_del()</span> function. This does not close the file descriptor. Always delete the handlers before closing the actual file descriptors.</li>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get(handler)</span> to get a handler's file descriptor.</p>
+<li>To get the handler's file descriptor, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_fd_get()</span> function.</li>
-<p>Use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get(handler, flag)</span> to select whether a flag is active on a handler. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:</p>
+<li>To select whether a flag is active on a handler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_get()</span> function. For example, the handler is set to monitor both <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_READ</span> and <span style="font-family: Courier New,Courier,monospace;">ECORE_FD_ERROR</span>. The following example finds out whether the function was called because of an error:
<pre class="prettyprint">
Eina_Bool my_fd_cb(void *data, Ecore_Fd_Handler *handler)
}
ecore_main_fd_handler_add(my_fd, ECORE_FD_READ | ECORE_FD_ERROR, my_fd_cb, my_data, NULL, NULL);
</pre>
+</li>
-<p>To change the flags the handler is monitoring, use <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set(handler, flags)</span>.</p>
+<li>To change the flags the handler is monitoring, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_fd_handler_active_set()</span> function.</li>
+</ul>
<h2 id="Threads" name="Threads">Threads</h2>
-<p>EFL is not entirely thread-safe. This means that if some task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. This can only be done from the main thread, the one running the main loop.</p>
+<p>EFL is not entirely thread-safe. This means that if a task is running in another thread and, for example, an Evas object shows the status progress of this task, the object cannot be updated from within the thread. Updating can only be done from the main thread that runs the main loop.</p>
-<p>Ecore provides a facility to have tasks be done on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. It makes it a lot easier to dispatch a worker function to perform some heavy tasks and then get the result once it completes, without blocking the application's UI. In addition, cancelling and rescheduling are easy to use and the several threads can be launched, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
+<p>Ecore provides a facility to perform tasks on separate worker threads. It is not a simple wrapper around standard threads provided by the operating system. With Ecore threads, it is easier to dispatch a worker function to perform some heavy tasks and get the result once it completes. It does not block the application UI. It is also easy to cancel and reschedule threads. Several threads can be launched simultaneously, since Ecore schedules them according to the number of processors the system has and the maximum amount of concurrent threads set for the application.</p>
-<p>Two kinds of Ecore threads exist: short jobs and feedback jobs. Short jobs are not giving any kind of information on their status to the parent, whereas feedback jobs are. The short jobs are best used for short computing-intensive snippets of code, whereas a typical example for the feedback jobs is an ongoing file download.</p>
+<p>Ecore has 2 kinds of threads:</p>
+<ul>
+<li>Short jobs do not give any kind of information on their status to the parent. They are best used for short computing-intensive snippets of code.</li>
+<li>Feedback jobs give information on their status to the parent. They are best used for longer snippets requiring a feedback loop, such as an ongoing file download.</li>
+</ul>
-<p>Ecore basically creates a pool of worker threads: the exact count is computed from the number of CPUs, cores, or may be specified by the application itself.</p>
+<p>Ecore creates a pool of worker threads. The exact count is computed from the number of CPUs or cores, or it can be specified by the application itself.</p>
-<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left.</p>
+<p>When a worker thread is idle, it picks a job to execute from the waiting list until there is none left. In the following example, there are 2 threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job()</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job()</span>. Both threads take 2 parameters: some data passed to them, and the actual thread running. Call a callback when the jobs end, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel()</span>) or end normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end()</span>).</p>
<pre class="prettyprint">
struct feedback_msg
}
ecore_thread_run(my_short_job, my_job_end, my_job_cancel, my_data);
-ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end, my_job_cancel, my_data, EINA_FALSE);
+ecore_thread_feedback_run(my_feedback_job, my_feedback_job_notify, my_job_end,
+ my_job_cancel, my_data, EINA_FALSE);
</pre>
-<p>In this example, there are two threads defined by <span style="font-family: Courier New,Courier,monospace;">my_short_job</span> and <span style="font-family: Courier New,Courier,monospace;">my_feedback_job</span>. Both threads take two parameters: some data passed to them, and the actual thread running. Call a callback when the jobs are ended, whether they are cancelled (<span style="font-family: Courier New,Courier,monospace;">my_job_cancel</span>), or ended normally (<span style="font-family: Courier New,Courier,monospace;">my_job_end</span>).</p>
+<p>To manage threads:</p>
-<p>Cancelling a thread is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel(thread)</span>. However, note that this is done cooperatively: the thread continues to run until it exists. Call <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check(thread)</span> regularly to check whether the thread as been marked for cancellation and exit if true.</p>
+<ul>
+<li>To cancel a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> function. However, note that this is done cooperatively: the thread continues to run until it exists. Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function regularly to check whether the thread has been marked for cancellation and exit if <span style="font-family: Courier New,Courier,monospace;">true</span>.</li>
-<p>Run threads that are not accounted for in the worker threads pool. For that, the last parameter of <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run</span> must be set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.</p>
+<li>To run threads that are not accounted for in the worker thread pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function with the last parameter set to <span style="font-family: Courier New,Courier,monospace;">EINA_TRUE</span>.
-<p>The feedback message a thread sends as notification can basically be any kind of data. Here it is a simple integer, but it can be as complex as needed.</p>
+<p>The feedback message a thread sends as notification can be any kind of data. In the above example, it is a simple integer, but it can be as complex as needed.</p>
+</li>
-<p>A thread can ask to be executed later by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule(thread)</span>: it is added to the end of the pending tasks.</p>
+<li>To execute a thread later, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_reschedule()</span> function. This function is added to the end of the pending tasks.</li>
-<p>Get the maximum number of concurrent threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span>. If needed, set it by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set(count)</span>, or reset the default value using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span>.</p>
+<li>To get the maximum number of concurrent threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function. If needed, set it by using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function, or reset the default value using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.</li>
-<p>Query the number of active threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>, and the number of available worker threads by using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span>, which is basically the same as <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</p>
+<li>To query the number of active threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span> function. To query the number of available worker threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function, which is basically the same as the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> - <span style="font-family: Courier New,Courier,monospace;">ecore_thread_active_get()</span>.</li>
+</ul>
<h2 id="Idlers" name="Idlers">Idlers</h2>
-<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>When the rendering is done and all work is finished, the main loop enters its idle state until the next loop. You can get the 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 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>
+<p>The idle enterers, exiters, and idlers all have the same prototype, <span style="font-family: Courier New,Courier,monospace;">my_idler()</span>, which receives data and returns <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 is finished.</p>
-<p>Adding an idler is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add(callback, data)</span>, and deleting one is done by using <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del(idler)</span>.</p>
+<p>To manage the idlers:</p>
+<ul>
+<li>To add an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_add()</span> function.</li>
+<li>To delete an idler, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idler_del()</span> function.</li>
-<p>For idle exiters, use <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add(callback, data)</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del(exiter)</span>.</p>
+<li>To add and delete idle exiters, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_exiter_del()</span> functions.</li>
-<p>For idle exiters, use <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add(callback, data)</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del(enterer)</span>. However, also <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add(callback, data)</span> is available if you want your function to be added at the top of the list so that it is called before the others.</p>
+<li>To add and delete idle enterers, use the <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_add()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_del()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">ecore_idle_enterer_before_add()</span> function is also available, if you want your function to be added at the top of the list so that it is called before the others.</li>
+</ul>
<pre class="prettyprint">
Eina_Bool my_idle_enterer_cb(void *data)
<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__Edje.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__Edje.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>
<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__Edje.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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__Edje.html">Edje API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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>
<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__Edje.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__Edje.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 id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#When_to_use">When to Use Threads</a></li>
<li><a href="#Thread_safety">Thread Safety</a></li>
- <li><a href="#Costs">Costs of Threads and Use of Thread Pools</a></li>
- <li><a href="#Functions">Ecore Functions</a></li>
- <li><a href="#max_threads">Maximum Number of Threads in the Pool</a></li>
+ <li><a href="#Costs">Thread Pools</a></li>
+ <li><a href="#Functions">Thread Management with Ecore</a></li>
<li><a href="#low_level">Low-level Functions</a></li>
- <li><a href="#Examples">Examples</a></li>
+ <li><a href="#Examples">Thread Use Examples</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__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__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Eina.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 id="container"><div id="contents"><div class="content">
<h1>Thread Usage</h1>
- <p>Threads are light processes: concurrent execution environments that are lighter than full-blown processes because they share some operating system resources.</p>
-<p>They make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
+<p>Threads are concurrent execution environments that are lighter than full-blown processes because they share some operating system resources. Threads make it possible to do several things at the same time while using less resources and offering simpler synchronization and data exchange compared to processes.</p>
-<p>Moving a blocking operation to a separate thread makes it possible to not block the event loop and keep the user interface reactive. Remember that blocking the event loop and using long-running callbacks means the application is be able to update its graphical user interface.</p>
+<p>If you move a blocking operation to a separate thread, it cannot block the event loop and keeps the user interface reactive. Blocking the event loop and using long-running callbacks means the application cannot update its graphical user interface.</p>
-<h2 id="When_to_use" name="When_to_use">When to Use Threads</h2>
+<p>While threads can be useful, they are not always the best choice:</p>
-<p>While threads are useful, the first rule to using them is to avoid them as much as possible: there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> which integrates with the event loop to provide an API based on callbacks.</p>
+<ul><li>The first rule to using threads is to avoid them as much as possible, as there are often better tools and approaches. For example, to do network transfers, use <span style="font-family: Courier New,Courier,monospace;">Ecore_Con</span> that integrates with the event loop to use a function based on callbacks. Being able to use such a function means that specific support work has been done in libraries. In some cases, using a function and libraries is impossible, and in those situations threads are required.</li>
+<li>Use threads in CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</li>
+<li>Use threads to take advantage of multiple available CPU cores, if the workload can be split into several units of work and spread across the cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on 1 thread. For such tasks, the thread pool helps with the creation and scheduling of the threads, handling all the grunt work.</li></ul>
-<p>Being able to use such an API however means that specific support work has been done in libraries. However, in some cases, it is completely impossible: in those situations, threads are required.</p>
+<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
-<p>The most common use-cases are therefore CPU-intensive tasks and disk IOs. For example, a thread is the appropriate way to apply filters to an image or to a video without blocking the interface.</p>
+<p>If several strings have to work on the same resources, conflicts can happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are outdated. Similar issues can happen if both threads are modifying data concurrently.</p>
-<p>Threads also enable you to take advantage of the numerous CPU cores available if the workload is split into several units of work and spread across cores. A typical example for an image processing application on a quad-core CPU is to process 4 images at once, each on a thread. For such tasks, the thread pool which is presented below helps a lot with the creation and scheduling of threads (all of the grunt work is handled by the thread pool).</p>
+<p>These kinds of conflicts are called race-conditions: depending on which thread is faster, the output changes and can be incorrect. Avoiding such issues is called thread safety. Thread safety involves critical sections, which are blocks of code that operate on shared resources and must not be accessed concurrently by another thread.</p>
-<h2 id="Thread_safety" name="Thread_safety">Thread Safety</h2>
+<p>The usual solution for ensuring exclusive access to shared resources is mutual exclusion: only 1 thread can operate on the data at any given time. Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, the thread waits until it can lock something called a mutex (stands for mutual exclusion), then operates on the resource, and unlocks the mutex. Operating systems guarantee that only 1 thread can lock a mutex at a given time: this ensures that only 1 thread operates on the shared resource at one time.</p>
+
+<p>For more information on thread safety, see <a href="#low_level">Low-level Functions</a>.</p>
-<p>If several strings have to work on the same resources, conflicts may happen as the threads are run in parallel. For example, if thread A modifies several values while thread B is reading them, it is likely that some of the values read by B are the old ones while others are the new ones. Similar issues can happen if both are modifying data concurrently.</p>
+<h2 id="Costs" name="Costs">Thread Pools</h2>
-<p>Such conflicts are called race-conditions: depending on which thread is faster, the output changes and may be incorrect.</p>
+<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning a thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progressed slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
-<p>Avoiding such issues when threads are involved is called thread-safety. Critical sections are blocks of code that operate on shared resources that must not be accessed concurrently by another thread. The usual solution is mutual-exclusion: only one thread can operate on the data at any given time.</p>
+<p>Thread pools solve this problem. In thread pools, upto a maximum number of threads are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost of creating and destroying them.</p>
-<p>Mutual exclusion is often implemented through locks. Before attempting to operate on a shared resource, threads wait until they can lock something called a mutex (stands for mutual exclusion), operate on the resource and unlock the mutex. Operating systems guarantee that only one thread can lock a mutex at a given time: this ensures that only one thread operates on the shared resource at once.</p>
+<p>In EFL, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter, which defines the maximum number of threads running at the same time. Another control feature is the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback that runs from the main loop thread after a task has completed and is typically used to extract the data from the finished task and make it available to the main loop.</p>
-<p>Thread-safety is a large topic and you should read the <a href="#low_level">low-level functions</a> section if you do not know it or need a refresher. It has links to several online and offline resources on the topic.</p>
+<p>To manage the maximum number of threads:</p>
-<h2 id="Costs" name="Costs">Costs of Threads and Use of Thread Pools</h2>
+<ul>
+<li>To retrieve the current value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span> function.
+</li>
+
+<li>To set the value, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> function. The value has a maximum of 16 times the CPU count.
+</li>
-<p>Threads are operating system resources: while much lighter than processes, they still have a cost. Moreover, spawning thousand threads means that each of them only gets 1/1000th of the total CPU time: each thread is progress slowly and, in the worst case, the system wastes all of its time switching between threads without doing any actual work.</p>
+<li>To reset the maximum number of threads, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_reset()</span> function.
-<p>A common solution is to use thread pools: threads, up to a maximum number, are created on-demand and used to execute tasks. When the tasks are finished, they are kept alive but sleeping. This avoids the cost to create and destroy them.</p>
+</li>
-<p>In the EFLs, the thread pool is controlled by a <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter: the maximum number of threads running at the same time. Another aspect is the <span style="font-family: Courier New,Courier,monospace;">func_end</span> callback which runs from the mainloop thread after a task has completed and is typically used to extract the data from the just-finished task and make it available to the mainloop.</p>
+<li>To get the number of available threads in the pool, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span> function. The function returns the current maximum number of threads minus the number of running threads. The number can be a negative value, if the maximum number of threads has been lowered.
+</li>
+</ul>
-<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>The following figures illustrate the thread pool. The first figure shows the occupancy of a hypothetical thread pool. There are several tasks, of which 4 are running. The <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter of the pool is 4, and the other tasks are waiting. There is no thread with its <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback currently called.</p>
<p class="figure">Figure: Thread pool, step 1</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>When a task, applying the sepia filter on image1, finishes, the corresponding <span style="font-family: Courier New,Courier,monospace;">func_end()</span> function is invoked from the main loop.</p>
<p class="figure">Figure: Thread pool, step 2</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>With the task done, one of the threads from the pool becomes available, and another thread, adding the reverberation effect on audio3, can run in it.</p>
<p class="figure">Figure: Thread pool, step 3</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>
-
-<h2 id="Functions" name="Functions">Ecore Functions</h2>
-
-<p>Ecore offers a simplified API for common tasks involving threads in EFL applications. This applies to the typical scenario where the main thread creates another thread which then sends data back to the main one or calls GUI-related functions (which are not thread-safe).</p>
-
-<h3>Creating Threads with Ecore</h3>
-
-<p>Threads created through Ecore are integrated with the thread-pool by default and offer simple callback-based ways to interact with the main-loop. New threads are created as needed to run these functions until the maximum capacity of the thread pool is reached.</p>
-
-<h4>Only Returning a Final Value to the Main Thread</h4>
-
-<p>The basic API to create and run a thread is <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run</span>; it runs a function inside a thread from the thread pool and takes care of all the low-level work. Its prototype is as follows: </p>
-
-<pre class="prettyprint">
-Ecore_Thread* ecore_thread_run(Ecore_Thread_Cb func_blocking,
- Ecore_Thread_Cb func_end,
- Ecore_Thread_Cb func_cancel,
- const void * data)
-</pre>
-
-<p>The parameters are:</p>
-
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">func_blocking</span>: the function that runs in the other thread</li>
- <li><span style="font-family: Courier New,Courier,monospace;">func_end</span>: the function that calls from the main-loop when <span style="font-family: Courier New,Courier,monospace;">func_blocking</span> finishes (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
- <li><span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: the function that calls from the main loop when the thread is cancelled or fails to start (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
- <li><span style="font-family: Courier New,Courier,monospace;">data</span>: the pointer for additional data that is given as argument to the <span style="font-family: Courier New,Courier,monospace;">func_blocking</span>, <span style="font-family: Courier New,Courier,monospace;">func_end</span>, and <span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: the callbacks (optional, may be <span style="font-family: Courier New,Courier,monospace;">NULL</span>)</li>
-</ul>
-
-<p>It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
-
-<p>The type for the <span style="font-family: Courier New,Courier,monospace;">func_blocking</span>, <span style="font-family: Courier New,Courier,monospace;">func_end</span> and <span style="font-family: Courier New,Courier,monospace;">func_cancel</span> callbacks is <span style="font-family: Courier New,Courier,monospace;">Ecore_Thread_Cb</span>: </p>
-
-<pre class="prettyprint">
-void (* Ecore_Thread_Cb)(void *data, Ecore_Thread *thread)
-</pre>
+<p>As long as there are tasks to be done, the thread pool continues the same way, running tasks in its threads whenever a thread is available.</p>
-<p>Therefore, the declaration of a matching function is: </p>
-<pre class="prettyprint">
-void f(void *data, Ecore_Thread *thread)
-</pre>
+<h2 id="Functions" name="Functions">Thread Management with Ecore</h2>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as the data which was given as parameter to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: a handle to the thread in which the function is running</li>
-</ul>
-<p>The most common way to return data from one thread to the main one is to put a pointer to it in data. When the thread is aborted or finishes, one of <span style="font-family: Courier New,Courier,monospace;">func_cancel</span> or <span style="font-family: Courier New,Courier,monospace;">func_end</span> are called from the main-loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
+<p>Ecore offers a simplified API for managing threads in EFL applications. The Ecore API applies to a typical scenario where the main thread creates another thread, which in turn sends data back to the main thread or calls GUI-related functions. GUI-related functions are not thread-safe.</p>
-<p>This approach to returning data to the main thread is limited to the case where the data is shared between the main-loop thread and only another one. This does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end</span> callback to merge the results into a single data structure. For example, it is perfectly reasonable to add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span> since all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p>
+<h3>Creating Threads with Ecore</h3>
-<h4>Returning Values to the Main Thread</h4>
+<p>The threads created with Ecore are by default integrated with the thread pool and offer simple callback-based ways to interact with the main loop. New threads are created as needed until the maximum capacity of the thread pool is reached.</p>
-<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run</span> function has more parameters in order to send intermediate feedback from the thread to the main-loop. Its prototype is shown below: </p>
+<ul><li>To return values to the main thread:
+<p>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to send intermediate feedback from the thread to the main loop.</p></li>
-<pre class="prettyprint">
-Ecore_Thread* ecore_thread_feedback_run(Ecore_Thread_Cb func_blocking,
- Ecore_Thread_Notify_Cb func_notify,
- Ecore_Thread_Cb func_end,
- Ecore_Thread_Cb func_cancel,
- const void * data,
- Eina_Bool try_no_queue)
-</pre>
+<li>To return only the final value to the main thread:
+<p>To create and run a thread, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function. It runs a function inside a thread from the thread pool and takes care of all the low-level work. It returns the corresponding thread handler or <span style="font-family: Courier New,Courier,monospace;">NULL</span> on failure.</p>
-<p>The parameters are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">func_blocking</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">func_end</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">func_cancel</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">func_notify</span>: a callback to run from the main-loop whenever <span style="font-family: Courier New,Courier,monospace;">func_blocking</span> calls in <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> is called</li>
- <li><span style="font-family: Courier New,Courier,monospace;">try_no_queue</span>: a Boolean: if true, Ecore attempts to spawn a new thread regardless of the thread pool status, and only attempts to use the thread pool if this fails</li>
-</ul>
+<p>The most common way to return data from one thread to the main thread is to put a pointer to it in the data. When the thread is aborted or finishes, either <span style="font-family: Courier New,Courier,monospace;">func_cancel()</span> or <span style="font-family: Courier New,Courier,monospace;">func_end()</span> is called from the main loop. The functions are running in the simpler context of a single thread running at once and therefore avoid race-conditions.</p>
-<p>The type for the <span style="font-family: Courier New,Courier,monospace;">func_notify</span> callback is given below: </p>
+<p>The data pointer approach can only be used when the data is shared between the one thread and the main thread only. However, this does not prevent you from using the <span style="font-family: Courier New,Courier,monospace;">func_end()</span> callback to merge the results into a single data structure. For example, you can add all the values computed by the threads to an <span style="font-family: Courier New,Courier,monospace;">Eina_List</span>, as all the operations on the list happen from a single thread and therefore one after the other and not concurrently.</p></li></ul>
-<pre class="prettyprint">
-void (* Ecore_Thread_Notify_Cb) (void *data, Ecore_Thread *thread, void *msg_data)
-</pre>
-<p>Therefore, the declaration of a matching function is: </p>
+<h3>Running Callbacks from the Main Loop</h3>
-<pre class="prettyprint">
-void notify_callback (void *data, Ecore_Thread *thread, void *msg_data)
-</pre>
+<p>If you are performing operations in another thread and want to update a progress bar, the update operation must be done from the main thread. The simplest way is to use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function, which takes a function and some data as parameters and instructs the main loop to execute the given function with the given data.</p>
+<p>Depending on the kind of thread the function is called from, the process differs:</p>
<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">data</span>: same as the data which was given as parameter to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span></li>
- <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: a handle to the thread in which the function is running</li>
- <li><span style="font-family: Courier New,Courier,monospace;">msg_data</span>: the pointer given to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span></li>
-</ul>
-
-<p>The prototype of the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function is shown below: </p>
-
-<pre class="prettyprint">
-Eina_Bool ecore_thread_feedback(Ecore_Thread *thread,
- const void *msg_data)
-</pre>
-
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">thread</span>: the thread handle for the current thread; it is given to the various callbacks mentioned above</li>
- <li><span style="font-family: Courier New,Courier,monospace;">msg_data</span>: a pointer to the data to send to the <span style="font-family: Courier New,Courier,monospace;">func_notify</span> callback that runs from the main-loop</li>
-</ul>
+<li>If the function is called from a thread that is not the main one, the function sends a message to the main loop and returns quickly. The message is processed in order, similarly to others.</li>
-<h3>Running Callbacks from the Mainloop</h3>
-
-<p>If you are doing operations in an another thread and want to update a progress bar, the operation must be done from the main thread. The simplest way to do so is to use <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span>. It takes a function and some data as parameter and instructs the main-loop to execute the given function with the given data. </p>
-
-<pre class="prettyprint">
-void ecore_main_loop_thread_safe_call_async(Ecore_Cb callback, void *data)
-</pre>
-
-<p>This function takes two arguments and returns nothing. The arguments are:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace;">callback</span>: function to execute from the main-loop</li>
- <li><span style="font-family: Courier New,Courier,monospace;">data</span>: data to pass to the callback when calling it</li>
+<li>If the function is called from the main thread, the function is called immediately as if it were a direct call.</li>
</ul>
-<p>The declaration of <span style="font-family: Courier New,Courier,monospace;">Ecore_Cb</span> is given below:</p>
-
-<pre class="prettyprint">
-typedef void(* Ecore_Cb)(void *data)
-</pre>
-
-<p>Therefore the prototype for such a function is: </p>
-
-<pre class="prettyprint">
-void _some_function(void *data);
-</pre>
-
-<p>If it is called from a thread that is not the main one, it sends a message to the main-loop and returns quickly. The message is processed similarly to others, i.e. in order.</p>
-
-<p>If it is called from the main thread, the function is called immediately as if it were a direct call.</p>
-
-<p>If you wish to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function which is similar but synchronous: </p>
-
-<pre class="prettyprint">
-void * ecore_main_loop_thread_safe_call_sync(Ecore_Data_Cb callback, void *data)
-</pre>
-
-<p>Also, since it is synchronous, it is able to return the value returned by the callback. This can be seen in the type of the callback which returns a void *: </p>
-
-<pre class="prettyprint">
-typedef void * (* Ecore_Cb)(void *data)
-</pre>
-
-<h2 id="max_threads" name="max_threads">Maximum Number of Threads in the Pool</h2>
-
-<p>The maximum number of threads in Ecore's pool is governed by the <span style="font-family: Courier New,Courier,monospace;">thread_max</span> parameter.</p>
-
-<p>Retrieve the current value with <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_get()</span>:</p>
-
-<pre class="prettyprint">
-int ecore_thread_max_get(void)
-</pre>
-
-<p>Set the value with <span style="font-family: Courier New,Courier,monospace;">ecore_thread_max_set()</span> (up to a maximum of 16 × CPU count):</p>
-
-<pre class="prettyprint">
-void ecore_thread_max_set(int maximum)
-</pre>
-
-<p>If needed, reset the maximum number of threads: </p>
-
-<pre class="prettyprint">
-int ecore_thread_max_reset(void)
-</pre>
-
-<p>A function related to these is <span style="font-family: Courier New,Courier,monospace;">ecore_thread_available_get()</span>: it returns the number of running threads less the current maximum number of threads and may be negative if the maximum number of threads has been lowered. </p>
-
-<pre class="prettyprint">
-int ecore_thread_available_get(void)
-</pre>
+<p>If you want to wait until the callback is called and returns, use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function, which is similar but synchronous. Since it is synchronous, it can also return the value returned by the callback.</p>
<h2 id="low_level" name="low_level">Low-level Functions</h2>
-<p>Eina offers low-level APIs that are portable across operating system: locks, conditions, semaphores, barriers, spinlocks, etc. The API follows closely pthreads.</p>
+<p>Eina offers low-level functions that are portable across the operating system, such as locks, conditions, semaphores, barriers, and spinlocks. The functions follow closely the logic of pthreads.</p>
-<p>While these are useful, they are building blocks and are not usually useful to EFL applications considering the higher-level functions that are available in Ecore.</p>
+<p>While these functions are useful, they are building blocks and not usually useful in EFL applications considering the higher-level functions that are available in Ecore.</p>
-<p>A detailed presentation of threads is too large for this guide. The links below are good introductions to threads and pthreads in particular.</p>
+<p>For an introduction to threads and pthreads in particular, see:</p>
<ul>
-<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="blank">Basic use of pthreads</a> (IBM developerWorks)</li>
-<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
-<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="blank">POSIX 2003 specification</a> (opengroup)</li>
+<li><a href="http://www.ibm.com/developerworks/library/l-pthred/index.html" target="_blank">Basic use of pthreads</a> (IBM developerWorks)</li>
+<li><a href="https://computing.llnl.gov/tutorials/pthreads/" target="_blank">POSIX Threads Programming</a> (Lawrence Livermore National Laboratory)</li>
+<li><a href="http://pubs.opengroup.org/onlinepubs/9699919799/basedefs/pthread.h.html" target="_blank">POSIX 2003 specification</a> (opengroup)</li>
</ul>
-<p>If you are already familiar with threads, refer to a standard pthreads documentation and the Eina reference documentation or to the API list below; remember that it is a very close mapping of the pthreads API.</p>
+<p>If you are already familiar with threads, see the standard pthreads documentation and the Eina reference documentation, or the following function lists. Remember that the Eina functions map very closely to the pthreads functions.</p>
<table>
<caption>Locks (mutual exclusions)</caption>
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_lock_new (Eina_Lock *mutex)</span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_new()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_new()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_lock_free (Eina_Lock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_destroy()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_take (Eina_Lock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_lock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_take_try (Eina_Lock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_trylock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_take_try()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_lock_release (Eina_Lock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_mutex_unlock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_release()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p>none (prints debug information on the lock) </p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_lock_debug (const Eina_Lock *mutex) </span></p></td>
+<td>none (prints debug information on the lock)</td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_lock_debug()</span></td>
</tr>
</tbody>
</table>
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_new (Eina_Condition *cond, Eina_Lock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_init()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_new()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_condition_free (Eina_Condition *cond) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_destroy </span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_wait (Eina_Condition *cond) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_wait()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_wait()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_timedwait (Eina_Condition *cond, double t) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_timedwait()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_timedwait()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_broadcast (Eina_Condition *cond) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_broadcast()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_broadcast()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_condition_signal (Eina_Condition *cond) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_cond_signal()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_condition_signal()</span></td>
</tr>
</tbody>
</table>
<table>
-<caption>RWLocks (Read-Write Locks, for multiple-readers/single-writer scenarios)</caption>
+<caption>RWLocks (Read-write locks, for multiple-readers/single-writer scenarios)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_rwlock_new (Eina_RWLock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_init()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_new() </span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_rwlock_free (Eina_RWLock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_destroy()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_rwlock_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_take_read (Eina_RWLock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_rdlock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_read()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_take_write (Eina_RWLock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_rwlock_wrlock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_take_write()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Lock_Result eina_rwlock_release (Eina_RWLock *mutex) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_rwlock_unlock()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">
+eina_rwlock_release()</span></td>
</tr>
</tbody>
</table>
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_key_create() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_tls_new (Eina_TLS *key) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_create()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_new()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_tls_free (Eina_TLS key) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_key_delete()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void * eina_tls_get (Eina_TLS key) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_getspecific()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_get()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_tls_set (Eina_TLS key, const void *data) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_setspecific</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_tls_set()</span></td>
</tr>
</tbody>
</table>
<table>
-<caption>Semaphores (access restrictions for set of resources)</caption>
+<caption>Semaphores (access restrictions for a set of resources)</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_init() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_new (Eina_Semaphore *sem, int count_init) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">sem_init()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_new()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_destroy() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_free (Eina_Semaphore *sem) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">sem_destroy()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_wait() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_lock (Eina_Semaphore *sem) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">sem_wait()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_lock()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">sem_post() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_semaphore_release (Eina_Semaphore *sem, int count_release) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">sem_post()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_semaphore_release()</span></td>
</tr>
</tbody>
</table>
<table>
-<caption>TLS (Thread-Local Storage)</caption>
+<caption>Barriers</caption>
<colgroup>
<col width="50%" />
<col width="50%" />
</colgroup>
<tbody>
<tr>
-<th>pthreads API </th>
-<th>Eina equivalent </th>
+<th>pthreads function</th>
+<th>Eina equivalent</th>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_barrier_new (Eina_Barrier *barrier, int needed) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_init()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_new()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">void eina_barrier_free (Eina_Barrier *barrier) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_destroy()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_free()</span></td>
</tr>
<tr>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait() </span></p></td>
-<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">Eina_Bool eina_barrier_wait (Eina_Barrier *barrier) </span></p></td>
+<td><span style="font-family: Courier New,Courier,monospace;">pthread_barrier_wait()</span></td>
+<td><span style="font-family: Courier New,Courier,monospace;">eina_barrier_wait()</span></td>
</tr>
</tbody>
</table>
-<h2 id="Examples" name="Examples">Examples</h2>
+<h2 id="Examples" name="Examples">Thread Use Examples</h2>
+
+<p>The following examples display a window with a label. An auxiliary thread semi-regularly changes the text of the label. If you want to display a regular animation, use the Ecore animators described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
-<p>The two examples below display a window with only a label. An auxiliary thread semi-regularly changes the text of the label. Note that if you want to do a regular animation, use Ecore animators which are described in the <a href="main_loop_n.htm">Main Loop</a> guide.</p>
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function:</p>
-<h3>Using <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span></h3>
+<ol>
-<p>The first example uses <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> to call the GUI functions from the main thread. The function that is used to handle the feedback simply sets the text of a label:</p>
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread.
<pre class="prettyprint">
static void
elm_object_text_set(ad->label, buf);
}
</pre>
-
-<p>The feedback is sent from the function shown below; it does nothing besides sleeping and sending feedback.</p>
+</li>
+<li>Send the feedback from the other thread using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function. The following function does nothing besides sending the feedback and sleeping.
<pre class="prettyprint">
static void
{
int iteration;
// Change the text roughly every 1 second. This is only an example; if you
- // want to do that, use ecore animators!
+ // want regular animations, use Ecore animators!
for (iteration = 0; ; iteration++)
{
- // Since we are running from another thread, we need to take special
+ // Since you are running from another thread, you need to take special
// care and instead send data to the main thread and have it run the
- // feedback function given when creating the thread.
+ // feedback function given when creating the thread
ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
- // Sleep for roughly one second.
+ // Sleep for roughly one second
sleep(1);
}
}
</pre>
+</li>
-<p>Create a function that is called when the thread exits. In the example, this is called only right before the application exits but if the blocking function was more complex, it can trigger it.</p>
+<li>Create an end function that is called when the thread exits. In this example, the end function is called only right before the application exits. However, if the blocking function is more complex, it can trigger the end function.
<pre class="prettyprint">
static void
elm_object_text_set(ad->label, "Ticks over");
}
</pre>
+</li>
-<p>The final bit is a call to <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> which starts the thread.</p>
+<li>Call the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to start the thread:
<pre class="prettyprint">
ecore_thread_feedback_run(_long_function, _set_label_text, _end_func, NULL, ad, EINA_FALSE);
</pre>
+</li>
+</ol>
-<h3>Using <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span></h3>
+<p>To use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function:</p>
-<p>The second example is very similar to the first one except that it uses <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> to do its GUI operations.</p>
-
-<p>The callback receives data as a structure and alternatively displays "Tick d" or "Tock d".</p>
+<ol>
+<li>Implement the GUI function that sets the text of a label and can be called from the main thread. The function receives data as a structure and alternatively displays "Tick d" or "Tock d".
<pre class="prettyprint">
struct thd
{
char buf[64];
struct thd *thd = data;
- snprintf(buf, sizeof(buf),
- "%s %d",
- (thd->tick_not_tock ? "Tick" : "Tock"),
- thd->iteration);
+ snprintf(buf, sizeof(buf), "%s %d", (thd->tick_not_tock ? "Tick" : "Tock"), thd->iteration);
elm_object_text_set(thd->ad->label, buf);
return NULL;
}
</pre>
+</li>
-<p>The function in the thread is also slightly larger since it needs to differentiate between ticks and tocks:</p>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function call the GUI function. Differentiate between the ticks and the tocks:
<pre class="prettyprint">
static void
free(thd);
}
</pre>
+</li>
-<p>Finally, starting the thread is done through <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> and is therefore very similar to the previous example.</p>
+<li>Start the thread through the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span> function:
<pre class="prettyprint">
ecore_thread_run(_long_function_tick_tock, _end_func, NULL, ad);
</pre>
-
+</li>
+</ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<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__Edje.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>
<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_mn.htm#basics">Elementary Basics</a></p>
+<p><a href="elementary_mn.htm">Elementary</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>Elementary can be configured using profiles. These chapters detail some configuration items that can be modified to tweak the use of Elementary.</p>
-<p><a href="elementary_mn.htm#config">Elementary Configuration</a></p>
+<p><a href="elementary_mn.htm#config">Managing Elementary Profiles</a> and <a href="elementary_mn.htm#options">Configuring Elementary Options</a></p>
<h3 id="ui" name="ui">Components</h3>
<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__Edje.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>
<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>
+<p><a href="elementary_wn.htm">Elementary</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>Elementary can be configured using profiles. These chapters detail 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>
+<p><a href="elementary_wn.htm#config">Managing Elementary Profiles</a> and <a href="elementary_wn.htm#options">Configuring Elementary Options</a></p>
<h3 id="ui" name="ui">Components</h3>
<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 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">E
OM</a> <p>Enables you to handle external output devices.</p></li>
+ <li><a href="eom_n.htm">E
xternal Output Manager</a> <p>Enables you to handle external output devices.</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>Input Method</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/uix/ime_tutorial_n.htm">Input Method Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Input Method</h1>
+
+<p>The input method editor (IME) is an input panel (keyboard) that lets the user input text and the platform receive the entered data. The user can select an IME as their default keyboard in the device Settings application.</p>
+
+<p>You can create a Tizen native IME application that provides a new IME. You can start the IME application life-cycle, interact with the current IME UI state, and retrieve attributes and events.</p>
+
+<p>The main features of the Input Method API include:</p>
+
+<ul>
+<li>Managing the IME life-cycle
+<p>The system can have multiple keyboards, and the user can choose which one to use as the default keyboard. The IME application starts its life-cycle when it is selected as the default keyboard. The following figure shows the IME application life-cycle.</p>
+
+ <p class="figure">Figure: IME application life-cycle</p>
+ <p align="center"><img alt="IME application life-cycle" src="../../images/ime_lifecycle.png" /></p>
+
+<p>The IME application runs as follows:</p>
+<ol>
+<li>Once the IME application is started, the <span style="font-family: Courier New,Courier,monospace">create()</span> callback function is called.</li>
+<li>When a text input UI control gets the focus, the <span style="font-family: Courier New,Courier,monospace">show()</span> callback function is called.
+<p>The IME application can call Input Method APIs to interact with the UI control. The event callback functions are called when the UI control state changes. When the text input UI control loses the focus, the <span style="font-family: Courier New,Courier,monospace">hide()</span> callback function is called.</p></li>
+<li>When the IME application is finished, the <span style="font-family: Courier New,Courier,monospace">terminate()</span> callback function is called.</li></ol>
+</li>
+
+<li>Managing the main loop and event callback functions
+<p>The IME application must implement the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function. It is the main entry point, in which you can register event callback functions and call the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function to start the main loop.</p>
+<p>During its life-cycle, the IME application can receive a number of events from the Tizen input service framework through the callback functions. You must register the mandatory <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callbacks. Other callbacks can be registered as required by the specific IME application.</p> </li>
+
+<li>Showing and hiding the keyboard
+<p>When an associated text input UI control has the focus, the active keyboard is requested to be shown. When the text input UI control loses the focus, the keyboard is requested to be hidden.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">show()</span> and <span style="font-family: Courier New,Courier,monospace">hide()</span> callback functions are used to manage the keyboard visibility, and the IME application must register both of them when starting the IME main loop.</p>
+<p>The client application can set various configurations for each text input UI control, such as the cursor position, key layout type, return key type, and flags of predictive text. The configurations are delivered to the IME application though the <span style="font-family: Courier New,Courier,monospace">show()</span> callback function, to allow the keyboard to show the correct look to the user.</p></li>
+
+<li>Using the keyboard option menu
+<p>Each keyboard can offer its own option menu to allow the user to manage the keyboard settings. Nowadays, most platforms provide the keyboard option menu from the device Settings application or from the keyboard directly.</p>
+<p>You can register callback functions that are called when the keyboard option menu opens or closes. These callback functions can be registered before the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function call in the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function.</p>
+<p>The device Settings application triggers the callback function to open the keyboard option menu. The keyboard itself can also trigger the callback function to open its option menu.</p></li></ul>
+
+<h2>Input Method Manager</h2>
+<p>The Input Method Manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MANAGER__MODULE.html">wearable</a> applications) is a module used to manage the installed IMEs. You can use it to open the installed IME list or selector menu after your IME application is installed, and guide the user to select the installed IME:</p>
+
+<ul>
+<li>Showing the IME list
+<p>You can request the installed IME list menu to be opened. If a new IME has been installed, the user can see its name in the IME list, and can use the toggle button to enable the keyboard they want. All keyboards enabled in the IME list are shown in the IME selector to allow the user to select them as the default keyboard.</p>
+ <p class="figure">Figure: IME list</p>
+ <p align="center"><img alt="IME list" src="../../images/ime_list.png" /></p>
+</li>
+<li>Showing the IME selector
+<p>You can request the IME selector menu to be opened. When the user opens the IME selector menu, it shows all the keyboards enabled in the IME list. The user can change the default keyboard by selecting a new one. By clicking <strong>Select keyboard</strong>, the user can return to the IME list menu to enable a new IME.</p>
+ <p class="figure">Figure: IME selector</p>
+ <p align="center"><img alt="IME selector" src="../../images/ime_selector.png" /></p>
+</li>
+<li>Checking the IME status
+<p>You can check whether a specific IME is enabled or disabled in the system keyboard setting. You can also check which IME is currently selected as the default keyboard. These features are useful when the user installs a new keyboard.</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 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>
<p>The main UIX features are:</p>
<ul>
- <li><a href="tts_n.htm">TTS</a> <p>Synthesize text into sound data and play it.</p></li>
- <li><a href="stt_n.htm">STT</a> <p>Recognize sound data recorded by the user and send the result as text.</p></li>
+ <li><a href="tts_n.htm">TTS</a> <p>Enables you to synthesize text into sound data and play it.</p></li>
+ <li><a href="stt_n.htm">STT</a> <p>Enables you to recognize sound data recorded by the user and send the result as text.</p></li>
+ <li><a href="voicecontrol_guide_n.htm">Voice Control</a> <p>Enables you to let the user control the device through voice commands.</p></li>
+ <li><a href="ime_n.htm">Input Method</a> <p>Enables you to create an IME application that provides a new keyboard for the user.</p></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.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>Voice control elementary</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/uix/voicecontrol_elm_tutorial_n.htm">Voice control elementary Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Voice control elementary</h1>
+
+ <p>You can register voice commands for EFL-supported UI components to allow the user to interact with visible UI components inside the application using their voice. The Voice control elementary library recognizes spoken commands from registered UI components. </p>
+
+ <p>The following figure illustrates the application screen when the Voice control elementary features are enabled. When the screen is updated, any UI components that have a registered command and hint are shown with a tooltip (hint). When the user speaks the hint, the callback function of the action related to the UI component is executed.</p>
+<p class="figure">Figure: Voice command hints on the screen</p>
+ <p align="center"><img alt="Voice command hints on the screen" src="../../images/voice_control_elm_screen.png" /></p>
+
+ <p>You have no need to consider how to recognize voice commands or start and stop the recognition process. A preloaded voice application handles the process automatically. You just need to set the command and hint on every EFL elementary component on which you want to use the voice command.</p>
+
+<p>When the user speaks a command corresponding to a visible EFL elementary component on the screen, the recognized command is sent to the Voice control elementary library from the Voice control service, and the action mapped to the component is executed. For example, if the component is a button, the action can be a button click.</p>
+
+
+ <p class="figure">Figure: Voice command process</p>
+ <p align="center"><img alt="Voice command process" src="../../images/voice_control_elm.png" /></p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The detailed implementation of the preloaded voice application (how to trigger and recognize the user speaking) can differ according to the device (mobile, wearable, or TV).</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<p>The main features of the Voice control elementary API include:</p>
+<ul>
+<li>Managing commands and hints
+ <p>You can set commands and hints for visible UI components on the application screen. The hint message shows the user which command must be spoken to interact with that UI component. When the user speaks a command, the command is executed.</p></li>
+<li>Retrieving information
+ <p>You can get various information from the Voice control elementary API:</p>
+ <ul><li>Default language
+<p>You can start the recognition with any language you want. However, if you do not set a specific language, the Voice control elementary library start recognizing voice commands with the default language.</p></li>
+<li>Supported language
+<p>You can retrieve a list of supported languages to check whether the language that you want is supported.</p></li>
+<li>Supported UI components, actions, and commands
+<p>You can retrieve a list of supported UI components that can be interacted with using the voice commands. You can also retrieve a list of supported actions and their commands for each UI component type.</p></li></ul>
+</li>
+</ul>
+
+
+<p>The following table lists the EFL UI components that support voice commands, and the actions supported by each component and already defined in the configuration file. Note that the label component only supports the hint without any action command.</p>
+<table>
+<caption>Table: UI components and their actions</caption>
+<tbody>
+<tr>
+ <th rowspan="2">UI component</th>
+ <th colspan="5">Action/command</th>
+</tr>
+<tr>
+ <th>click/()</th>
+ <th>up/up</th>
+ <th>down/down</th>
+ <th>left/left</th>
+ <th>right/right</th>
+</tr>
+ <tr>
+ <td>Button</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Check</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Ctxpopup</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Entry</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Gengrid</td>
+ <td>No</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <td>Genlist</td>
+ <td>No</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Label</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Radio</td>
+ <td>Yes</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ <td>No</td>
+ </tr>
+ <tr>
+ <td>Slider</td>
+ <td>No</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <td>Spinner</td>
+ <td>No</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ </tr>
+ <tr>
+ <td>Toolbar</td>
+ <td>No</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ <td>Yes</td>
+ </tr>
+ </tbody></table>
+
+
+
+<p>To use the voice commands:</p>
+
+<ol><li>Initialize the Voice control elementary library and create a handle.
+<p>The Voice control elementary handle is used to set user-defined commands and hints for the corresponding UI component in the application.</p></li>
+<li>Set commands and hints.
+<p>With a handle related to the individual UI component in the application screen, you can specify a command used to distinguish that component from others.</p>
+<p>Along with the command, you can set a hint message. The command and hint can be different, but consistency tends to create a better user experience. You can also set a hint without a command simply to provide information to the user.</p>
+</li>
+<li>When no longer needed, destroy the handle and deinitialize the Voice control elementary library.</li></ol>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Set the commands and hints on visible EFL elementary UI components only. When the visible components on the screen change, the commands and hints must also change.</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>
--- /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>Voice Control</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/uix/voicecontrol_tutorials_n.htm">Voice Control Tutorials</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Voice Control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Voice Control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Voice Control</h1>
+ <p>Voice control features allow the user to control the device through voice commands.</p>
+ <p>The main voice control features are:</p>
+ <ul>
+ <li><a href="voicecontrol_n.htm">Voice control</a> <p>Enables you to register voice commands, which trigger a callback when the user speaks them.</p></li>
+ <li><a href="voicecontrol_elm_n.htm">Voice control elementary</a> <p>Enables you to register voice commands for EFL-supported UI components to perform component-related actions, such as button clicks.</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
--- /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>Voice control</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/uix/voicecontrol_tutorial_n.htm">Voice control Tutorial</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+<h1>Voice control</h1>
+
+ <p>You can recognize the sound data recorded by the user and send the result as a predefined command using the Voice control service.</p>
+
+<p>The main features of the Voice control API include:</p>
+<ul>
+<li>Managing commands
+ <p>You can use the Voice control service to register commands as foreground or background type. When the user speaks a registered command, the callback function returns the recognition result.</p></li>
+<li>Retrieving information
+ <p>You can get various information from the voice control:</p>
+ <ul><li>Voice control state
+<p>The state is changed by functions and applied as a precondition of each API.</p></li>
+<li>Voice control service state
+<p>The user controls the state by starting and stopping command recognition.</p></li>
+<li>Current language
+<p>A command is valid only when the command language is the same as the current language. The current language can be changed by changing the application or display language in the device.</p>
+<p>You can get a notification of the language change in a callback. If the display language is changed to a non-supported one, the voice control language changed to English.</p></li>
+<li>Supported language
+<p>You can retrieve a list of supported languages to check whether the language that you want is supported.</p></li></ul>
+</li>
+</ul>
+
+
+<p>To use the voice control:</p>
+<ol><li>Initialize the voice control and register callback functions.
+<p>The initialization allows the voice control to distinguish your application from any other applications also using voice control. The registered callbacks allow you to receive notifications about changes in the service state, language, and recognition result, and about any errors.</p></li>
+<li>Prepare the voice control.
+<p>The preparation connects the Voice control service for background work, such as recording and recognizing the user voice.</p>
+<p>When the application initializes and prepares the voice control, the Voice control daemon is invoked and connected for background work. The daemon and the application communicate as server and client.</p>
+</li>
+<li>Set commands.
+<p>You can create a command list, and add or remove individual commands in the list. When creating an individual command, set the command text and type for each command handle. When all commands are created and added to the command list, set the command list to the voice control for recognition.</p></li>
+<li>Get the recognition result.
+<p>The recognition result is sent through a registered callback function.</p>
+<p>If the registered command is duplicated or the user speaks multiple commands, the recognition result can contain multiple results. If you set duplicated commands, the Voice control service can reject the command. The rejection is shown in the result event.</p></li>
+<li>When no longer needed, unprepare and deinitialize the voice control.
+<p>You must disconnect the voice control service and deinitialize the voice control using the <span style="font-family: Courier New,Courier,monospace">vc_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> functions.</p></li></ol>
+
+
+ <p class="figure">Figure: Voice control (left) and Voice control service (right) life-cycle states</p>
+ <p align="center"><img alt="Voice control and Voice control service life-cycle states" src="../../images/voice_control.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 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>
<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. 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>
+ <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.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__EFL.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>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth Tutorial</a></li>
+ <li><a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm">Bluetooth Low Energy Tutorial</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>
</ul>
</tbody>
</table>
- <p>The main features of Bluetooth API include:</p>
+ <p>The main features of the 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>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>
- <p>The main features of Bluetooth (4.0) Low Energy API include:</p>
+
+<p>The main Bluetooth (4.0) Low Energy features include:</p>
<ul>
<li>Managing the local Bluetooth adapter
- <p>The <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">Bluetooth adapter management</a> is performed the same way as in regular Bluetooth API.</p></li>
- <li>Discovering Bluetooth Low Energy Devices
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Discovering_BT_LE_Devices">discover Bluetooth Low Energy devices</a> in range.
- By this discovery process you will obtain basic information about available remote devices: their names, provided services etc.</p></li>
- <li>Managing the Advertising Options
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_Advertising">managing the advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices to be discovered.</p></li>
- <li>Connecting to a Bluetooth Low Energy Device
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connecting">connecting to a remote Bluetooth Low Energy device</a>. When connected you can access services and characteristics of the remote device.</p></li>
- <li>Receiving Notifications on Connection State Change
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Connection_Notification">monitor the state of the connection</a> to detect when the connection to the remote device is lost.</p></li>
- <li>Retrieving Bluetooth GATT Services
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Retrieving_Services">retrieve information about Bluetooth GATT Services</a> provided by the remote device.</p>
- <p>Every GATT service defines characteristics it includes. By knowing the service you know what features the Bluetooth device exposes.</p></li>
- <li>Accessing Bluetooth GATT Characteristic Value
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Characteristic_Value">read and write Bluetooth GATT characteristic value</a>.</p>
- <p>Characteristics allows you to monitor and sometimes control remote Bluetooth Low Energy devices. For example a sensor reading can be exposed by the sensor device as a Bluetooth GATT characteristic.</p></li>
- <li>Receiving Notification on Characterictic Value Change
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Characterictic_Notification">monitor changes of a characterictic value</a> to detect change for example in sensor reading, battery level and so on.</p></li>
- <li>Accessing Bluetooth GATT Descriptor Value
- <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Descriptor_Value">read and write Bluetooth GATT descriptor value</a>.</p></li>
- </ul>
-
+ <p>The <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm#Managing_BT_Adapter">Bluetooth adapter management</a> is performed the same way as in the regular Bluetooth API.</p></li>
+ <li>Discovering Bluetooth Low Energy devices
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Discovering_BT_Devices">discover Bluetooth Low Energy devices</a> in range. Through the discovery process, you can obtain basic information about available remote devices, such as their names and provided services.</p></li>
+ <li>Managing the advertising options
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Managing_Advertising">manage advertising</a> to control how your device announces itself to other Bluetooth Low Energy devices to be discovered.</p></li>
+ <li>Connecting to a Bluetooth Low Energy device
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Connecting">connect to a remote Bluetooth Low Energy device</a>. When connected, you can access services and characteristics of the remote device.</p></li>
+ <li>Receiving notifications on connection state changes
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Connection_Notification">monitor the connection state</a> to detect when the connection to the remote device is lost.</p></li>
+ <li>Retrieving Bluetooth GATT services
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Retrieving_Services">retrieve information about Bluetooth GATT services</a> provided by the remote device.</p>
+ <p>Every GATT service defines characteristics it includes. By knowing the service, you know what features the Bluetooth device exposes.</p></li>
+ <li>Accessing the Bluetooth GATT characteristic value
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Characteristic_Value">read and write the Bluetooth GATT characteristic value</a>.</p>
+ <p>Characteristics allows you to monitor and sometimes control remote Bluetooth Low Energy devices. For example, a sensor reading can be exposed by the sensor device as a Bluetooth GATT characteristic.</p></li>
+ <li>Receiving notifications on characteristic value changes
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Characterictic_Notification">monitor a characteristic value</a> to detect any changes, for example, in sensor readings and battery level.</p></li>
+ <li>Accessing the Bluetooth GATT descriptor value
+ <p>You can <a href="../../../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_le_tutorial_w.htm#Descriptor_Value">read and write the Bluetooth GATT descriptor value</a>.</p></li>
+</ul>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>In addition to the Tizen Web Device API guides above, you can study the following features:</p>
<ul>
<li><a href="localization/localization_w.htm">Localization</a> <p>Enables you to internationalize your application.</p></li>
- <li><a href="uifw/uifw_guide_w.htm">Web UI Framework (UIFW)</a>
+ <li><a href="TAU/tau.htm">Tizen Advanced UI Framework (TAU)</a>
<p>Enables you to create and manage various kinds of UI components.</p></li>
<li><a href="service/service_w.htm">Service Application</a> <span style="color: red">in wearable applications only</span> <p>Allows you to create wearable Web service applications.</p></li>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#auth">Auth Adaptor</a></li>
- <li><a href="#storage">Storage Adaptor</a></li>
- <li><a href="#contact">Contact Adaptor</a></li>
- <li><a href="#discovery">Discovery Adaptor</a></li>
- <li><a href="#message">Message Adaptor</a></li>
- <li><a href="#push">Push Adaptor</a></li>
- <li><a href="#shop">Shop Adaptor</a></li>
- <li><a href="#start_plugin">How to start plugin?</a></li>
+ <li><a href="#adaptors">Available Adaptors</a></li>
+ <li><a href="#start_plugin">Starting a Plugin</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.tutorials/html/native/social/service_adaptor_client_tutorial_n.htm">Service Adaptor Tutorial</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Service Adaptor API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Service Adaptor API for Wearable Native</a></li>
+ <!--<li><a href="../../../../../org.tizen.tutorials/html/native/social/service_adaptor_tutorial_n.htm">Service Adaptor Tutorial</a></li>-->
+ <li><a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/serviceadaptor.html">Service Adaptor API for Mobile Web</a></li>
</ul>
</div></div>
</div>
<div id="container"><div id="contents"><div class="content">
<h1>Service Adaptor</h1>
-Service Adaptor is a set of several adaptors:
-<ul>
- <li><a href="#contact">Contact Adaptor</a></li>
- <li><a href="#discovery">Discovery Adaptor</a></li>
- <li><a href="#message">Message Adaptor</a></li>
- <li><a href="#push">Push Adaptor</a></li>
- <li><a href="#shop">Shop Adaptor</a></li>
-</ul>
-
-But main of them are following:
-<ul>
- <li><a href="#auth">Auth Adaptor</a></li>
- <li><a href="#storage">Storage Adaptor</a></li>
-</ul>
-
-Each adaptor is an agent between Service Adaptor Client and according plugins. There exist Auth and Storage Plugins for such services as: Amazon, Box, Dropbox, Gogledrive, Onedrive and Sugarsync. This structure illustrates following figure:
+<p>You can manage adaptors, which function as agents between the Service Adaptor Client and the related plugins, to take advantage of various services. For example, the Auth and Storage adaptors allow you to access the Auth and Service Plugins to use services, such as Amazon, Box, Dropbox, Gogledrive, Onedrive, and Sugarsync.</p>
-<p class="figure">Figure: Service Adaptor structure</p>
-<p style="text-align:center;"><img alt="Service Adaptor structure" src="../../../images/service_adaptor_structure.jpg"></p>
+<p class="figure">Figure: Service adaptor structure</p>
+<p style="text-align:center;"><img alt="Service adaptor structure" src="../../../images/service_adaptor_structure.png"/></p>
-<p>The main feature of the Service Adaptor is connecting/disconnecting adaptors to Service Adaptor Client via D-Bus.</p>
-
-<p>There are two kinds of path type used in Service Adaptor:
+<p>The main feature of the Service Adaptor API is to connect adaptors to and disconnect them from the Service Adaptor Client though D-Bus. The Service adaptor uses 2 path types:</p>
<ul>
- <li><b>"Logical path"</b> - means path of "root file system".<br>
- It starts from root path(= '/') and you can use this path like linux, e.g. "/folder1/image1.jpg".<br><br>
+ <li><b>Logical path</b>
+<p>The path of the root file system. It starts from the root path ("/"), and you can use the path like in Linux (for example, "/folder1/image1.jpg").</p>
</li>
- <li><b>"Physical path"</b> - means specfic uri that be used for cloud server.<br>
- Some clouds use same with "Logical path", but some clouds use specfic key or url, e.g. "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O", "/folder1" is "2JI32UNJDWQEQWQWEADSSAD".<br>
+ <li><b>Physical path</b>
+<p>A specific URI used for the cloud server. Some clouds use a logical path, but others use a specific key or URL (for example, "/" is "ZmNhMWY2MTZlY2M1NDg4OGJmZDY4O" and "/folder1" is "2JI32UNJDWQEQWQWEADSSAD").</p>
</li>
</ul>
-</p>
+<h2 id="adaptors" name="adaptors">Available Adaptors</h2>
+
+<p>The following adaptors are provided:</p>
-<h2 id="auth" name="auth">Auth Adaptor</h2>
-<p>This adaptor manages authentication plugins.</p>
-<p>It allows to:
+<ul>
+ <li>Auth adaptor
+<p>This adaptor manages authentication plugins. It allows you to:</p>
<ul>
- <li>get Auth Plugin List</li>
- <li>set Plugin</li>
- <li>request Channel Auth, i.e. service name like "com.serviceadaptor.message", app id, service id (0: contact, 1: free message) and mobile station identification number (IMSI)</li>
+ <li>Get the Auth Plugin list.</li>
+ <li>Set the Plugin.</li>
+ <li>Request the Channel Auth, such as the service name ("com.serviceadaptor.message"), app ID, service ID (0: contact, 1: free message), and mobile station identification number (IMSI).</li>
</ul>
-</p>
-
-<h2 id="storage" name="storage">Storage Adaptor</h2>
-<p>This module handles files transfer to/from cloud.</p>
-<p>It allows to:
+</li>
+ <li>Storage adaptor
+<p>This adaptor handles files transfers to and from a cloud. It allows you to:</p>
<ul>
- <li>download a server/thumbnail file and write it to local file</li>
- <li>upload a local file to server path</li>
- <li>request file status</li>
- <li>cancel/pause/resume file transfer</li>
+ <li>Download a server or thumbnail file and write it to a local file.</li>
+ <li>Upload a local file to a server path.</li>
+ <li>Request the file status.</li>
+ <li>Cancel, pause, and resume a file transfer.</li>
</ul>
-</p>
-
-<h2 id="contact" name="contact">Contact Adaptor</h2>
-<p>This adaptor manages contacts information in Contact Server, their profiles and service registration information. </p>
-<p>It allows to:
+ </li>
+ <li>Contact adaptor
+<p>This adaptor manages contact information in the Contact server, including the contact profiles and service registration information. It allows you to:</p>
<ul>
- <li>reset contact information in Contact Server and upload native contact information of device to the server</li>
- <li>synchronize native contact information of device with Contact Server according to [type] field of each contact</li>
- <li>get profiles and service registration information of contacts</li>
- <li>set and update device’s profile to server</li>
- <li>upload/delete profile image meta to/from File Server and sets my profile image to Profile Server</li>
- <li>set/get my profile’s privacy levelthe scope of people to be opened</li>
- <li>set my presence ON/OFF information to Presence Server</li>
+ <li>Reset contact information in the Contact server and upload native contact information of the device to the server.</li>
+ <li>Synchronize native contact information of the device with the Contact server according to the <span style="font-family: Courier New,Courier,monospace">[type]</span> field of each contact.</li>
+ <li>Get contact profiles and service registration information.</li>
+ <li>Set and update device profile in the server.</li>
+ <li>Upload and delete profile image meta in the File server and set the my profile image to the Profile server.</li>
+ <li>Set and get my profile privacy level</li>
+ <li>Set my presence ON/OFF information to the Presence server.</li>
</ul>
-</p>
-
-<h2 id="discovery" name="discovery">Discovery Adaptor</h2>
-<p>It is a future development.</p>
-
-<h2 id="message" name="message">Message Adaptor</h2>
-<p>This module manages chatting and messaging.</p>
-<p>Its main functionality is requesting for:
+</li>
+ <li>Discovery adaptor
+ <p>This adaptor is a future development. Not in use yet.</p></li>
+ <li>Message adaptor
+<p>This adaptor manages chatting and messaging. It allows you to:</p>
<ul>
- <li>Creating Chatroom, Inviting to (or Ending) Chat</li>
- <li>All Unread Messages</li>
- <li>Read or Unseal Message</li>
- <li>Forward Online or Unread Message</li>
- <li>Save Call Log</li>
- <li>Chat ID based on phone number</li>
+ <li>Create a chatroom, and invite people to (or end) a chat.</li>
+ <li>Get all unread messages.</li>
+ <li>Read or unseal a message.</li>
+ <li>Forward online or unread messages.</li>
+ <li>Save the call log.</li>
+ <li>Get the chat ID based on the phone number.</li>
</ul>
-</p>
-
-<h2 id="push" name="push">Push Adaptor</h2>
-<p>It just receives push notifications from push service.</p>
-
-<h2 id="shop" name="shop">Shop Adaptor</h2>
-<p>This module makes requests for:
+ </li>
+ <li>Push adaptor
+<p>This adaptor receives push notifications from a push service.</p></li>
+ <li>Shop adaptor
+<p>This adaptor allows you to:</p>
<ul>
- <li>List of Items</li>
- <li>Item Information for Download</li>
- <li>Download of Item</li>
- <li>Item Panel URL</li>
+ <li>Get a list of items.</li>
+ <li>Get item information for download.</li>
+ <li>Download an item.</li>
+ <li>Get the item panel URL.</li>
</ul>
-</p>
+ </li>
+</ul>
-<h2 id="start_plugin" name="start_plugin">How to start plugin?</h2>
-<p>First we need to create service adaptor:</p>
-<pre class="prettyprint">
-int service_adaptor_create(service_adaptor_h *service_adaptor);
-</pre>
-<p>Than for valid service_adaptor handler we need to iterate to all installed plugins:</p>
-<pre class="prettyprint">
-int service_adaptor_foreach_plugin(service_adaptor_h service_adaptor,
- service_adaptor_plugin_cb callback,
- void *user_data);
-</pre>
+<h2 id="start_plugin" name="start_plugin">Starting a Plugin</h2>
-<p>Inside callback (which is invoked for each plugin) we get plugin_uri which is then passed to:</p>
-<pre class="prettyprint">
-int service_adaptor_create_plugin(service_adaptor_h service_adaptor,
- const char *plugin_uri,
- service_plugin_h *plugin);
-</pre>
+<p>To start a plugin, use the following process:</p>
-<p>And finally we have to request start initialization for service plugin:</p>
-<pre class="prettyprint">
-int service_plugin_start(service_plugin_h handle,
- int service_flag);
-</pre>
+<ol><li>Create a Service adaptor with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create()</span> function.</li>
+<li>With a valid Service adaptor handler, iterate through all installed plugins with the <span style="font-family: Courier New,Courier,monospace">service_adaptor_foreach_plugin()</span> function.</li>
+<li>Inside the callback (invoked for each plugin), get the <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> value, which is passed to the <span style="font-family: Courier New,Courier,monospace">service_adaptor_create_plugin()</span> function.</li>
+<li>Request a start initialization for the service plugin with the <span style="font-family: Courier New,Courier,monospace">service_plugin_start()</span> function.</li></ol>
-Below example starts all installed Auth and Storage plugins appending each plugin_uri to the list object:
+<p>The following example starts all installed Auth and Storage plugins appending each <span style="font-family: Courier New,Courier,monospace">plugin_uri</span> to the <span style="font-family: Courier New,Courier,monospace">list</span> object:</p>
<pre class="prettyprint">
bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data);
service_adaptor_h service_adaptor = NULL;
-ret = service_adaptor_create(&service_adaptor);
+ret = service_adaptor_create(&service_adaptor);
Evas_Object *list;
ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, (void *)list);
bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
{
- Evas_Object *list = (Evas_Object *)user_data;
-
- if (!plugin_uri || !list)
- return false;
+ Evas_Object *list = (Evas_Object *)user_data;
- if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH) && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE))
- {
- elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
+ if (!plugin_uri || !list)
+ return false;
- service_plugin_h plugin = NULL;
- service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin);
+ if ((service_mask & SERVICE_PLUGIN_SERVICE_AUTH) && (service_mask & SERVICE_PLUGIN_SERVICE_STORAGE))
+ {
+ elm_list_item_append(list, plugin_uri, NULL, NULL, _show_plugin_view, plugin_uri);
- // This should be hidden using config file or User input, because it is security information
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "enasvv4l8hdbmhn");
+ service_plugin_h plugin = NULL;
+ service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin);
- // This should be hidden using config file or User input, because it is security information
- service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "uqhl4pp8mo7hmgn");
- service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH | SERVICE_PLUGIN_SERVICE_STORAGE));
- }
+ // Hide this using config file or user input, because it is security information
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "enasvv4l8hdbmhn");
+ service_plugin_add_property(plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "uqhl4pp8mo7hmgn");
+
+ service_plugin_start(plugin, (SERVICE_PLUGIN_SERVICE_AUTH | SERVICE_PLUGIN_SERVICE_STORAGE));
+ }
- return true;
+ return true;
}
</pre>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<p>This property defines whether the backface of the transformed element is expressed.</p></li>
</ul>
-<pre class="prettyprint lang-html">
+<pre class="prettyprint">
<head>
<style type="text/css">
.box
<li>Element = 1</li>
</ul>
-<pre class="prettyprint lang-htm"><body>
+<pre class="prettyprint lang-html"><body>
<p id="target" class="target">Hello World</p>
</body>
<!--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 lang-xml"><body>
+<pre class="prettyprint lang-html"><body>
<p id="target" class="target">Hello World</p>
</body>
<p>The following example shows the use of a simple event:</p>
-<pre class="prettyprint lang-js"><!--HTML-->
+<pre class="prettyprint"><!--HTML-->
<body onload="touchEventHandler()">
-/* JavaScript */
<script>
+ /* JavaScript */
/* Directly assigning */
window.onload = touchEventHandler; /* Assigns the name of the subject method */
<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
+<pre class="prettyprint lang-html">.prev_icon, .next_icon
{
background-size: 20px auto; <!--Full HD Display-->
background-image: url(../images/page_navi_arrow.png);
<topic href="html/web/tizen/social/call_history_w.htm" label="Call History"></topic>
<topic href="html/web/tizen/social/contact_w.htm" label="Contact"></topic>
<topic href="html/web/tizen/social/data_sync_w.htm" label="Data Synchronization"></topic>
+ <topic href="html/web/tizen/social/service_adaptor_w.htm" label="Service Adaptor"></topic>
</topic>
<topic href="html/web/tizen/localization/localization_w.htm" label="Localization"></topic>
<topic href="html/web/tizen/uifw/uifw_guide_w.htm" label="Web UIFW"></topic>
+ <topic href="html/web/tizen/TAU/tau.htm" label="Tizen Advaced UI Framework (TAU)">
+ <topic href="html/web/tizen/TAU/overview.htm" label="Overview"></topic>
+ <topic href="html/web/tizen/TAU/helloWorld.htm" label="Hello World"></topic>
+ <topic href="html/web/tizen/TAU/managingPage.htm" label="Managing Page"></topic>
+ <topic href="html/web/tizen/TAU/eventHandling.htm" label="Tizen Event Handling"></topic>
+ <topic href="html/web/tizen/TAU/uiComponent.htm" label="UI Component"></topic>
+ <topic href="html/web/tizen/TAU/tutorialNotepad.htm" label="How to Creating Notepad Application"></topic>
+ <topic href="html/web/tizen/TAU/circularUI.htm" label="Circular UI (Wearable)"></topic>
+ <topic href="html/web/tizen/TAU/accessibility.htm" label="Accessibility"></topic>
+ <topic href="html/web/tizen/TAU/globalization.htm" label="Globalization"></topic>
+ </topic>
<topic href="html/web/tizen/service/service_w.htm" label= "Service Application"></topic>
<topic href="html/web/tizen/ime/ime_w.htm" label= "IME Application"></topic>
</topic>
</topic>
</topic>
<topic href="html/native/guides_n.htm" label="Native Application">
+ <topic href="html/native/account/account_guide_n.htm" label="Account">
+ <topic href="html/native/account/oauth2_n.htm" label="oauth2"></topic>
+ <topic href="html/native/account/sync_manager_n.htm" label="Sync Manager"></topic>
+ </topic>
<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/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/media_vision_n.htm" label="Media Vision"></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/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/social_guide_n.htm" label="Social">
+ <topic href="html/native/social/service_adaptor_n.htm" label="Service Adaptor"></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 href="html/native/system/sensors_n.htm" label="Sensor"></topic>
<topic href="html/native/system/sysinfo_n.htm" label="System Information"></topic>
<topic href="html/native/system/settings_n.htm" label="System Settings"></topic>
- <topic href="html/native/system/storage_n.htm" label="Storage"></topic>
+ <topic href="html/native/system/storage_n.htm" label="Storage"></topic>
+ <topic href="html/native/system/t-trace_n.htm" label="T-trace"></topic>
+ </topic>
+ <topic href="html/native/telephony/telephony_guide_n.htm" label="Telephony">
+ <topic href="html/native/telephony/phonenumber_util_n.htm" label="Phonenumber utils"></topic>
+ <topic href="html/native/telephony/telephony_info_n.htm" label="Telephony Information"></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 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/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/scalability_n.htm" label="Scalability Support"></topic>
- <topic href="html/native/ui/eom_n.htm" label="EOM"></topic>
+ <topic href="html/native/ui/eom_n.htm" label="External Output Manager"></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 href="html/native/uix/stt_n.htm" label="STT"></topic>
+ <topic href="html/native/uix/voicecontrol_guide_n.htm" label="Voice Control">
+ <topic href="html/native/uix/voicecontrol_n.htm" label="Voice control"></topic>
+ <topic href="html/native/uix/voicecontrol_elm_n.htm" label="Voice control elementary"></topic>
+ </topic>
+ <topic href="html/native/uix/ime_n.htm" label="Input Method"></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>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>org.tizen.sampledescriptions_2.4.0</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ <buildCommand>
+ <name>org.eclipse.pde.ManifestBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ <buildCommand>
+ <name>org.eclipse.pde.SchemaBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ </buildSpec>
+ <natures>
+ <nature>org.eclipse.pde.PluginNature</nature>
+ </natures>
+</projectDescription>
--- /dev/null
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 1
+Bundle-Name: Tizen Sample Applications
+Bundle-SymbolicName: org.tizen.sampledescriptions;singleton=true
+Bundle-Version: 2.4.0
+Bundle-Vendor: The Linux Foundation
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <script type="text/javascript" src="html/scripts/snippet.js"></script>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <link href="html/css/styles.css" rel="StyleSheet" type="text/css" />
+ <link href="html/css/snippet.css" rel="StyleSheet" type="text/css" />
+ <title>About This Content</title>
+ </head>
+ <body onload="prettyPrint()">
+
+ <h1><a name="Creating2" id="Creating2">About This Content</a></h1>
+ <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>
+</html>
\ No newline at end of file
--- /dev/null
+bin.includes = plugin.xml,\
+ META-INF/,\
+ html/,\
+ build.properties,\
+ .project,\
+ about.html,\
+ index.xml
+
--- /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 Sample Descriptions</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"/> <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/>
+ <font size="11">Sample Descriptions</font></h1>
+
+ <p>The Tizen platform provides sample applications, which are included in the Tizen SDK. The sample applications demonstrate the powerful features of Tizen and speed up the learning curve for a new developer.</p>
+<p>Since you can execute the samples directly in the Tizen SDK, you can use them as a ready library of code for your applications.</p>
+
+ <p>For a detailed list of available samples, see:</p>
+ <ul>
+ <li><a href="sd_w.htm">Web Sample Descriptions</a></li>
+ <li><a href="sd_n.htm">Native Sample Descriptions</a></li>
+ </ul>
+
+<h2 id="create" name="create">Creating Sample Applications</h2>
+<p>You can create Tizen sample applications with the IDE.</p>
+ <p>To create a sample application:</p>
+ <ol>
+ <li><p>In the IDE, select <strong>File > New > Tizen Web Project</strong> (for Web applications) or <strong>File > New > Tizen Native Project</strong> (for native applications).</p></li>
+ <li><p>In the new window, select the <strong>Sample</strong> option from the top.</p></li>
+ <li><p>In the left pane, select the mobile or wearable sample type, and then select the actual sample from the middle pane.</p></li>
+ <li><p>Define the name of your project, and click <strong>Finish</strong>.</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>
+ <!--end-->
+ </body>
+</html>
\ No newline at end of file
--- /dev/null
+/* Pretty printing styles. Used with prettify.js. */
+
+/* SPAN elements with the classes below are added by prettyprint. */
+.pln { color: #000 } /* plain text */
+
+@media screen {
+ .str { color: #793AFF } /* string content */
+ .kwd { color: #7F0055 } /* a keyword */
+ .com { color: green} /* a comment */
+ .typ { color: #1C1C1C } /* a type name */
+ .lit { color: black } /* a literal value */
+ /* punctuation, lisp open bracket, lisp close bracket */
+ .pun, .opn, .clo { color: #1C1C1C}
+ .tag { color: #008 } /* a markup tag name */
+ .atn { color: #606 } /* a markup attribute name */
+ .atv { color: #080 } /* a markup attribute value */
+ .dec, .var { color: #606 } /* a declaration; a variable name */
+ .fun { color: red } /* a function name */
+}
+
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+ .str { color: #060 }
+ .kwd { color: #006; font-weight: bold }
+ .com { color: #600; font-style: italic }
+ .typ { color: #404; font-weight: bold }
+ .lit { color: #044 }
+ .pun, .opn, .clo { color: #440 }
+ .tag { color: #006; font-weight: bold }
+ .atn { color: #404 }
+ .atv { color: #060 }
+}
+
+/* Put a border around prettyprinted code snippets. */
+pre.prettyprint { overflow: auto; padding: 2px; border: 1px solid #888 }
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L5,
+li.L6,
+li.L7,
+li.L8 { list-style-type: none }
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 { background: #eee }
--- /dev/null
+@charset "utf-8";
+
+body {
+ background: white;
+ color: #1C1C1C;
+ margin-right: 20px;
+ margin-left: 20px;
+ font-size: 9pt;
+ font-weight: normal;
+ font-family: Arial, Helvetica, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ol, dl, dd, dt, footer {
+ font-family: Arial, Verdana, Helvetica, sans-serif
+ }
+
+/* Set default font to 9 pt */
+table, div, p, dl, td, caption, th, ul, ol, li, dd, dt, pre, code {
+ font-size: 9pt;
+}
+
+pre, code {
+ font-family: "Courier New", Courier, monospace;
+ border: 1px solid #719cc7;
+ margin: 6px 1.5px;
+ padding: 1px 1px 1px 1px;
+ font-weight: normal;
+ font-style: normal;
+}
+
+h1 {font-size: 24pt; color: #0E437D;}
+h2 {font-size: 18pt; color: #0E437D;}
+h3 {font-size: 14pt; color: #1C1C1C;}
+h4 {font-size: 12pt; color: #1C1C1C;}
+h5 {font-size: 10pt; color: #1C1C1C;}
+
+h1, h2, h3, h4, h5 {
+ font-weight: bold;
+ font-style: normal;
+ line-height: normal;
+ margin-top: 16pt;
+}
+
+caption, p.caption {
+ font-size: 9pt;
+ color: #1C1C1C;
+ font-weight: bold;
+ text-align: left;
+ margin-top: 20px;
+ margin-bottom: 0px;
+}
+
+ol {
+ margin-bottom: 20px;
+}
+
+ul ul , ol ul, ul ol, ol ol{
+ margin-top: 10px;
+}
+
+ul li, ol li {
+ margin-bottom: 10px;
+}
+
+ol.tutorstep li {
+ border-top: 2px solid #719cc7;
+ list-style-position: inside;
+ font-weight: bold;
+ margin-top: 30px;
+ margin-left: -20px;
+ padding-top: 3px;
+ font-size: 12pt;
+}
+
+ol.tutorstep li p{
+ font-size: 9pt;
+ font-weight: normal;
+ margin-top: 10px;
+}
+
+ol.tutorstep ol li, ol.tutorstep li ol li, ol.tutorstep li ul li {
+ font-size: 9pt;
+ list-style-position: outside;
+ margin-left: 0px;
+ font-weight: normal;
+}
+
+ol.tutorstep ol li p, ol.tutorstep ul li p {
+ font-size: 9pt;
+ font-weight: normal;
+ margin-top: 5px;
+}
+
+ol li p, ul li p {
+ font-size: 9pt;
+ font-weight: normal;
+ margin-bottom: 2px;
+ margin-top: 2px;
+}
+
+ol ol , ol.tutorstep ol{
+ font-size: 9pt;
+ font-weight: normal;
+ list-style-type: lower-alpha;
+ color: #1C1C1C;
+ border-style: none;
+ margin-top: 10px;
+}
+
+ol.tutorstep ul {
+ margin-top: 10px;
+ font-size: 9pt;
+}
+
+ol ol li, ol ul li, ol.tutorstep ol li, ol.tutorstep ul li {
+ border-style: none;
+ margin-top: 5px;
+ font-size: 9pt;
+}
+
+ul {
+ font-size: 9pt;
+ font-weight: normal;
+ color: #1C1C1C;
+}
+
+
+/* End of font face declarations */
+
+/* Set table borders and heading row background */
+table {
+ border: 0px;
+ border-collapse: collapse;
+ width: 100%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ background: white;
+}
+
+th {
+ border-top: 2px solid #719cc7;
+ border-right: 1px solid #c6d9f1;
+ border-left: 1px solid #c6d9f1;
+ background-color: #f3f7fb;
+ padding: 4px;
+ color: #719cc7;
+ font-size: 9pt;
+ font-weight: bold;
+}
+
+td {
+ border: 1px solid #c6d9f1;
+ vertical-align:top;
+ padding: 3px 20px 5px 20px;
+ }
+
+td.middle {
+ border: 1px solid #c6d9f1;
+ vertical-align:middle;
+ padding: 3px 20px 5px 20px;
+ }
+
+/* Notes stand out using a light top & bottom borders with yellow background */
+table.note {
+ border-top: 2px solid #719cc7;
+ border-left: 0px;
+ border-right: 0px;
+ width: 100%;
+}
+
+tr.note {
+ text-align: left;
+}
+
+th.note {
+ text-align: left;
+ background-color: #ddd9c3;
+ background-image: note.gif;
+ border-top: 2px solid #719cc7;
+ border-bottom:1px solid #719cc7;
+ border-right: none;
+
+}
+
+td.note, p.note {
+ background-color: #eeece1;
+ color: #1C1C1C;
+ padding: 5px;
+ margin-top:12px;
+ margin-bottom:12px;
+ border: none;
+}
+
+/* Figure titles are centered and bolded */
+p.figure , ol.tutorstep li p.figure, ol.tutorstep ol li p.figure, ol.tutorstep ul li p.figure {
+ text-align: center;
+ font-weight: bold;
+}
+
+/* Red background and white text for things that need fixing before release */
+.fix {
+ background-color: red;
+ font-weight: bold;
+ color: white;
+ }
+
+/* Classes for creating collapsible content */
+#banner {
+ padding: 8px 4px 8px 4px;
+ /* top right bottom left */
+ border: 1px solid #7f7f7f;
+ width: 100%;
+ background-image: url("banner.png");
+ text-align: left;
+ font-weight: bold;
+ font-size: 9pt;
+ color: #ffffff;
+}
+
+#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 #toc-navigation {width: auto;}
+body.no-toc .top {right: 19px; /* float:none; */ width: 28px;}
+body.no-toc #profile {float: right;right: -32px;}
+body.no-toc #profile p {padding: 0; margin: 0;}
+#container #contents:after {content: "."; display: block; height: 20px; clear: both; visibility: hidden;}
+ #container #contents>.content {/* width:75%; */min-width: 600px;/* right: 300px; *//* position: fixed; */padding-right: 5px;}
+ #container #contents>.content>.cont { margin-bottom:80px; padding-bottom:80px; }
+
+.devicespecs-util {float:right; margin-top:25px;}
+ .devicespecs-util ul.dutil {margin:0; padding-bottom:0; height: 11px; list-style-type:none;}
+ .devicespecs-util ul.dutil:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+ .devicespecs-util ul.dutil li {float:left; margin-right:8px; padding-right:8px; background:url('../images/bg_util_bar.gif') no-repeat right center; color:#666;}
+ .devicespecs-util ul.dutil li.none {margin-right:0; padding-right:0; background-image:none;}
+ .devicespecs-util ul.dutil li a { font-size:11px; color:#666; line-height: 11px;}
+ .devicespecs-util ul.dutil li a:hover { color:#222; }
+ .devicespecs-util ul.dutil li a:active { color:#222; }
+
+ul.devicespecifications {clear:both; width:100%; margin:0; padding: 0;}
+ul.devicespecifications > li { width:100%; margin-top:0; padding-left:0; list-style-type:none; border:1px solid #799cd3; padding: 5px 0px 5px 0px;}
+ul.devicespecifications li div.devicespec-con {width:90%; margin:10px 0 20px 0; padding:0 14px; font-size: 13px;}
+ul.devicespecifications li div.devicespec-tit {/*height:22px;*/ padding-right: 71px; background-color:#ffffff; position: relative;}
+ ul.devicespecifications li div.devicespec-tit .items-tit { /*float:left;*/ margin:0 0 0 14px; padding:0; color:#567a9c; line-height: 22px; font-size: 14px; font-style:normal; font-weight: bold;}
+
+ ul.devicespecifications li div.devicespec-tit .items-tit-h2 { /*float:left;*/ margin: 0px 0px 0px 14px; padding:0; line-height: 22px; font-size: 18pt; color: #0E437D; font-style:normal; font-weight: bold;}
+ 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-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; }
+
+.ul.ul, .ul.ul li {margin-bottom: 10px; list-style-type: disc; border: none;}
+.ul.ul ul, .ul.ul ul li, .ol.ol ul, .ol.ol ul li {list-style-type: circle;}
+.ol.ol, .ol.ol li {list-style-type: decimal; border: none;}
+.ol.ol ol, .ol.ol ol li, .ul.ul ol, .ul.ul ol li {list-style-type: lower-alpha;}
+
+.static-cont {width:100%; margin-bottom:40px;}
+
+.top {text-align: right;}
+.toc, ul.toc{
+ margin: 10px 0px 0px 0px;
+ padding-left: 13px;
+ list-style: disc;
+ font-size: 9pt;
+ line-height: 115%;
+ }
+
+.toc-title {
+ font-size: 12pt;
+ color: #0E437D;
+ font-weight: bold;
+ font-style: normal;
+ line-height: normal;
+ margin-top: 16pt;
+}
+
+a.top {
+ display:block;
+ float: right;
+ position:fixed;
+ width: 28px;
+ height:89px;
+ bottom:50px;
+ z-index: 101;
+ right: 19%;
+ }
+
+a img {border: 0;}
+
+/* Footer includes space and a gray line above */
+#footer {
+ position: fixed;
+ /* width: 100%; */
+ bottom: 0px;
+ text-align: center;
+ border-top: 1px solid #CCCCCC;
+ background-color: #FFFFFF;
+ left: 21px; right: 21px;
+}
+
+.footer {font-size: 8pt;}
+
+caption {
+ font-size: 9pt;
+ color: #1C1C1C;
+ font-weight: bold;
+ text-align: center;
+ margin-top: 20px;
+ margin-bottom: 0px;
+}
+
+div.qindex, div.navpath, div.navtab{
+ background-color: #e8eef2;
+ border: 1px solid #84b0c7;
+ text-align: center;
+ margin: 2px;
+ padding: 2px;
+}
+
+div.qindex, div.navpath {
+ width: 100%;
+ line-height: 140%;
+}
+
+div.navtab {
+ margin-right: 15px;
+}
+
+/* @group Link Styling */
+
+a:link {
+ color: #719cc7;
+ text-decoration: underline;
+ font-weight: bold;
+}
+
+a:hover {
+ color: #0e437d;
+}
+
+a:visited {
+ text-decoration: underline;
+ color: #719cc7;
+ font-weight: bold;
+}
+
+a.qindex {
+ font-weight: bold;
+ padding: 2px;
+}
+
+a.qindex:hover {
+ text-decoration: underline;
+ color: #0e437d;
+ padding: 2px;
+}
+
+a.qindex:visited {
+ text-decoration: underline;
+ font-weight: bold;
+ color: #719cc7;
+ padding: 2px;
+}
+
+a.qindexHL {
+ text-decoration: underline;
+ font-weight: bold;
+ background-color: #6666cc;
+ color: #ffffff;
+ padding: 2px 6px;
+ border: 1px double #9295C2;
+}
+
+a.qindexHL:hover {
+ text-decoration: none;
+ background-color: #6666cc;
+ color: #ffffff;
+ padding: 2px 6px;
+}
+
+dl.el {
+ margin-left: -1cm
+}
+
+.fragment {
+ font-family: monospace, fixed;
+ font-size: 105%;
+}
+
+pre.fragment {
+ border: 1px solid #CCCCCC;
+ background-color: #f5f5f5;
+ padding: 4px 6px;
+ margin: 4px 8px 4px 2px;
+}
+
+div.fragment {
+ border: 1px solid #CCCCCC;
+ background-color: #f5f5f5;
+ padding: 6px;
+}
+
+div.ah {
+ background-color: black;
+ font-weight: bold;
+ color: #ffffff;
+ margin-bottom: 3px;
+ margin-top: 3px
+}
+
+td.md {
+ background-color: #f5f5f5;
+ font-weight: bold;
+}
+
+td.mdname1 {
+ background-color: #f5f5f5;
+ font-weight: bold;
+ color: #602020;
+}
+
+td.mdname {
+ background-color: #f5f5f5;
+ font-weight: bold;
+ color: #602020;
+ width: 600px;
+}
+
+div.groupHeader {
+ margin-left: 16px;
+ margin-top: 12px;
+ margin-bottom: 6px;
+ font-weight: bold;
+}
+
+div.groupText {
+ margin-left: 16px;
+ font-style: italic;
+}
+
+td.indexkey {
+ background-color: #eeeeff;
+ font-weight: bold;
+ border: 1px solid #CCCCCC;
+ margin: 2px 0px 2px 0;
+ padding: 2px 10px;
+}
+
+td.indexvalue {
+ background-color: #eeeeff;
+ border: 1px solid #CCCCCC;
+ padding: 2px 10px;
+ margin: 2px 0px;
+}
+
+tr.memlist {
+ background-color: #f0f0f0;
+}
+
+p.formulaDsp {
+ text-align: center;
+}
+
+img.formulaDsp {
+}
+
+img.formulaInl {
+ vertical-align: middle;
+}
+
+/* @group Code Colorization */
+
+span.keyword { color: #008000 }
+span.keywordtype { color: #604020 }
+span.keywordflow { color: #e08000 }
+span.comment { color: #800000 }
+span.preprocessor { color: #806020 }
+span.stringliteral { color: #002080 }
+span.charliteral { color: #008080 }
+span.vhdldigit { color: #ff00ff }
+span.vhdlchar { color: #000000 }
+span.vhdlkeyword { color: #700070 }
+span.vhdllogic { color: #ff0000 }
+
+.mdTable {
+ border: 1px solid #868686;
+ background-color: #F4F4FB;
+}
+
+.mdRow {
+ padding: 8px 10px;
+}
+
+/* @group Member Descriptions */
+
+.mdescLeft, .mdescRight,
+.memItemLeft, .memItemRight,
+.memTemplItemLeft, .memTemplItemRight, .memTemplParams {
+ background-color: #F4F4F4A;
+ border: none;
+ margin: 4px;
+ padding: 3px 8px 4px 8px;
+}
+
+.mdescLeft, .mdescRight {
+ padding: 0px 8px 4px 8px;
+ color: #555;
+}
+
+.memItemLeft, .memItemRight, .memTemplParams {
+ border-top: 1px solid #DBDBDB;
+}
+
+.memTemplParams {
+ color: #606060;
+}
+
+/* @end */
+
+/* @group Member Details */
+
+/* Styles for detailed member documentation */
+
+.memtemplate {
+ font-size: 80%;
+ color: #606060;
+ font-weight: normal;
+ margin-left: 3px;
+}
+
+.memnav {
+ background-color: #eeeeff;
+ border: 1px solid #84b0c7;
+ text-align: center;
+ margin: 2px;
+ margin-right: 15px;
+ padding: 2px;
+}
+
+.memitem {
+ padding: 0;
+}
+
+.memname {
+ white-space: nowrap;
+ font-weight: bold;
+}
+
+.memproto, .memdoc {
+ border: 1px solid #9BBCDD;
+}
+
+.memproto {
+ padding: 0;
+ background-color: #D5E2EF;
+ font-weight: bold;
+ -webkit-border-top-left-radius: 8px;
+ -webkit-border-top-right-radius: 8px;
+ -moz-border-radius-topleft: 8px;
+ -moz-border-radius-topright: 8px;
+}
+
+.memdoc {
+ padding: 2px 5px;
+ background-color: #eef3f5;
+ border-top-width: 0;
+ -webkit-border-bottom-left-radius: 8px;
+ -webkit-border-bottom-right-radius: 8px;
+ -moz-border-radius-bottomleft: 8px;
+ -moz-border-radius-bottomright: 8px;
+}
+
+.memdoc p, .memdoc dl, .memdoc ul {
+ margin: 6px 0;
+}
+
+.paramkey {
+ text-align: right;
+}
+
+.paramtype {
+ white-space: nowrap;
+}
+
+.paramname {
+ color: #853E0E;
+ white-space: nowrap;
+}
+.paramname em {
+ font-style: normal;
+}
+
+/* @end */
+
+.search { color: #003399;
+ font-weight: bold;
+}
+
+form.search {
+ margin-bottom: 0px;
+ margin-top: 0px;
+}
+
+input.search { font-size: 75%;
+ color: #000080;
+ font-weight: normal;
+ background-color: #eeeeff;
+}
+
+td.tiny {
+ font-size: 75%;
+}
+
+.highlight {
+ background-color:#E2E2FF;
+}
+
+/*---------- ide-eclipse Styles ---------*/
+.sh_ide-eclipse{font-family: "Courier New", Courier, monospace;
+ margin: 0px 0px;
+ padding: -30px -30px -30px -30px;
+ font-weight: normal;
+ font-style: normal;}
+.sh_ide-eclipse .sh_sourceCode{background-color:#fff;color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_keyword{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_type{color:#7f0055;font-weight:bold;font-style:normal;}
+/*.sh_ide-eclipse .sh_sourceCode .sh_string{color:#00f;font-weight:normal;font-style:normal;}*/
+.sh_ide-eclipse .sh_sourceCode .sh_string{color:#2A00FF;font-weight:normal;font-style:normal;}
+
+.sh_ide-eclipse .sh_sourceCode .sh_regexp{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_specialchar{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_comment{color:#238E23;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_number{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_preproc{color:#3f5fbf;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_function{color:#000;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_url{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_date{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_time{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_file{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_ip{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_name{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_variable{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_oldfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_newfile{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_difflines{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_selector{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_property{color:#7f0055;font-weight:bold;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_value{color:#00f;font-weight:normal;font-style:normal;}
+.sh_ide-eclipse .sh_sourceCode .sh_unknown{font-family: "Courier New", Courier, monospace;}
+
+/*------------- STYLE FOR NAMES FROM XML FILE -------------*/
+.sh_styleFromXML{color:#800000;font-weight:bold;}
+/*-------------------------------------------------------*/
+
+/*-------- Snippet Base Styles ----------*/
+.snippet-wrap {position:relative;}
+*:first-child+html .snippet-wrap {display:inline-block;}
+* html .snippet-wrap {display:inline-block;}
+.snippet-reveal{text-decoration:underline;}
+.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:-99999px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
+.snippet-wrap .snippet-hide {top:auto; bottom:1px;}
+*:first-child+html .snippet-wrap .snippet-hide {bottom:1px;}
+* html .snippet-wrap .snippet-hide {bottom:1px;}
+.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:1; padding:0;}
+.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:1px; text-decoration:underline;}
+.snippet-wrap pre.sh_sourceCode{padding:1px;line-height:120%;overflow:auto;position:relative;
+-moz-border-radius:0px;
+-webkit-border-radius:0px;
+border-radius:0px;
+box-shadow: 1px 1px px #000;
+-moz-box-shadow: 2px 2px 1px #000;
+-webkit-box-shadow: 1px 1px 1px #000;}
+.snippet-wrap pre.snippet-textonly {padding:1em;}
+*:first-child+html .snippet-wrap pre.snippet-formatted {padding:0.5em 0.5em;}
+* html .snippet-wrap pre.snippet-formatted {padding:0em 0.3em;}
+.snippet-reveal pre.sh_sourceCode {padding:0em 0em; text-align:right;}
+.snippet-wrap .snippet-num li{padding-left:2px;}
+.snippet-wrap .snippet-no-num{list-style:none; padding:0em 0em; margin:0;}
+.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
+.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:2px;}
+.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
+.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
+.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:0px; padding-left:2px;}
+*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+* html .snippet-wrap .snippet-num li.box {margin-left:-2px;}
+.snippet-wrap li.box-top {border-width:0px 0px 0 !important;}
+.snippet-wrap li.box-bot {border-width:0 0px 0px !important;}
+.snippet-wrap li.box-mid {border-width:0 0px !important;}
+.snippet-wrap .snippet-num li .box-sp {width:10px; display:inline-block;}
+*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:20px;}
+* html .snippet-wrap .snippet-num li .box-sp {width:2px;}
+.snippet-wrap .snippet-no-num li.box {border:1px solid;}
+.snippet-wrap .snippet-no-num li .box-sp {display:none;}
+
+/* Layout fixing */
+.clfix:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
+.clfix {display: inline-block;}
+.clfix {display: block;}
+* html .clfix {height: 1%;} /* Hides from IE-mac */
+.clfix {zoom:1;} /*for IE 5.5-7*/
+
+.fl {float:left !important;}
+.fr {float:right !important;}
+.cl {clear:both;}
+.rel {position:relative;}
+.abs {position:absolute;}
+.ac {text-align:center !important;}
+.ar {text-align:right !important;}
+.al {text-align:left !important;}
+.at {vertical-align:top !important;}
+.am {vertical-align:middle !important;}
+.ab {vertical-align:bottom;}
+.hand {cursor:pointer;}
+.bgnone {background:none !important;}
+.brnone {border:none !important;}
+.b {font-weight:bold !important;}
+.n {font-weight:normal !important;}
+.invisible{display:block; overflow:hidden; visibility:hidden; width:0; height:0; margin:0; font-size:0; line-height:0;}
+.mt5 {margin-top:5px !important;}
+/* //Layout fixing */
+
+@media print { .hide, .show { display: none; }}
+
+div#profile {
+ position: relative;
+}
+#profile p {
+ text-align: right;
+}
+
+div#toc_border {
+ border: 2px solid rgb(86, 122, 156); border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; height: 565px;
+}
+
+#contents li {
+ padding-top: 3px;
+ margin-top: 5px;
+ /* overflow: auto; */
+}
+
+p {
+ /* overflow: auto; */
+}
+
+div.table {
+ /* overflow: auto; */
+}
\ 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>Sample Descriptions</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">
+<h1><a href="cover_page.htm">Sample Descriptions</a></h1>
+
+<h2><a href="sd_w.htm">Web Applications</a></h2>
+ <ul>
+ <li><a href="mobile_w/sd_mw.htm">Mobile Web</a>
+ <ul>
+ <li><a href="mobile_w/appcalleecaller_mw.htm">AppCaller and AppCallee</a></li>
+ <li><a href="mobile_w/archivemanager_mw.htm">ArchiveManager</a></li>
+ <li><a href="mobile_w/bluetoothchat_mw.htm">BluetoothChat</a></li>
+ <li><a href="mobile_w/calculator_mw.htm">Calculator</a></li>
+ <li><a href="mobile_w/calendar_mw.htm">Calendar</a></li>
+ <li><a href="mobile_w/calllog_mw.htm">CallLog</a></li>
+ <li><a href="mobile_w/chatter_mw.htm">Chatter</a></li>
+ <li><a href="mobile_w/compass_mw.htm">Compass</a></li>
+ <li><a href="mobile_w/contactlist_mw.htm">ContactList</a></li>
+ <li><a href="mobile_w/contactsexchanger_mw.htm">ContactsExchanger</a></li>
+ <li><a href="mobile_w/downloadmanager_mw.htm">DownloadManager</a></li>
+ <li><a href="mobile_w/eventmanager_mw.htm">EventManager</a></li>
+ <li><a href="mobile_w/exerciseplanner_mw.htm">ExcercisePlanner</a></li>
+ <li><a href="mobile_w/filemanager_mw.htm">FileManager</a></li>
+ <li><a href="mobile_w/hellotizen_mw.htm">HelloTizen</a></li>
+ <li><a href="mobile_w/mediacontent_mw.htm">MediaContent</a></li>
+ <li><a href="mobile_w/moneybook_mw.htm">MoneyBook</a></li>
+ <li><a href="mobile_w/multiprocess_hybrid_package_mw.htm">Multi-project Hybrid Application</a>
+ <ul>
+ <li><a href="mobile_w/hybridwebapp_mw.htm">HybridWebApp</a></li>
+ </ul></li>
+ <li><a href="mobile_w/piano_mw.htm">Piano</a></li>
+ <li><a href="mobile_w/selfcamera_mw.htm">SelfCamera</a></li>
+ <li><a href="mobile_w/sensorball_mw.htm">SensorBall</a></li>
+ <li><a href="mobile_w/systeminfo_mw.htm">Systeminfo</a></li>
+ <li><a href="mobile_w/winset_mw.htm">TizenWinset</a></li>
+ <li><a href="mobile_w/touchpaint_mw.htm">TouchPaint</a></li>
+ </ul>
+ </li>
+ <li><a href="wearable_w/sd_ww.htm">Wearable Web</a>
+ <ul>
+ <li><a href="wearable_w/altimeter_ww.htm">Altimeter</a></li>
+ <li><a href="wearable_w/analogwatch_ww.htm">AnalogWatch</a></li>
+ <li><a href="wearable_w/appcalleecaller_ww.htm">AppCaller and AppCallee</a></li>
+ <li><a href="wearable_w/basicwatch_ww.htm">BasicWatch</a></li>
+ <li><a href="wearable_w/calculator_ww.htm">Calculator</a></li>
+ <li><a href="wearable_w/calendar_ww.htm">Calendar</a></li>
+ <li><a href="wearable_w/camera_ww.htm">Camera</a></li>
+ <li><a href="wearable_w/compass_ww.htm">Compass</a></li>
+ <li><a href="wearable_w/digitalwatch_ww.htm">DigitalWatch</a></li>
+ <li><a href="wearable_w/hellotizen_ww.htm">HelloTizen</a></li>
+ <li><a href="wearable_w/minigallery_ww.htm">MiniGallery</a></li>
+ <li><a href="wearable_w/moneybook_ww.htm">MoneyBook</a></li>
+ <li><a href="wearable_w/newsfeed_ww.htm">NewsFeed</a></li>
+ <li><a href="wearable_w/sensorball_ww.htm">SensorBall</a></li>
+ <li><a href="wearable_w/spinning_arrow_ww.htm">SpinningArrow</a></li>
+ <li><a href="wearable_w/stopwatch_ww.htm">StopWatch</a></li>
+ <li><a href="wearable_w/sunburnmonitor_ww.htm">SunburnMonitor</a></li>
+ <li><a href="wearable_w/touchpaint_ww.htm">TouchPaint</a></li>
+ <li><a href="wearable_w/voicerecorder_ww.htm">VoiceRecorder</a></li>
+ <li><a href="wearable_w/wearableuicomponents_ww.htm">WearableUIComponents</a></li>
+ <li><a href="wearable_w/worldclock_ww.htm">WorldClock</a></li>
+ </ul>
+ </li>
+ </ul>
+
+<h2><a href="sd_n.htm">Native Application</a></h2>
+ <ul>
+ <li><a href="mobile_n/sd_mn.htm">Mobile Native</a>
+ <ul>
+ <li><a href="mobile_n/bundle_sd_mn.htm">Bundle</a></li>
+ <li><a href="mobile_n/calculator_sd_mn.htm">Calculator</a></li>
+ <li><a href="mobile_n/contacts_sd_mn.htm">Contacts</a></li>
+ <li><a href="mobile_n/evas_gl_sd_mn.htm">Evas_GL</a></li>
+ <li><a href="mobile_n/file_manager_sd_mn.htm">File Manager</a></li>
+ <li><a href="mobile_n/glview11_cube_sd_mn.htm">GLView11Cube</a></li>
+ <li><a href="mobile_n/glview_cube_sd_mn.htm">GLViewCube</a></li>
+ <li><a href="mobile_n/glview_shader_sd_mn.htm">GLViewShader</a></li>
+ <li><a href="mobile_n/gps_consumer_sd_mn.htm">GPS Consumer</a></li>
+ <li><a href="mobile_n/gps_service_sd_mn.htm">GPS Service</a></li>
+ <li><a href="mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</a></li>
+ <li><a href="mobile_n/mediaapp_sd_mn.htm">Media App</a></li>
+ <li><a href="mobile_n/notificationmanager_sd_mn.htm">Notification Manager</a></li>
+ <li><a href="mobile_n/paint_sd_mn.htm">Paint</a></li>
+ <li><a href="mobile_n/pedometer_sd_mn.htm">Pedometer</a></li>
+ <li><a href="mobile_n/piano_sd_mn.htm">Piano</a></li>
+ <li><a href="mobile_n/preference_sd_mn.htm">Preference</a></li>
+ <li><a href="mobile_n/scheduler_sd_mn.htm">Scheduler</a></li>
+ <li><a href="mobile_n/scroller_index_sd_mn.htm">Scroller Index</a></li>
+ <li><a href="mobile_n/selfcamera_sd_mn.htm">SelfCamera</a></li>
+ <li><a href="mobile_n/sensorapp_sd_mn.htm">SensorApp</a></li>
+ <li><a href="mobile_n/simple_home_sd_mn.htm">Simple Homescreen</a></li>
+ <li><a href="mobile_n/taskmanager_sd_mn.htm">Taskmanager</a></li>
+ <li><a href="mobile_n/ui_components_sd_mn.htm">UI Components</a></li>
+ <li><a href="mobile_n/ui_alignment_sd_mn.htm">[UI Sample] Alignment</a></li>
+ <li><a href="mobile_n/ui_animation_sd_mn.htm">[UI Sample] Animation</a></li>
+ <li><a href="mobile_n/ui_animator_sd_mn.htm">[UI Sample] Animator</a></li>
+ <li><a href="mobile_n/ui_app_store_sd_mn.htm">[UI Sample] ApplicationStore</a></li>
+ <li><a href="mobile_n/ui_box_sd_mn.htm">[UI Sample] Box</a></li>
+ <li><a href="mobile_n/ui_calculator_sd_mn.htm">[UI Sample] Calculator</a></li>
+ <li><a href="mobile_n/ui_clock_sd_mn.htm">[UI Sample] Clock</a></li>
+ <li><a href="mobile_n/ui_ecore_thread_1_sd_mn.htm">[UI Sample] Ecore Thread 1</a></li>
+ <li><a href="mobile_n/ui_ecore_thread_2_sd_mn.htm">[UI Sample] Ecore Thread 2</a></li>
+ <li><a href="mobile_n/ui_ecore_thread_3_sd_mn.htm">[UI Sample] Ecore Thread 3</a></li>
+ <li><a href="mobile_n/ui_ecore_thread_4_sd_mn.htm">[UI Sample] Ecore Thread 4</a></li>
+ <li><a href="mobile_n/ui_ecore_thread_5_sd_mn.htm">[UI Sample] Ecore Thread 5</a></li>
+ <li><a href="mobile_n/ui_ecoreevent_sd_mn.htm">[UI Sample] EcoreEvent</a></li>
+ <li><a href="mobile_n/ui_edc_map_sd_mn.htm">[UI Sample] EDC Map</a></li>
+ <li><a href="mobile_n/ui_edc_format_sd_mn.htm">[UI Sample] EDCformat</a></li>
+ <li><a href="mobile_n/ui_elmtransit_sd_mn.htm">[UI Sample] Elm Transit</a></li>
+ <li><a href="mobile_n/ui_email_sd_mn.htm">[UI Sample] Email</a></li>
+ <li><a href="mobile_n/ui_evas_map_sd_mn.htm">[UI Sample] Evas Map</a></li>
+ <li><a href="mobile_n/ui_evas_map_mapping_sd_mn.htm">[UI Sample] Evas Map Mapping</a></li>
+ <li><a href="mobile_n/ui_evas_map_rotation_sd_mn.htm">[UI Sample] Evas Map Rotation</a></li>
+ <li><a href="mobile_n/ui_evasevent_sd_mn.htm">[UI Sample] Evas Event</a></li>
+ <li><a href="mobile_n/ui_gallery_sd_mn.htm">[UI Sample] Gallery</a></li>
+ <li><a href="mobile_n/ui_idler_sd_mn.htm">[UI Sample] Idler</a></li>
+ <li><a href="mobile_n/ui_image_sd_mn.htm">[UI Sample] Image</a></li>
+ <li><a href="mobile_n/ui_inlist_sd_mn.htm">[UI Sample] InList</a></li>
+ <li><a href="mobile_n/ui_job_sd_mn.htm">[UI Sample] Job</a></li>
+ <li><a href="mobile_n/ui_language_change_sd_mn.htm">[UI Sample] LanguageChange</a></li>
+ <li><a href="mobile_n/ui_layout_samples_sd_mn.htm">[UI Sample] LayoutSample</a></li>
+ <li><a href="mobile_n/ui_layout_signal_sd_mn.htm">[UI Sample] LayoutSignal</a></li>
+ <li><a href="mobile_n/ui_list_sd_mn.htm">[UI Sample] List</a></li>
+ <li><a href="mobile_n/ui_message_bubble_sd_mn.htm">[UI Sample] MessageBubble</a></li>
+ <li><a href="mobile_n/ui_proxy_object_sd_mn.htm">[UI Sample] Proxy Object</a></li>
+ <li><a href="mobile_n/ui_rectangle_sd_mn.htm">[UI Sample] Rectangle</a></li>
+ <li><a href="mobile_n/ui_relative_sd_mn.htm">[UI Sample] RelativePositioning</a></li>
+ <li><a href="mobile_n/ui_sns_sd_mn.htm">[UI Sample] SNS</a></li>
+ <li><a href="mobile_n/ui_setting_sd_mn.htm">[UI Sample] Setting</a></li>
+ <li><a href="mobile_n/ui_stringshare_sd_mn.htm">[UI Sample] StringShare</a></li>
+ <li><a href="mobile_n/ui_theme_extension_sd_mn.htm">[UI Sample] ThemeExtension</a></li>
+ <li><a href="mobile_n/ui_timer_sd_mn.htm">[UI Sample] Timer</a></li>
+ </ul>
+ </li>
+ <li><a href="wearable_n/sd_wn.htm">Wearable Native</a>
+ <ul>
+ <li><a href="wearable_n/circleuicomponents_sd_wn.htm">(Circle) UI Components</a></li>
+ <li><a href="wearable_n/rectuicomponents_sd_wn.htm">(Rectangle) UI Components</a></li>
+ <li><a href="wearable_n/circleemail_sd_wn.htm">(Circle) Email</a></li>
+ <li><a href="wearable_n/circlesettingtime_sd_wn.htm">(Circle) Setting Time</a></li>
+ <li><a href="wearable_n/circlesettings_sd_wn.htm">(Circle) Settings</a></li>
+ <li><a href="wearable_n/rectemail_sd_wn.htm">(Rectangle) Email</a></li>
+ <li><a href="wearable_n/rectsettings_sd_wn.htm">(Rectangle) Settings</a></li>
+ <li><a href="wearable_n/rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></li>
+ </ul>
+ </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>
+
+<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>Bundle Sample Overview</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"/></p>
+ </div>
+ <h1>Bundle Sample Overview</h1>
+
+<p>The Bundle sample demonstrates how to create and manipulate key-value data objects. In this application, a bundle object use example is shown for data exchange through a message port.</p>
+ <p>The following figure illustrates the main screens of the application.</p>
+ <p class="figure">Figure: Bundle application screens</p>
+ <p align="center">
+ <img alt="Plain data source view" src="../images/bundle_data_source_basic_view_sd.png" />
+ <img alt="Filled data source view" src="../images/bundle_data_source_filled_view_sd.png" />
+ <img alt="Data sink view" src="../images/bundle_data_sink_view_sd.png" />
+ </p>
+
+ <p>The sample application provides a user interface for:</p>
+ <ul>
+ <li>Creating a bundle object: 1 bundle object is created and filled with user-defined key-value pairs.</li>
+ <li>Sending a bundle object: the created bundle object is sent through a message port.</li>
+ </ul>
+ <p>The structure of the user interface is depicted in the following figures. EDJE layout scripts are used in the UI.</p>
+ <p id="ui-source-layout" class="figure">Figure: Bundle UI layout structure of the data source view</p>
+ <p align="center" id="ui-data-source-struct">
+ <img alt="Bundle UI layout structure" src="../images/bundle_general_edje_data_source_structure_sd.png" />
+ </p>
+ <p align="center">
+ <img alt="Bundle UI component structure" src="../images/bundle_data_source_layout_sd.png" />
+ </p>
+ <p id="ui-sink-layout" class="figure">Figure: Bundle UI layout structure of the data sink view</p>
+ <p align="center" id="ui-data-sink-struct">
+ <img alt="Bundle UI layout structure" src="../images/bundle_general_edje_data_sink_structure_sd.png" />
+ </p>
+ <p align="center">
+ <img alt="Bundle UI component structure" src="../images/bundle_data_sink_layout_sd.png" />
+ </p>
+ <p>The application workflow can be divided into the following logical pipelines:</p>
+ <ul>
+ <li>Bundle application startup</li>
+ <li>Bundle data creation</li>
+ <li>Bundle object sending</li>
+ <li>Bundle object receiving</li>
+ </ul>
+ <p>The following figure describes the workflow.</p>
+ <p id="workflow" class="figure">Figure: Bundle application workflow</p>
+ <p align="center">
+ <img alt="Application workflow - startup" src="../images/bundle_workflow_startup_sd.png"/>
+ <img alt="Application workflow - data creation" src="../images/bundle_workflow_data_creation_sd.png"/>
+ <img alt="Application workflow - object sending" src="../images/bundle_workflow_bundle_send_sd.png"/>
+ <img alt="Application workflow - object sending" src="../images/bundle_workflow_bundle_receive_sd.png"/>
+ <img alt="Application workflow - object structure" src="../images/bundle_workflow_object_structure_sd.png"/>
+ </p>
+
+
+<h2>Implementation</h2>
+
+<h3 id="type-defs">Type Definitions</h3>
+
+<p>The main data structure is used as a placeholder for the model and view data:</p>
+<pre class="prettyprint">
+typedef struct appdata
+{
+ // View module data
+ viewdata_s view;
+ // Model module data
+ modeldata_s model;
+} appdata_s;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">viewdata_s</span> structure contains references to all component objects created by the <a href="#view">View</a> module:</p>
+<pre class="prettyprint">
+typedef struct
+{
+ // The main window object
+ Evas_Object* win;
+ // The conformant object
+ Evas_Object* conform;
+ // The main window's layout object (embedded into the conform component)
+ Evas_Object* layout_main_panel;
+ // The toolbar object (embedded into the PART_MAIN_TOOLBAR part of
+ // the layout_main_panel object)
+ Evas_Object* main_toolbar;
+ // The data source item of the main_toolbar component
+ Elm_Object_Item *main_toolbar_item_data_source;
+ // The data sink item of the main_toolbar component
+ Elm_Object_Item *main_toolbar_item_data_sink;
+ // The data source view layout (embedded into the PART_MAIN_CONTENT part
+ // of the layout_main_panel object)
+ Evas_Object* layout_data_source;
+ // The data source edit panel layout (embedded into the PART_MAIN_CONTENT
+ // part of the layout_main_panel object)
+ Evas_Object* layout_data_source_edit;
+ // The key name entry component (embedded into the PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY
+ // part of the layout_data_source_edit object)
+ Evas_Object* data_source_key_entry;
+ // The value entry component (embedded into the PART_DATA_SOURCE_EDIT_PANEL_VALUE_PANEL_ENTRY
+ // part of the layout_data_source_edit object)
+ Evas_Object* data_source_value_entry;
+ // The value type selector component (embedded into the PART_DATA_SOURCE_EDIT_PANEL_TYPE_PANEL_ENTRY
+ // part of the layout_data_source_edit object)
+ Evas_Object* data_source_type_selector;
+ // The data source list panel layout (embedded into the PART_DATA_SOURCE_LIST_PANEL
+ // part of the layout_data_source object)
+ Evas_Object* layout_data_source_list;
+ // The header inclusion check component (embedded into the PART_DATA_SOURCE_LIST_PANEL_CHECKBOX
+ // part of the layout_data_source_list object)
+ Evas_Object* data_source_checkbox;
+ // The list component (embedded into the PART_DATA_SOURCE_LIST_PANEL_LIST part of the
+ // layout_data_source_list object)
+ Evas_Object* data_source_list;
+ // The data source buttons panel layout (embedded into the PART_DATA_SOURCE_BUTTONS_PANEL
+ // part of the layout_data_source object)
+ Evas_Object* layout_data_source_buttons;
+ // The "Send" button component (embedded into the PART_DATA_SOURCE_BUTTONS_PANEL_SEND
+ // part of the layout_data_source_buttons object)
+ Evas_Object* data_source_button_send;
+ // The "Add" button component (embedded into the PART_DATA_SOURCE_BUTTONS_PANEL_ADD
+ // part of the layout_data_source_buttons object)
+ Evas_Object* data_source_button_add;
+ // The data sink view layout (embedded into the PART_MAIN_CONTENT part of the
+ // layout_main_panel object)
+ Evas_Object* layout_data_sink;
+ // The message entry component (embedded into the PART_DATA_SINK_ENTRY part of the
+ // layout_data_sink object)
+ Evas_Object* sink_entry;
+} viewdata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">modeldata_s</span> structure contains a list of <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> items,
+where each of the <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structures contains data to be included in the bundle object. Additionally, the identifier of the message port for data receiving is declared.</p>
+<pre class="prettyprint">
+typedef struct _modeldata
+{
+ // The list that consists of bundledata_s(user input data: key name, value, value type)
+ Eina_List *items_list;
+ // The identifier of the local message port
+ int msg_port_rcv_id;
+} modeldata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structure is used as a list item of the <span style="font-family: Courier New,Courier,monospace">modeldata_s->items_list</span> structure:</p>
+<pre class="prettyprint">
+typedef struct _bundledata
+{
+ // The key name provided by the user
+ char *key;
+ // The value provided by the user
+ void *value;
+ // The value type selected by the user
+ bundle_value_type_t type;
+} bundledata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">bundle_value_type_t</span> is an enumeration type:</p>
+<pre class="prettyprint">
+typedef enum
+{
+ // Value type of the byte
+ BUNDLE_VALUE_TYPE_BYTE,
+ // Value type of the string
+ BUNDLE_VALUE_TYPE_STRING,
+ // Points to the end of the enumeration type
+ BUNDLE_VALUE_TYPE_MAX
+} bundle_value_type_t;
+</pre>
+
+<h3 id="app-init">Application Initialization</h3>
+
+<p>The entire application life-cycle is implemented in the <span style="font-family: Courier New,Courier,monospace">main.c</span> file, using the common Tizen application structure:</p>
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+ appdata_s ad = {{0,},};
+ // Declare and initialize the variables
+
+ 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;
+
+ // Assign the event handlers
+
+ ret = ui_app_main(argc, argv, &event_callback, &ad);
+ // Error handling
+
+ return ret;
+}
+</pre>
+<p>The Bundle sample application is implemented using the MVC design pattern. Its initialization is done within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> callback function where the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function is responsible for the application initialization. On the application termination, the <span style="font-family: Courier New,Courier,monospace">app_terminate()</span> callback function is called, and all the allocated resources are freed. For reference and more details,
+see <a href="#controller">Controller</a>.</p>
+<pre class="prettyprint">
+static bool
+app_create(void *data)
+{
+ // Assign the variables
+
+ appdata_s *ad = (appdata_s*)data;
+
+ return controller_initialization(&d->view, &ad->model);
+}
+
+static void
+app_terminate(void *data)
+{
+ appdata_s *ad = (appdata_s*)data;
+
+ controller_terminate(&ad->view, &ad->model);
+}
+</pre>
+
+<h3 id="view">View</h3>
+
+<p>The entire application layout is implemented using EDJE scripts. All top level swallows are designed for EFL Elementary component embedding. The following EDJE swallow - EFL Elementary component relations and assigned functionalities are used:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_MAIN_TOOLBAR-elm_toolbar</span>: Switches the view between the data source and the data sink.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY-elm_entry</span>: Key name edit field.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_EDIT_PANEL_VALUE_PANEL_ENTRY-elm_entry</span>: Value edit field.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_EDIT_PANEL_TYPE_PANEL_ENTRY-elm_spinner</span>: Sets the value type.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_LIST_PANEL_CHECKBOX-elm_check</span>: Prepends a custom header to the bundle object.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_LIST_PANEL_LIST-elm_genlist</span>: Displays the list of all key-value pairs to be added to the bundle object.
+ <p>The list item consists of:</p>
+ <ul>
+ <li>Key name and value displayed as <span style="font-family: Courier New,Courier,monospace">key: value</span></li>
+ <li>Type of the value displayed as <span style="font-family: Courier New,Courier,monospace">type: type-name</span></li>
+ </ul>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_BUTTONS_PANEL_ADD-elm_button</span>: Adds a key-value pair to the list.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_BUTTONS_PANEL_SEND-elm_button</span>: Creates a bundle object and sends it to the data sink.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">PART_DATA_SINK_ENTRY-elm_entry</span>: Displays the received data.</li>
+ </ul>
+<p> For more information, see also the <a href="#ui-source-layout">Bundle UI data source layout structure</a> and <a href="#ui-sink-layout">Bundle UI data sink layout structure</a> figures.</p>
+<p>The following code snippets create the application layout.</p>
+<table>
+ <caption>
+ Table: UI layout code snippets and figures
+ </caption>
+ <tr>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The main layout is defined in the <span style="font-family: Courier New,Courier,monospace">main.edc</span> file.</strong>
+ </td>
+ </tr>
+ <tr>
+ <td id="main-panel-layout">
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_MAIN;
+
+ parts
+ {
+ // The background part occupies the entire window
+ part
+ {
+ name: PART_MAIN_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to PART_MAIN_BACKGROUND
+ // The spacer occupies the entire area of PART_MAIN_BACKGROUND
+ // with a small margin all around
+ part
+ {
+ name: PART_MAIN_PANEL;
+ type: SPACER;
+ }
+
+ // The part is positioned in relation to PART_MAIN_PANEL
+ // The swallow occupies 6% of PART_MAIN_PANEL height
+ // It is designed to hold the elm_toolbar component
+ part
+ {
+ name: PART_MAIN_TOOLBAR;
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to PART_MAIN_PANEL
+ // The swallow occupies 93% of PART_MAIN_PANEL height
+ // It is designed to hold the data source/data sink layout
+ part
+ {
+ name: PART_MAIN_CONTENT;
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE main layout" src="../images/bundle_edje_layout_main_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> swallow is used as a container for:</strong>
+ <ul>
+ <li><strong>The <a href="#data-source-panel-layout">data source layout</a> defined in the <span style="font-family: Courier New,Courier,monospace">data_source.edc</span> file.</strong></li>
+ <li><strong>The <a href="#data-sink-panel-layout">data sink layout</a> defined in the <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> file.</strong></li>
+ </ul>
+ <p><strong>The data source and data sink layouts are switched by the toolbar item selection.</strong></p>
+ </td>
+ </tr>
+ <tr>
+ <td id="data-source-panel-layout">
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_DATA_SOURCE;
+
+ parts
+ {
+ // The part is positioned in relation to PART_MAIN_CONTENT
+ // from the main.edc file
+ // The rect plays a role of the background for the edit panel
+ // and occupies the entire area
+ // of the PART_MAIN_CONTENT
+ part
+ {
+ name: PART_DATA_SOURCE_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_BACKGROUND
+ // The swallow part occupies 40% height and 100% width of the
+ // PART_DATA_SOURCE_BACKGROUND
+ // It is designed to hold the data source edit layout defined in
+ // data_source_edit_panel.edc
+ part
+ {
+ name: PART_DATA_SOURCE_EDIT_PANEL;
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_BACKGROUND
+ // The swallow part occupies 50% height and 100% width of the
+ // PART_DATA_SOURCE_BACKGROUND
+ // It is designed to hold the data source list layout defined in
+ // data_source_list_panel.edc
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL;
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to the
+ // PART_DATA_SOURCE_BACKGROUND
+ // The swallow part occupies 10% height and 100% width of the
+ // PART_DATA_SOURCE_BACKGROUND
+ // It is designed to hold the data source buttons layout defined in
+ // data_source_buttons_panel.edc
+ part
+ {
+ name: PART_DATA_SOURCE_BUTTONS_PANEL;
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE data source layout" src="../images/bundle_edje_layout_data_source_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_EDIT_PANEL</span> swallow is used as a container for data edit (input) layout defined in the <span style="font-family: Courier New,Courier,monospace">data_source_edit_panel.edc</span> file (for more information, see <a href="#data-source-panel-layout">Data source panel layout</a>).</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_DATA_SOURCE_EDIT_PANEL;
+
+ parts
+ {
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_EDIT_PANEL from the data_source.edc file
+ // The rect plays a role of the background for the edit panel
+ // and occupies the entire area
+ // of the PART_DATA_SOURCE_EDIT_PANEL
+ part
+ {
+ name: PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND;
+ type: RECT;
+ }
+
+ // ----------=============== KEY NAME INPUT PANEL ===============----------
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND
+ // The swallow part occupies 33% height and 100% width of the
+ // PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND. It is designed to
+ // organize the key name editing area
+ part
+ {
+ name: PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL;
+ type: SPACER;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL
+ // The text part occupies 100% height and 33% width of the
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL
+ // This part is responsible for static text label display
+ // only ("Key name")
+ part
+ {
+ name: "data_source_edit_panel_key_panel_label";
+ type: TEXT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL
+ // The rect plays a role of a background for the elm_entry
+ // component. Its size is set to
+ // 70% width and 70% height of the
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL.
+ // This part is vertically aligned
+ part
+ {
+ name: PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY_BACKGROUND
+ // The swallow part occupies the entire area of the
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY_BACKGROUND
+ // It is designed to hold elm_entry component for key name input
+ part
+ {
+ name: PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY;
+ type: SWALLOW;
+ }
+
+ // ----------=============== VALUE INPUT PANEL ===============----------
+
+ // The layout of the PART_DATA_SOURCE_EDIT_PANEL_VALUE_PANEL
+ // part is exactly the same as the layout of the
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL part
+ // The only difference is that its vertical location is set
+ // to the 33% of PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND height
+ // For this reason, the source code is not listed here
+
+
+ // ----------=============== VALUE TYPE INPUT PANEL ===============----------
+
+ // The layout of the PART_DATA_SOURCE_EDIT_PANEL_TYPE_PANEL part
+ // is exactly the same as the layout of the
+ // PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL part
+ // There are only 2 differences:
+ // 1. Its height is set to 34% of the
+ // PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND height
+ // 2. Its vertical location is set to the 66% of the
+ // PART_DATA_SOURCE_EDIT_PANEL_BACKGROUND height
+ // For this reason, the source code is not listed here
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE data source edit layout" src="../images/bundle_edje_layout_data_source_edit_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_LIST_PANEL</span> swallow is used as a container for the data source list layout defined in the <span style="font-family: Courier New,Courier,monospace">data_source_list_panel.edc</span> file (for more information, see <a href="#data-source-panel-layout">Data source panel layout</a>).</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_DATA_SOURCE_LIST_PANEL;
+
+ parts
+ {
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_LIST_PANEL from the data_source.edc file
+ // The rect plays a role of the background for the list panel
+ // and occupies the entire area of the
+ // PART_DATA_SOURCE_LIST_PANEL
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_LIST_PANEL_BACKGROUND
+ // The spacer part occupies 15% height and 100% width of the
+ // PART_DATA_SOURCE_LIST_PANEL_BACKGROUND
+ // It is designed to organize bundle header inclusion checkbox area
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL;
+ type: SPACER;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ // The rect plays a role of a background for the elm_check component
+ // Its size is set to 9,7% width and 80% height of the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ // This part is vertically aligned. Its horizontal position is
+ // set to 60% width of the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ // The text part occupies 80% height and 60% width of the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ // This part is vertically aligned and is responsible for static
+ // text label display only ("Include bundle header")
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_LABEL;
+ type: TEXT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL.
+ // The swallow part occupies 80% height and 40% width of the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_PANEL
+ // It is aligned next to the right border of the
+ // PART_DATA_SOURCE_LIST_PANEL_CHECKBOX_LABEL and designed
+ // to hold the elm_check component for bundle header inclusion
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_CHECKBOX;
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_LIST_PANEL_BACKGROUND
+ // The swallow part occupies 100% width and 85% height of the
+ // PART_DATA_SOURCE_LIST_PANEL_BACKGROUND. It is aligned to the
+ // bottom border of the related part. It is designed to hold
+ // the elm_genlist component for input data display
+ part
+ {
+ name: PART_DATA_SOURCE_LIST_PANEL_LIST;
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE data source list layout" src="../images/bundle_edje_layout_data_source_list_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_BUTTONS_PANEL</span> swallow is used as a container for the data source buttons layout defined in the <span style="font-family: Courier New,Courier,monospace">data_source_buttons_panel.edc</span> file (for more information, see <a href="#data-source-panel-layout">Data source panel layout</a>).</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_DATA_SOURCE_BUTTONS_PANEL;
+
+ parts
+ {
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_BUTTONS_PANEL from data_source.edc file
+ // The rect plays a role of the background for the buttons
+ // panel and occupies the entire area of the
+ // PART_DATA_SOURCE_BUTTONS_PANEL
+ part
+ {
+ name: PART_DATA_SOURCE_BUTTONS_PANEL_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SOURCE_BUTTONS_PANEL_BACKGROUND
+ // The swallow part occupies 80% height and 46% width of the
+ // PART_DATA_SOURCE_BUTTONS_PANEL_BACKGROUND
+ // Its left border is set to 2% width of related container
+ // Vertically, the swallow is centered
+ // This part is designed to hold the elm_button component for input data
+ // addition to the data list
+ part
+ {
+ name: PART_DATA_SOURCE_BUTTONS_PANEL_ADD;
+ type: SWALLOW;
+ }
+
+ // The part relations and sizing are the same as described
+ // above, for PART_DATA_SOURCE_BUTTONS_PANEL_ADD part
+ // The only difference is the left border positioning,
+ // which is set to 52% width of the
+ // PART_DATA_SOURCE_BUTTONS_PANEL_BACKGROUND part
+ // This part is designed to hold the elm_button component for bundle
+ // sending
+ part
+ {
+ name: PART_DATA_SOURCE_BUTTONS_PANEL_SEND;
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE data source buttons layout" src="../images/bundle_edje_layout_data_source_buttons_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> swallow is used as a container for the data sink layout defined in the <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> file (for more information, see <a href="#main-panel-layout">Main panel layout</a>).</strong>
+ </td>
+ </tr>
+ <tr>
+ <td id="data-sink-panel-layout">
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_DATA_SINK;
+
+ parts
+ {
+ // The part is positioned in relation to PART_MAIN_CONTENT
+ // from main.edc file
+ // The rect plays a role of the background for the entry panel
+ // and occupies the entire area of the PART_MAIN_CONTENT
+ part
+ {
+ name: PART_DATA_SINK_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to
+ // PART_DATA_SINK_BACKGROUND
+ // The swallow part occupies the entire area of
+ // PART_DATA_SINK_BACKGROUND
+ // This part is designed to hold the elm_entry component for
+ // received data display
+ part
+ {
+ name: PART_DATA_SINK_ENTRY;
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="EDJE data sink layout" src="../images/bundle_edje_layout_data_sink_sd.png" />
+ </p>
+ </td>
+ </tr>
+</table>
+
+<p>Based on the layout defined with EDJE scripts, the application interface is created with the <span style="font-family: Courier New,Courier,monospace">view_base_gui_create()</span> function. The function takes 1 parameter, a pointer to the structure containing the view data. The <span style="font-family: Courier New,Courier,monospace">view_base_gui_create()</span> function is invoked in the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function called from the <span style="font-family: Courier New,Courier,monospace">app_create()</span> callback function. For the call stack details, see <a href="#app-init">Application Initialization</a>. The following code snippet presents the general steps in the user interface creation.</p>
+<pre class="prettyprint">
+bool
+view_base_gui_create(viewdata_s *vd)
+{
+ // The pointer to the viewdata_s structure is stored for future use
+ // The variable viewdata is declared globally in the scope of view.c file
+ viewdata = vd;
+
+ // Main panel view creation (window, conformant, main layout, toolbar)
+ if (!view_main_panel_create(vd))
+ {
+ // Error handling
+ }
+
+ // Data source view creation
+ if (!view_data_source_content_create(vd))
+ {
+ // Error handling
+ }
+
+ // Data sink view creation.
+ if (!view_data_sink_content_create(vd))
+ {
+ // Error handling
+ }
+
+ // The data source layout object is assigned to the data field of the
+ // "Data source" toolbar's item
+ // This layout object is used in view_toolbar_item_selected_cb() callback
+ // function to switch between the layouts depending on toolbar's item selection
+ elm_object_item_data_set(vd->main_toolbar_item_data_source, (void*)vd->layout_data_source);
+ elm_object_item_data_set(vd->main_toolbar_item_data_sink, (void*)vd->layout_data_sink);
+
+ // "Data source" tab is marked as selected (the view_toolbar_item_selected_cb()
+ // callback function is not called automatically)
+ elm_toolbar_item_selected_set(vd->main_toolbar_item_data_source, EINA_TRUE);
+
+ // Set the vd->layout_data_source object as the content of viewdata->layout_main_panel
+ // layout because the view_toolbar_item_selected_cb() callback function is not called
+ // when elm_toolbar_item_selected_set() is invoked
+ elm_object_part_content_set(viewdata->layout_main_panel, PART_MAIN_CONTENT, vd->layout_data_source);
+
+ evas_object_show(vd->win);
+
+ return true;
+}
+</pre>
+<p>The entire application view creation is triggered by the <span style="font-family: Courier New,Courier,monospace">view_base_gui_create()</span> function described above. The result of the succeeding subfunction invocations is depicted in the following table.</p>
+<table>
+<caption>
+ Table: Base view creation code snippets and figures
+ </caption>
+ <col width="25%"/>
+ <col width="50%"/>
+ <col width="25%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+ <tr>
+ <td>
+ <p>
+ <span style="font-family: Courier New,Courier,monospace">view_main_panel_create()</span>:</p>
+ <p>The main window and descendant conformant (<span style="font-family: Courier New,Courier,monospace">vd->win</span> and <span style="font-family: Courier New,Courier,monospace">vd->conform</span> respectively) are created and used as a placeholder for the main layout (<span style="font-family: Courier New,Courier,monospace">vd->layout_main_panel</span>).</p>
+ <p>The main layout is created with the <span style="font-family: Courier New,Courier,monospace">view_generic_layout_create_set()</span> function by loading the main group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">main.edj</span> file), then it is embedded into the <span style="font-family: Courier New,Courier,monospace">vd->layout_main_panel</span> container. Finally, the <span style="font-family: Courier New,Courier,monospace">view_layout_back_cb()</span> callback function is attached to the <span style="font-family: Courier New,Courier,monospace">vd->layout_main_panel</span> for the hardware <strong>Back</strong> button handling.</p>
+ <p>When the EDJE layout is successfully loaded, the <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> component can be created as a descendant of the main layout <span style="font-family: Courier New,Courier,monospace">vd->layout_main_panel</span>.</p>
+ <p>At the end, 2 items are appended to the newly created <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> component with the <span style="font-family: Courier New,Courier,monospace">view_toolbar_item_selected_cb()</span> callback function attached:</p>
+ <ul>
+ <li><a href="#ui-data-source">Data source</a></li>
+ <li><a href="#ui-data-sink">Data sink</a></li>
+ </ul>
+ <p>The <span style="font-family: Courier New,Courier,monospace">view_toolbar_item_selected_cb()</span> callback function is responsible for switching between the layout objects embedded to the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> swallow of the <span style="font-family: Courier New,Courier,monospace">vd->layout_main_panel</span>. Those layouts are defined in the <span style="font-family: Courier New,Courier,monospace">data_source.edc</span> and <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span> files.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_main_panel_create(viewdata_s *vd)
+{
+ vd->win = view_generic_window_create(view_win_delete_request_cb);
+ // Error handling
+
+ vd->conform = view_generic_conformant_create(vd->win);
+ // Error handling
+
+ vd->layout_main_panel = view_generic_layout_create_set(vd->conform,
+ EDJ_MAIN_FILE_NAME,
+ GROUP_MAIN,
+ NULL);
+ // Error handling
+ eext_object_event_callback_add(vd->layout_main_panel, EEXT_CALLBACK_BACK,
+ view_layout_back_cb, (void*)vd);
+
+ vd->main_toolbar = view_generic_toolbar_create(vd->layout_main_panel,
+ PART_MAIN_TOOLBAR);
+ // Error handling
+
+ vd->main_toolbar_item_data_source = elm_toolbar_item_append(vd->main_toolbar,
+ NULL,
+ "Data source",
+ view_toolbar_item_selected_cb,
+ NULL);
+ // Error handling
+
+ vd->main_toolbar_item_data_sink = elm_toolbar_item_append(vd->main_toolbar,
+ NULL,
+ "Data sink",
+ view_toolbar_item_selected_cb,
+ NULL);
+ // Error handling
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI main layout" src="../images/bundle_ui_layout_main_sd.png" />
+ </p>
+ </td>
+ </tr>
+ <tr>
+ <td id="ui-data-source">
+ <p><span style="font-family: Courier New,Courier,monospace">view_data_source_content_create()</span>:</p>
+ <p>The entire data source view is created by the data source layout loading from the <span style="font-family: Courier New,Courier,monospace">data_source.edj</span> file.</p>
+ <p>After the layout is loaded, the following subviews are created:</p>
+ <ul>
+ <li>Data source edit subview: <span style="font-family: Courier New,Courier,monospace">view_data_source_edit_create()</span></li>
+ <li>Data source list subview: <span style="font-family: Courier New,Courier,monospace">view_data_source_list_create()</span></li>
+ <li>Data source buttons subview: <span style="font-family: Courier New,Courier,monospace">view_data_source_buttons_create()</span></li>
+ </ul>
+ <p>The final layout is not inserted into the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span> as this operation is performed later, depending on toolbar item selection.</p>
+ <p>The side figure depicts the <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source</span> layout only.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_data_source_content_create(viewdata_s *vd)
+{
+ vd->layout_data_source = view_generic_layout_create(vd->layout_main_panel,
+ EDJ_DATA_SOURCE_FILE_NAME,
+ GROUP_DATA_SOURCE);
+ // Error handling
+
+ if (!view_data_source_edit_create(vd))
+ {
+ return false;
+ }
+
+ if (!view_data_source_list_create(vd))
+ {
+ return false;
+ }
+
+ if (!view_data_source_buttons_create(vd))
+ {
+ return false;
+ }
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI data source layout" src="../images/bundle_ui_layout_data_source_sd.png" />
+ </p>
+ </td>
+</tr>
+<tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">view_data_source_edit_create()</span>:
+ <p>The <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_edit</span> layout is created based on <span style="font-family: Courier New,Courier,monospace">data_source_edit_panel.edc</span>. The resulting layout is embedded into the <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_PANEL</span>.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">elm_entry</span> and <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> components are created next and inserted into the <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_edit</span> layout. The newly created components are used for the bundle key name input (value and type, respectively). The <span style="font-family: Courier New,Courier,monospace">elm_spinner</span> component is then filled with the values reflecting all the available types of the key's value.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_data_source_edit_create(viewdata_s *vd)
+{
+ // Error handling
+
+ vd->layout_data_source_edit = view_generic_layout_create_set(vd->layout_data_source,
+ EDJ_DATA_SOURCE_EDIT_PANEL_FILE_NAME,
+ GROUP_DATA_SOURCE_EDIT_PANEL,
+ PART_DATA_SOURCE_EDIT_PANEL);
+ // Error handling
+
+ vd->data_source_key_entry = view_generic_entry_create(vd->layout_data_source_edit,
+ PART_DATA_SOURCE_EDIT_PANEL_KEY_PANEL_ENTRY);
+ // Error handling
+
+ vd->data_source_value_entry = view_generic_entry_create(vd->layout_data_source_edit,
+ PART_DATA_SOURCE_EDIT_PANEL_VALUE_PANEL_ENTRY);
+ // Error handling
+
+ vd->data_source_type_selector = view_generic_spinner_create(vd->layout_data_source_edit,
+ PART_DATA_SOURCE_EDIT_PANEL_TYPE_PANEL_ENTRY);
+ // Error handling
+
+ elm_spinner_min_max_set(vd->data_source_type_selector, 0, (int)BUNDLE_VALUE_TYPE_MAX-1);
+
+ int i;
+ for (i = 0; i < BUNDLE_VALUE_TYPE_MAX; i++)
+ {
+ elm_spinner_special_value_add(vd->data_source_type_selector, i, bundletypes[i].caption);
+ }
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI data source edit layout" src="../images/bundle_ui_layout_data_source_edit_sd.png" /></p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">view_data_source_list_create()</span>:
+ <p>The <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_list</span> layout is created based on <span style="font-family: Courier New,Courier,monospace">data_source_list_panel.edc</span>. The resulting layout is embedded into the <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_LIST_PANEL</span>.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">elm_check</span> and the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> components are created next and inserted into the <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_list</span> layout. After the <span style="font-family: Courier New,Courier,monospace">elm_check</span> component is created, the <span style="font-family: Courier New,Courier,monospace">view_checkbox_changed_cb()</span> callback function is assigned to it in order to handle the component's state <span style="font-family: Courier New,Courier,monospace">change</span> event. For the implementation details of the <span style="font-family: Courier New,Courier,monospace">view_checkbox_changed_cb()</span> callback function, see <a href="#user-interaction">User Interaction</a>.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_data_source_list_create(viewdata_s *vd)
+{
+ // Error handling
+
+ vd->layout_data_source_list = view_generic_layout_create_set(vd->layout_data_source,
+ EDJ_DATA_SOURCE_LIST_PANEL_FILE_NAME,
+ GROUP_DATA_SOURCE_LIST_PANEL,
+ PART_DATA_SOURCE_LIST_PANEL);
+ // Error handling
+
+ vd->data_source_checkbox = view_generic_checkbox_create(vd->layout_data_source_list,
+ PART_DATA_SOURCE_LIST_PANEL_CHECKBOX,
+ "");
+ // Error handling
+ evas_object_smart_callback_add(vd->data_source_checkbox, "changed",
+ view_checkbox_changed_cb, (void*)vd);
+
+ vd->data_source_list = view_generic_genlist_create(vd->layout_data_source_list,
+ PART_DATA_SOURCE_LIST_PANEL_LIST);
+ // Error handling
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI data source list layout" src="../images/bundle_ui_layout_data_source_list_sd.png" /></p>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">view_data_source_buttons_create()</span>:
+ <p>The <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_buttons</span> layout is created based on <span style="font-family: Courier New,Courier,monospace">data_source_buttons_panel.edc</span>. The resulting layout is embedded into the <span style="font-family: Courier New,Courier,monospace">PART_DATA_SOURCE_BUTTONS_PANEL</span>.</p>
+ <p>The 2 <span style="font-family: Courier New,Courier,monospace">elm_button</span> components are created next and inserted into the <span style="font-family: Courier New,Courier,monospace">vd->layout_data_source_buttons</span> layout. To each of the buttons created (<span style="font-family: Courier New,Courier,monospace">vd->data_source_button_add</span>, <span style="font-family: Courier New,Courier,monospace">vd->data_source_button_send</span>), the relevant callback function is attached for handling the <span style="font-family: Courier New,Courier,monospace">click</span> event:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span>: handles input data adding to the list.</li>
+ <li><span style="font-family: Courier New,Courier,monospace">view_button_send_clicked_cb()</span>: handles bundle creation and sending through the message port.</li>
+ </ul>
+ <p>For the implementation details of the callback functions, see <a href="#user-interaction">User Interaction</a>.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_data_source_buttons_create(viewdata_s *vd)
+{
+ // Error handling
+
+ vd->layout_data_source_buttons = view_generic_layout_create_set(vd->layout_data_source,
+ EDJ_DATA_SOURCE_BUTTONS_PANEL_FILE_NAME,
+ GROUP_DATA_SOURCE_BUTTONS_PANEL,
+ PART_DATA_SOURCE_BUTTONS_PANEL);
+ // Error handling
+
+ vd->data_source_button_add = view_generic_button_create(vd->layout_data_source_buttons,
+ PART_DATA_SOURCE_BUTTONS_PANEL_ADD,
+ "Add",
+ view_button_add_clicked_cb,
+ (void*)vd);
+ // Error handling
+
+ vd->data_source_button_send = view_generic_button_create(vd->layout_data_source_buttons,
+ PART_DATA_SOURCE_BUTTONS_PANEL_SEND,
+ "Send",
+ view_button_send_clicked_cb,
+ (void*)vd);
+ // Error handling
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI data source button layout" src="../images/bundle_ui_layout_data_source_buttons_sd.png" /> </p>
+ </td>
+ </tr>
+ <tr>
+ <td id="ui-data-sink">
+ <span style="font-family: Courier New,Courier,monospace">view_data_sink_content_create()</span>:
+ <p>The <span style="font-family: Courier New,Courier,monospace">vd->layout_data_sink</span> layout is created based on <span style="font-family: Courier New,Courier,monospace">data_sink.edc</span>. The resulting layout is embedded into the <span style="font-family: Courier New,Courier,monospace">PART_MAIN_CONTENT</span>.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component is created next and inserted into the <span style="font-family: Courier New,Courier,monospace">vd->layout_data_sink</span> layout. The <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component plays the role of a non-editable text panel for the received messages display.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static bool
+view_data_sink_content_create(viewdata_s *vd)
+{
+ vd->layout_data_sink = view_generic_layout_create(vd->layout_main_panel,
+ EDJ_DATA_SINK_FILE_NAME,
+ GROUP_DATA_SINK);
+ // Error handling
+
+ vd->sink_entry = view_generic_entry_create(vd->layout_data_sink,
+ PART_DATA_SINK_ENTRY);
+ // Error handling
+
+ elm_entry_single_line_set(vd->sink_entry, EINA_FALSE);
+ elm_entry_editable_set(vd->sink_entry, EINA_FALSE);
+ elm_entry_scrollable_set(vd->sink_entry, EINA_TRUE);
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center">
+ <img alt="UI data sink layout" src="../images/bundle_ui_layout_data_sink_sd.png" /> </p>
+ </td>
+ </tr>
+
+</table>
+
+<h3 id="user-interaction">User Interaction</h3>
+
+<p>The interaction between the user and the sample application must follow the following scheme:</p>
+ <ul>
+ <li>Inputting data (key name, key value) and selecting the data type using the provided components.</li>
+ <li>Adding input data to the data list using the <strong>Add</strong> button. This action can be performed multiple times for different sets of input data.</li>
+ <li>Optionally selecting the bundle header for inclusion using the provided check component.</li>
+ <li>Bundling the data list and sending it to the data sink through a message port using the <strong>Send</strong> button.</li>
+ </ul>
+<p>After the message is successfully sent, the user can switch the view from the data source to the data sink, where the received data is printed in a text form.</p>
+
+<h4 id="data-input">Inputting Data and Adding to the List</h4>
+
+<p>Input data addition is triggered by the <strong>Add</strong> button click:</p>
+
+<ol><li>As a result of the button click, the <span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span> callback function is invoked.
+<pre class="prettyprint">
+static void
+view_button_add_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ viewdata_s *vd = (viewdata_s*)data;
+ bundledata_s *bundledata = NULL;
+
+ // Error handling
+
+ // Gather the input data and pack it to the bundledata_s structure
+ if (!view_input_data_to_bundledata(vd, &bundledata))
+ {
+ return;
+ }
+
+ // If the bundledata is successfully obtained, it is added to the data list
+ model_list_item_add(bundledata);
+
+ // Append the bundledata content to the elm_genlist component
+ view_genlist_item_append(bundledata);
+}
+</pre>
+</li>
+<li>Within the <span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span> callback function, the input data provided by the user is gathered from the UI and packed into the <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structure (<span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span>) which is then added to the data list using the <span style="font-family: Courier New,Courier,monospace">model_list_item_add()</span> function.
+<p>For the <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> type specification, see <a href="#type-defs">Type Definitions</a>.</p>
+
+<pre class="prettyprint">
+static bool
+view_input_data_to_bundledata(viewdata_s *vd, bundledata_s **bundledata)
+{
+ // Declare the variables
+
+ if (!view_input_data_get(vd, &key, &str_value, &value_type))
+ {
+ return false;
+ }
+
+ if (view_input_data_value_pointer_get(str_value, value_type, &ptr_value, &val_size))
+ {
+ *bundledata = model_bundledata_create(key, ptr_value, val_size, value_type);
+ }
+
+ free(key);
+ free(str_value);
+
+ return (*bundledata != NULL);
+}
+</pre>
+
+<p>Within the <span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span> function, the <span style="font-family: Courier New,Courier,monospace">view_input_data_get()</span> function acquires all necessary data from the user interface and performs its validation:</p>
+<pre class="prettyprint">
+static bool
+view_input_data_get(viewdata_s *vd, char **key, char **value, bundle_value_type_t *value_type)
+{
+ // Variable declaration, initialization, and error handling
+
+ *key = view_key_string_get(vd);
+ *value = view_value_string_get(vd);
+ *value_type = (bundle_value_type_t)view_type_index_get(vd);
+
+ // Check whether acquired data are valid in terms of pointers and value type range correctness
+ ret = (*key && *value && *value_type >= BUNDLE_VALUE_TYPE_BYTE && *value_type < BUNDLE_VALUE_TYPE_MAX);
+
+ if (!ret)
+ {
+ // Free the memory consumed by *key and *value
+ }
+
+ return ret;
+}
+</pre>
+<p>Within the <span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span> function, the <span style="font-family: Courier New,Courier,monospace">view_input_data_value_pointer_get()</span> function's implementation is also omitted. It converts the <span style="font-family: Courier New,Courier,monospace">str_value</span> string to the relevant data type, based on the <span style="font-family: Courier New,Courier,monospace">value_type</span> set by the user, and assigns it to the provided <span style="font-family: Courier New,Courier,monospace">ptr_value</span> of <span style="font-family: Courier New,Courier,monospace">void*</span> type. The size of the data, referenced by the <span style="font-family: Courier New,Courier,monospace">ptr_value</span>, is returned in the <span style="font-family: Courier New,Courier,monospace">val_size</span> parameter. When all the data (key, value reference, and value type) are successfully acquired, the <span style="font-family: Courier New,Courier,monospace">model_bundledata_create()</span> function is called to create the <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structure (for implementation details, see <a href="#model">Model</a>). Otherwise, the <span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span> function fails and frees all previously allocated memory.</p>
+
+<p>After the <span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span> function successfully returns and the <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structure is created, the <span style="font-family: Courier New,Courier,monospace">model_list_item_add()</span> function is invoked (refer to the <span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span> callback function) to store the structure for future use in a list of <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> items. For the implementation details of the <span style="font-family: Courier New,Courier,monospace">model_list_item_add()</span> function, see <a href="#model">Model</a>.</p>
+</li>
+<li>The obtained input data is appended to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> using the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_append()</span> function.
+<p>To access the UI components directly, 3 simple functions are used: <span style="font-family: Courier New,Courier,monospace">view_key_string_get()</span>, <span style="font-family: Courier New,Courier,monospace">view_value_string_get()</span>, <span style="font-family: Courier New,Courier,monospace">view_type_index_get()</span>. Due to the implementation simplicity of the mentioned functions, they are not listed here.</p>
+
+<pre class="prettyprint">
+static Elm_Object_Item*
+view_genlist_item_append(bundledata_s *bundledata)
+{
+ // Error handling
+
+ Elm_Genlist_Item_Class* itc = view_generic_genlist_item_class_create(view_genlist_item_label_get_cb, view_genlist_item_del_cb);
+ // Error handling
+
+ Elm_Object_Item *item = elm_genlist_item_append(viewdata->data_source_list, itc, (void*)bundledata,
+ NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ // Error handling
+
+ elm_genlist_item_bring_in(item, ELM_GENLIST_ITEM_SCROLLTO_TOP);
+
+ return item;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">view_generic_genlist_item_class_create()</span> function creates the genlist item class representing the visual style of all the items. The callback functions, passed as parameters (<span style="font-family: Courier New,Courier,monospace">view_genlist_item_label_get_cb()</span> and <span style="font-family: Courier New,Courier,monospace">view_genlist_item_del_cb()</span>), are used to control the display and release of the <span style="font-family: Courier New,Courier,monospace">bundledata</span> attached to the <span style="font-family: Courier New,Courier,monospace">itc</span> using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function.</p>
+<pre class="prettyprint">
+Elm_Genlist_Item_Class*
+view_generic_genlist_item_class_create(Elm_Genlist_Item_Text_Get_Cb on_text_get_cb, Elm_Genlist_Item_Del_Cb on_item_del_cb)
+{
+ static Elm_Genlist_Item_Class *itc = NULL;
+
+ if (!itc)
+ {
+ itc = elm_genlist_item_class_new();
+ // Error handling
+
+ itc->item_style = "double_label";
+ itc->func.text_get = on_text_get_cb;
+ // NULL value assignment to unused itc fields
+ itc->func.del = on_item_del_cb;
+ }
+
+ return itc;
+}
+</pre>
+<p>Within the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_append()</span> function, the <span style="font-family: Courier New,Courier,monospace">itc</span> class together with the previously created <span style="font-family: Courier New,Courier,monospace">bundledata_s</span> structure are passed as parameters to the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function. As a result, a new item representing the user input data is appended to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component. The <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> is scrolled so the newly appended item becomes visible (<span style="font-family: Courier New,Courier,monospace">elm_genlist_item_bring_in()</span>).</p></li></ol>
+
+<h4>Including the Bundle Header</h4>
+
+<p>The user can add 1 additional key-value pair to the bundle, representing the data header (refer to the Bundle object structure depicted in the <a href="#workflow">Bundle application workflow</a> figure). By checking the <strong>Include bundle header</strong> checkbox, the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component is updated with an additional item. The "real" header is added to the bundle object in the bundle creation phase (see <a href="#bundling-data">Bundling and Sending the Data List</a>). The <strong>Include bundle header</strong> checkbox state change results in the <span style="font-family: Courier New,Courier,monospace">view_checkbox_changed_cb()</span> callback function invocation.</p>
+
+<h4 id="bundling-data">Bundling and Sending the Data List</h4>
+
+<p>When the user clicks <strong>Send</strong>, the <span style="font-family: Courier New,Courier,monospace">view_button_send_clicked_cb()</span> callback is triggered and creates the bundle object (with respect to the state of the <strong>Include bundle header</strong> checkbox). Afterwards, the bundle is sent using a message port.</p>
+<pre class="prettyprint">
+static void
+view_button_send_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ // Error handling
+
+ viewdata_s *vd = (viewdata_s*)data;
+
+ // Obtain the state of the <strong>Include bundle header</strong> checkbox
+ bool include_header = (bool)elm_check_state_get(vd->data_source_checkbox);
+
+ // Bundle the bundledata_s structures created earlier and send them using a message port
+ controller_data_source_message_send(include_header);
+}
+</pre>
+<p>For the implementation details of the <span style="font-family: Courier New,Courier,monospace">controller_data_source_message_send()</span> function, see <a href="#controller-data-source">Data Source Controller</a>.</p>
+
+
+<h3 id="controller">Controller</h3>
+
+<p>The general Controller module handles the application initialization and termination procedures. For more information on the invocation context of the functions, see <a href="#app-init">Application Initialization</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function handles:</p>
+ <ul>
+ <li>Model data initialization: <span style="font-family: Courier New,Courier,monospace">model_data_create()</span> (see <a href="#model">Model</a>).</li>
+ <li>User interface creation: <span style="font-family: Courier New,Courier,monospace">view_base_gui_create()</span> (see <a href="#view">View</a>).</li>
+ <li>Data sink creation and initialization: <span style="font-family: Courier New,Courier,monospace">controller_data_sink_create()</span> (see <a href="#controller-data-sink">Data Sink Controller</a>).</li>
+ </ul>
+<p>If any of the above functions fail, the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function returns a failure status which closes the application.</p>
+<pre class="prettyprint">
+bool
+controller_initialization(viewdata_s *vd, modeldata_s *md)
+{
+ return (model_data_create(md) &&
+ view_base_gui_create(vd) &&
+ controller_data_sink_create());
+}
+</pre>
+<p>When the application is terminated, the <span style="font-family: Courier New,Courier,monospace">controller_terminate()</span> function is called. It is responsible for freeing all the allocated memory, deleting the user interface, and releasing the related resources. For more information about the used functions, see <a href="#controller-data-sink">Data Sink Controller</a>, <a href="#view">View</a>, and <a href="#model">Model</a>.</p>
+
+<pre class="prettyprint">
+void
+controller_terminate(viewdata_s *vd, modeldata_s *md)
+{
+ controller_data_sink_destroy();
+ view_base_gui_destroy(vd);
+ model_data_destroy(md);
+}
+</pre>
+
+<h4 id="controller-data-source">Data Source Controller</h4>
+
+<p>The data source controller module is responsible for data bundling and sending using a message port. The function triggering the entire process (<span style="font-family: Courier New,Courier,monospace">controller_data_source_message_send()</span>) is referenced in <a href="#bundling-data">Bundling and Sending the Data List</a>.</p>
+
+<ol><li>All user input data stored in a list is obtained simply by referencing the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> object, declared in the <a href="#model">Model</a> module, in the <span style="font-family: Courier New,Courier,monospace">model_data_list_get()</span> function.</li>
+<li>The empty bundle object is created with the <span style="font-family: Courier New,Courier,monospace">model_bundle_create()</span> function (for reference, see <a href="#model-bundle">Bundle Model</a>).</li>
+<li>The data addition to the bundle object starts with the <span style="font-family: Courier New,Courier,monospace">controller_data_source_bundle_header_create()</span> function call.
+<p>The function adds the <span style="font-family: Courier New,Courier,monospace">HEADER</span> key with 0 or 1 value to the <span style="font-family: Courier New,Courier,monospace">bundle_msg</span> bundle object. The 0 or 1 value is assigned depending on the <span style="font-family: Courier New,Courier,monospace">include_header</span> variable value. If the <span style="font-family: Courier New,Courier,monospace">include_header == 1</span>, the additional <span style="font-family: Courier New,Courier,monospace">HEADER_DATA</span> key is added to the <span style="font-family: Courier New,Courier,monospace">bundle_msg</span> bundle object. The value type of the <span style="font-family: Courier New,Courier,monospace">HEADER_DATA</span> key is an array of strings, where all the cells of the array are filled with key names defined by the user during the data input procedure (for reference, see <a href="#data-input">Inputting Data and Adding to the List</a>).</p></li>
+<li>To finalize the data addition process, all the user-defined key-value pairs are appended to the bundle object with the <span style="font-family: Courier New,Courier,monospace">controller_data_source_bundle_data_add()</span> function.</li>
+<li>Once the bundle object is successfully created and populated with the data, it is sent through the message port using the <span style="font-family: Courier New,Courier,monospace">model_message_port_message_send()</span> function (for reference, see <a href="#model-message-port">Message Port Model</a>).</li>
+<li>After the <span style="font-family: Courier New,Courier,monospace">bundle_msg</span> is sent, it is not needed anymore, so it can be deleted with the <span style="font-family: Courier New,Courier,monospace">model_bundle_destroy()</span> function (for reference, see <a href="#model-bundle">Bundle Model</a>).</li>
+</ol>
+
+
+<pre class="prettyprint">
+bool
+controller_data_source_message_send(bool include_header)
+{
+ Eina_List *bundle_data_list = NULL;
+ bundle *bundle_msg = NULL;
+
+ if (!model_data_list_get(&bundle_data_list))
+ {
+ return false;
+ }
+
+ if (!model_bundle_create(&bundle_msg))
+ {
+ return false;
+ }
+
+ if (!controller_data_source_bundle_header_create(&bundle_msg, include_header))
+ {
+ model_bundle_destroy(bundle_msg);
+
+ return false;
+ }
+
+ if (!controller_data_source_bundle_data_add(bundle_msg, bundle_data_list))
+ {
+ model_bundle_destroy(bundle_msg);
+
+ return false;
+ }
+
+ bool ret = model_message_port_message_send(bundle_msg);
+
+ model_bundle_destroy(bundle_msg);
+
+ return ret;
+}
+</pre>
+
+
+<p>The following table shows a bundle object structure preview example. Assume that the bundle contains 3 user-defined keys with the following values:</p>
+ <ul>
+ <li>Key name: "EX-STR-1", value: "exemplary-string-1", type: string</li>
+ <li>Key name: "EX-INT-2", value: 1, type: byte</li>
+ <li>Key name: "EX-STR-3", value: "exemplary-string-2", type: string</li>
+ </ul>
+<table>
+ <caption>Table: Bundle object data</caption>
+ <tr>
+ <th><strong><span style="font-family: Courier New,Courier,monospace">include_header == 0</span></strong></th>
+ <th><strong><span style="font-family: Courier New,Courier,monospace">include_header == 1</span></strong></th>
+ </tr>
+ <tr>
+ <td>
+<pre class="prettyprint">
+HEADER : 0
+EX-STR-1 : "exemplary-string-1"
+EX-INT-2 : 1
+EX-STR-3 : "exemplary-string-2"
+
+
+
+</pre>
+ </td>
+ <td>
+<pre class="prettyprint">
+HEADER : 1
+HEADER_DATA [0] : "EX-STR-1"
+ [1] : "EX-INT-2"
+ [2] : "EX-STR-3"
+EX-STR-1 : "exemplary-string-1"
+EX-INT-2 : 1
+EX-STR-3 : "exemplary-string-2"
+</pre>
+ </td>
+ </tr>
+</table>
+
+<p>The call-stack order of the function listing is preserved.</p>
+
+<pre class="prettyprint">
+static bool
+controller_data_source_bundle_header_create(bundle **bundle_obj, bool include_header)
+{
+ // Declare the variables
+
+ // Error handling
+
+ // Add the BUNDLE_HEADER_KEY with assigned value of "include_header" to the bundle object
+ if (!model_bundle_byte_add(bundle_obj, BUNDLE_HEADER_KEY, (int)include_header))
+ {
+ return false;
+ }
+
+ // If the user did not include the bundle header, the function returns
+ // Otherwise, the header data is appended
+ if (!include_header)
+ {
+ return true;
+ }
+
+ // Get all the user-defined key-value pairs in the form of a list containing bundledata_s structures
+ if (!model_data_list_get(&bundle_data_list))
+ {
+ return false;
+ }
+
+ items_count = eina_list_count(bundle_data_list);
+ if (items_count == 0)
+ {
+ return true;
+ }
+
+ // Create the array and fill it with the key names defined by the user
+ key_array = (char**)malloc(sizeof(char*) * items_count);
+ // Error handling
+
+ EINA_LIST_FOREACH(bundle_data_list, tmp, bundledata)
+ {
+ key_array[i] = strdup(bundledata->key);
+ i++;
+ }
+
+ // Add the created array of user-defined key names to the bundle object
+ bool ret = model_bundle_string_array_add(bundle_obj, BUNDLE_HEADER_DATA_KEY, key_array, items_count);
+
+ // Free the key_array's content and the array
+
+ return ret;
+}
+
+static bool
+controller_data_source_bundle_data_add(bundle *bundle_obj, Eina_List *bundle_data_list)
+{
+ // Declare the variables
+
+ // Error handling
+
+ // Append each list's item of type bundledata_s to the bundle object
+ EINA_LIST_FOREACH(bundle_data_list, tmp, bundledata)
+ {
+ controller_data_source_bundle_data_append(bundle_obj, bundledata);
+ }
+
+ return true;
+}
+
+static bool
+controller_data_source_bundle_data_append(bundle *bundle_obj, bundledata_s *bundledata)
+{
+ // Error handling
+
+ // Call the appropriate function depending on the key's value type (byte/string) to
+ // add the key-value pair to the bundle object
+ switch (bundledata->type)
+ {
+ case BUNDLE_VALUE_TYPE_BYTE:
+ if (!model_bundle_byte_add(&bundle_obj, bundledata->key, *((int*)bundledata->value)))
+ {
+ return false;
+ }
+ break;
+ case BUNDLE_VALUE_TYPE_STRING:
+ if (!model_bundle_string_add(&bundle_obj, bundledata->key, (char*)bundledata->value))
+ {
+ return false;
+ }
+ break;
+ default:
+ // Error handling
+ }
+
+ return true;
+}
+</pre>
+
+
+<h4 id="controller-data-sink">Data Sink Controller</h4>
+
+<p>The data sink controller module is responsible for the initialization and finalization of the communication channel using a message port and receiving messages. The data sink initialization function (<span style="font-family: Courier New,Courier,monospace">controller_data_sink_create()</span>) is invoked from the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function contained in the general <a href="#controller">Controller</a> module. Similarly, the finalization function (<span style="font-family: Courier New,Courier,monospace">controller_data_sink_destroy()</span>) is called from the <span style="font-family: Courier New,Courier,monospace">controller_terminate()</span> function contained in the same general Controller module.</p>
+<p>In the message port initialization procedure, a new communication channel is created with the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_message_received_cb()</span> callback function attached. When a new message arrives, the callback function is invoked and the received data passed in the callback.</p>
+
+<p>To create the data sink:</p>
+<pre class="prettyprint">
+bool
+controller_data_sink_create(void)
+{
+ // Check whether the message port already exists
+ if (model_message_port_exists_check())
+ {
+ return true;
+ }
+
+ // Create a new message port if it does not exist yet
+ return model_message_port_create(controller_data_sink_message_received_cb);
+}
+</pre>
+
+<p>To destroy the data sink and release the resources:</p>
+<pre class="prettyprint">
+bool
+controller_data_sink_destroy(void)
+{
+ // If the message port was never created, there is nothing to do
+ if (!model_message_port_exists_check())
+ {
+ return true;
+ }
+
+ // Close the communication channel and the message port
+ return model_message_port_destroy();
+}
+</pre>
+
+<p>When a new message arrives through the created message port, the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_message_received_cb()</span> callback function is invoked. The general approach of data extraction from the received bundle object is based on the knowledge about its structure (see the bundle object structure depicted in the <a href="#workflow">Bundle application workflow</a> figure). The workflow can be described with the following steps:</p>
+ <ol>
+ <li>Get the number of bundled items.</li>
+ <li>Get the value of <span style="font-family: Courier New,Courier,monospace">BUNDLE_HEADER_KEY</span>:
+ <ul>
+ <li>If the value of <span style="font-family: Courier New,Courier,monospace">BUNDLE_HEADER_KEY</span> equals 1, the data header is included and must be extracted using the <span style="font-family: Courier New,Courier,monospace">model_bundle_string_array_get()</span> function. As a result, the string array is returned.</li>
+ <li>If the value of <span style="font-family: Courier New,Courier,monospace">BUNDLE_HEADER_KEY</span> equals 0, the data header is not included.</li>
+ </ul>
+ </li>
+ <li>If the bundle data header exists, it is printed to the data sink view.</li>
+ <li>Bundle data enumeration is performed using the <span style="font-family: Courier New,Courier,monospace">model_bundle_foreach()</span> function with the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_bundle_foreach_cb()</span> callback function attached.</li>
+ </ol>
+
+<p>For the description of all model-related functions, see <a href="#model-bundle">Bundle Model</a>.</p>
+
+<pre class="prettyprint">
+static void
+controller_data_sink_message_received_cb(int local_port_id, const char *remote_app_id, const char *remote_port,
+ bool trusted_remote_port, bundle *message, void *user_data)
+{
+ // Declare the variables
+ // Error handling
+ // Print the initial message to the data sink view
+
+ // Obtain the number of items contained in received bundle object
+ if (model_bundle_count_get(message, &items_count))
+ {
+ // Format the text message
+ }
+
+ // Print the number of bundle items to the data sink view
+
+ // Get the value of BUNDLE_HEADER_KEY to verify the existence of the data header
+ if (!model_bundle_byte_get(message, BUNDLE_HEADER_KEY, &header_value))
+ {
+ return;
+ }
+
+ // Print the message to the data sink view
+
+ if ((bool)header_value)
+ {
+ // If the data header exists, the strings array value attached to the BUNDLE_HEADER_DATA_KEY is obtained
+ if (!model_bundle_string_array_get(message, BUNDLE_HEADER_DATA_KEY, &header_data, &header_size))
+ {
+ return;
+ }
+
+ // All strings contained in the header_data and attached to the BUNDLE_HEADER_DATA_KEY
+ // are enumerated and printed to the data sink view
+ }
+ else
+ {
+ // Print the message to the data sink view
+ }
+
+ // Print the message to the data sink view
+
+ // Bundled data item enumeration
+ if (!model_bundle_foreach(message, controller_data_sink_bundle_foreach_cb))
+ {
+ // Print the message to the data sink view
+ }
+}
+</pre>
+
+<p>Once the data header is decoded and extracted, the enumeration of data items starts (<span style="font-family: Courier New,Courier,monospace">model_bundle_foreach()</span>). For each bundled item, the <span style="font-family: Courier New,Courier,monospace">controller_data_sink_bundle_foreach_cb()</span> callback function is invoked.</p>
+
+<pre class="prettyprint">
+static void
+controller_data_sink_bundle_foreach_cb(const char *key, const int type, const bundle_keyval_t *kv, void *user_data)
+{
+ // Declare the variables and initialize
+
+ // If this callback function is invoked for any of the data header related keys
+ // (BUNDLE_HEADER_KEY, BUNDLE_HEADER_DATA_KEY), the function returns
+ if (controller_same_string_check(key, BUNDLE_HEADER_KEY) || controller_same_string_check(key, BUNDLE_HEADER_DATA_KEY))
+ {
+ return;
+ }
+
+ // Get the value's type of the enumerated bundle's item
+ if (model_bundle_keyval_type_get(kv, &value_type))
+ {
+ // The numeric type code is converted into the string name
+ }
+
+ // Get the value of the enumerated bundle's item
+ if (model_bundle_keyval_basic_val_get(kv, &value))
+ {
+ // Format the text message
+ }
+
+ // Print the message to the data sink view
+}
+</pre>
+
+<p>The following table shows the text printed to the data sink view in the case shown in <a href="#controller-data-source">Data Source Controller</a>.</p>
+<table>
+ <caption>Table: Text printed in the data sink view</caption>
+ <tr>
+ <th align="center"><strong><span style="font-family: Courier New,Courier,monospace">include_header == 0</span></strong></th>
+ <th align="center"><strong><span style="font-family: Courier New,Courier,monospace">include_header == 1</span></strong></th>
+ </tr>
+ <tr>
+ <td>
+<pre class="prettyprint">
+---=== MSG RECEIVED ===---
+Bundle items count: 4
+Header data:
+ - N/A
+Data:
+ - EX-STR-1 = exemplary-string-1 (string)
+ - EX-INT-2 = 1 (byte)
+ - EX-STR-3 = exemplary-string-2 (string)
+
+
+</pre>
+ </td>
+ <td>
+<pre class="prettyprint">
+---=== MSG RECEIVED ===---
+Bundle items count: 5
+Header data:
+ - Key: EX-STR-1 (string)
+ - Key: EX-INT-2 (byte)
+ - Key: EX-STR-3 (string)
+Data:
+ - EX-STR-1 = exemplary-string-1 (string)
+ - EX-INT-2 = 1 (byte)
+ - EX-STR-3 = exemplary-string-2 (string)
+</pre>
+ </td>
+ </tr>
+</table>
+
+
+<h3 id="model">Model</h3>
+
+<p>The general Model module deals directly with the application data. It is responsible for:</p>
+<ul>
+ <li>Model initialization and finalization</li>
+ <li>User data list handling</li>
+</ul>
+<p>In the initialization step, the <span style="font-family: Courier New,Courier,monospace">model_data_create()</span> function is invoked from the <span style="font-family: Courier New,Courier,monospace">controller_initialization()</span> function. The <span style="font-family: Courier New,Courier,monospace">model_data_destroy()</span> function is called in the application termination phase by the <span style="font-family: Courier New,Courier,monospace">controller_terminate()</span> function. For the call stack reference, see <a href="#controller">Controller</a>.</p>
+<p>To create the model:</p>
+<pre class="prettyprint">
+bool
+model_data_create(modeldata_s *md)
+{
+ // Error handling
+
+ // The pointer to the modeldata_s structure is locally stored
+ modeldata = md;
+
+ return true;
+}
+</pre>
+<p>To destroy the model and free the resources:</p>
+<pre class="prettyprint">
+void
+model_data_destroy(modeldata_s *md)
+{
+ // Error handling
+
+ // Free the content of the input data list
+ if (md->items_list)
+ {
+ md->items_list = eina_list_free(md->items_list);
+ }
+}
+</pre>
+
+<p>The user input data are added to the list with the <span style="font-family: Courier New,Courier,monospace">model_bundledata_create()</span> function referenced from the <span style="font-family: Courier New,Courier,monospace">view_input_data_to_bundledata()</span> function, which is called by the <span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span> callback function on the <strong>Add</strong> button press. For reference, see <a href="#data-input">Inputting Data and Adding to the List</a>.</p>
+
+<pre class="prettyprint">
+bundledata_s*
+model_bundledata_create(char *key, void *ptr_value, int val_size, bundle_value_type_t value_type)
+{
+ // Error handling
+
+ bundledata_s *bundledata = (bundledata_s*)malloc(sizeof(bundledata_s));
+ // Error handling
+
+ bundledata->key = strdup(key);
+ bundledata->value = (void*)malloc(val_size);
+ memcpy(bundledata->value, ptr_value, val_size);
+ bundledata->type = value_type;
+
+ return bundledata;
+}
+</pre>
+
+<p>Once the user input data structure (<span style="font-family: Courier New,Courier,monospace">bundledata_s</span> described in <a href="#type-defs">Type Definitions</a>) is created, it can be added to the list with the <span style="font-family: Courier New,Courier,monospace">model_list_item_add()</span> function and accessed with the <span style="font-family: Courier New,Courier,monospace">model_data_list_get()</span> function. The first function is invoked from the <span style="font-family: Courier New,Courier,monospace">view_button_add_clicked_cb()</span> callback function (see <a href="#data-input">Inputting Data and Adding to the List</a>) and the second one is called during the data bundling and sending procedure (<span style="font-family: Courier New,Courier,monospace">controller_data_source_message_send()</span> referenced in <a href="#controller-data-source">Data Source Controller</a>). The implementation of both functions is very simple and limited to proper <span style="font-family: Courier New,Courier,monospace">Eina_List</span> function invocations. For this reason, they are not listed here.</p>
+
+<h4 id="model-bundle">Bundle Model</h4>
+
+<p>The Bundle model module provides a set of wrapper functions for the Bundle API used by the <a href="#controller">Controller</a> module for the bundle management:</p>
+ <ul>
+ <li>Creating and removing the bundle object:
+ <pre class="prettyprint">
+bool
+model_bundle_create(bundle **bundle_obj)
+{
+ // Create the bundle object
+ *bundle_obj = bundle_create();
+ // Error handling
+
+ return true;
+}
+
+bool
+model_bundle_destroy(bundle *bundle_obj)
+{
+ // Free the bundle object
+ int ret = bundle_free(bundle_obj);
+ // Error handling
+
+ return true;
+}
+</pre>
+ </li>
+ <li>Extracting the information on bundled data:
+ <ul>
+ <li>Number of bundled items:
+ <pre class="prettyprint">
+bool
+model_bundle_count_get(bundle *bundle_obj, int *count)
+{
+ // The number of bundled items is acquired if the value returned is non-negative
+ // Otherwise, the error code is returned
+ *count = bundle_get_count(bundle_obj);
+ int ret = get_last_result();
+ // Error handling
+
+ return true;
+}
+</pre></li>
+ <li>Value type:
+ <pre class="prettyprint">
+bool
+model_bundle_type_get(bundle *bundle_obj, const char *key, int *type)
+{
+ // The type of the bundled item's value, assigned to the given key, is acquired if the value returned is non-negative
+ // Otherwise, the error code is returned
+ *type = bundle_get_type(bundle_obj, key);
+ int ret = get_last_result();
+ // Error handling
+
+ return true;
+}
+</pre></li>
+ </ul>
+ </li>
+ <li>Adding the data to the bundle with respect to its type:
+ <ul><li>
+ <p>String value:</p>
+<pre class="prettyprint">
+bool
+model_bundle_string_add(bundle **bundle_obj, const char *key, const char *value)
+{
+ // The string value assigned to the given key is added to the bundle
+ int ret = bundle_add_str(*bundle_obj, key, value);
+ // Error handling
+
+ return true;
+}
+</pre></li>
+<li>
+<p>Array of string values:</p>
+<pre class="prettyprint">
+bool
+model_bundle_string_array_add(bundle **bundle_obj, const char *key, char **value, int value_count)
+{
+ // Error handling
+
+ // The array of string values assigned to the given key is added to the bundle
+ int ret = bundle_add_str_array(*bundle_obj, key, (const char**)value, value_count);
+ // Error handling
+
+ return true;
+}
+</pre></li>
+<li>
+<p>Numerical value:</p>
+<pre class="prettyprint">
+bool
+model_bundle_byte_add(bundle **bundle_obj, const char *key, int value)
+{
+ // The numerical value assigned to the given key is added to the bundle
+ int ret = bundle_add_byte(*bundle_obj, key, &value, sizeof(value));
+ // Error handling
+
+ return true;
+}
+</pre></li></ul>
+
+</li>
+ <li>Extracting the bundled data with respect to its type:
+ <ul><li>
+ <p>Retrieve a string value:</p>
+<pre class="prettyprint">
+bool
+model_bundle_string_get(bundle *bundle_obj, const char *key, char **value)
+{
+ *value = NULL;
+
+ // The string value assigned to the given key is acquired from the bundle
+ int ret = bundle_get_str(bundle_obj, key, value);
+ // Error handling
+
+ return true;
+}
+</pre></li>
+<li>
+<p>Retrieve string array values:</p>
+<pre class="prettyprint">
+bool
+model_bundle_string_array_get(bundle *bundle_obj, const char *key, const char ***value, int *value_len)
+{
+ *value_len = 0;
+
+ // The string array value assigned to the given key is acquired from the bundle
+ *value = bundle_get_str_array(bundle_obj, key, value_len);
+ int ret = get_last_result();
+ // Error handling
+
+ return true;
+}
+</pre></li>
+<li>
+
+<p>Retrieve a numerical value:</p>
+<pre class="prettyprint">
+bool
+model_bundle_byte_get(bundle *bundle_obj, const char *key, int *value)
+{
+ *value = 0;
+
+ void *byte_val = NULL;
+ size_t size_val = 0;
+
+ // The numerical value assigned to the given key is acquired from the bundle in a form of void pointer
+ int ret = bundle_get_byte(bundle_obj, key, &byte_val, &size_val);
+ // Error handling
+
+ // Returned value referenced by the void pointer is copied to the variable of integer type
+ if (size_val > 0 && size_val <= sizeof(int))
+ {
+ *value = *((int*)byte_val);
+ }
+
+ return true;
+}
+</pre></li>
+<li>
+<p>Retrieve the value type:</p>
+<pre class="prettyprint">
+bool
+model_bundle_keyval_type_get(const bundle_keyval_t *kv, int *type)
+{
+ // The type of the bundled item's value is acquired
+ // This function is used within the callback function invoked by the bundle_foreach() function
+ // If the returned value is non-negative, it points to the value type. Otherwise, the error code is returned
+ *type = bundle_keyval_get_type((bundle_keyval_t*)kv);
+ int ret = get_last_result() ;
+ // Error handling
+
+ return true;
+}
+</pre></li>
+<li>
+<p>Retrieve the bundled value:</p>
+<pre class="prettyprint">
+bool
+model_bundle_keyval_basic_val_get(const bundle_keyval_t *kv, void **value)
+{
+ size_t value_size = 0;
+ // The bundled value is acquired. This function is used within the callback function invoked by the bundle_foreach() function
+ int ret = bundle_keyval_get_basic_val((bundle_keyval_t*)kv, value, &value_size);
+ // Error handling
+
+ return true;
+}
+</pre></li></ul>
+
+</li>
+ <li>Bundled item enumeration:
+ <pre class="prettyprint">
+bool
+model_bundle_foreach(bundle *bundle_obj, bundle_iterator_t func_cb)
+{
+ // Error handling
+
+ // Bundled items are enumerated and the func_cb callback function is called for each item contained in the bundle
+ bundle_foreach(bundle_obj, func_cb, NULL);
+
+ return true;
+}
+</pre></li>
+ </ul>
+
+
+<h4 id="model-message-port">Message Port Model</h4>
+
+<p>The message port model module provides a set of wrapper functions for the Message Port API used by the <a href="#controller-data-sink">Data Sink Controller</a> and <a href="#controller-data-source">Data Source Controller</a> modules:</p>
+ <ul>
+ <li>Create and remove the message port:
+<pre class="prettyprint">
+bool
+model_message_port_create(message_port_message_cb func_cb)
+{
+ // The local message port is registered with a func_cb callback function assigned
+ // The func_cb is called whenever a message is received
+ // If the returned value is non-negative, the message port is created successfully
+ // Otherwise, the ret value points to the error code
+ int ret = message_port_register_local_port(MESSAGE_PORT_RCV_NAME, func_cb, NULL);
+ // Error handling
+
+ // The identifier of a message port is stored
+ model_data_get()->msg_port_rcv_id = ret;
+
+ return true;
+}
+
+bool
+model_message_port_destroy(void)
+{
+ // The message port is unregistered based on its identifier
+ int ret = message_port_unregister_local_port(model_data_get()->msg_port_rcv_id);
+ // Error handling
+
+ // The identifier of a message port is cleared
+ model_data_get()->msg_port_rcv_id = 0;
+
+ return true;
+}
+</pre>
+ </li>
+ <li>Check the message port existence:
+<pre class="prettyprint">
+bool
+model_message_port_exists_check(void)
+{
+ // Check whether the message port identifier is non-negative
+ // If so, the message port exists
+ return (model_data_get()->msg_port_rcv_id > 0);
+}
+</pre> </li>
+ <li>Send the bundle object:
+<pre class="prettyprint">
+bool
+model_message_port_message_send(bundle *message)
+{
+ // The bundled message is sent over the message port previously created
+ int ret = message_port_send_message(PACKAGE, MESSAGE_PORT_RCV_NAME, message);
+ // Error handling
+
+ return 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>
\ 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>Calculator Sample Overview</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"/></p>
+ </div>
+
+ <h1>Calculator Sample Overview</h1>
+
+ <p>The Calculator sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a UI component hierarchy. It aims to explain how such an application can be developed using view and model parts.</p>
+<p>The sample 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 the view management, containers (such as <span style="font-family: Courier New,Courier,monospace">elm_grid</span> and <span style="font-family: Courier New,Courier,monospace">elm_table</span>) for UI component management inside the view, and UI components (such as <span style="font-family: Courier New,Courier,monospace">elm_bg</span>, <span style="font-family: Courier New,Courier,monospace">elm_button</span>, and <span style="font-family: Courier New,Courier,monospace">elm_label</span>) for the content inside view.</p>
+
+<p>The following figure illustrates the main screen of the Calculator (portrait and landscape), the wireframe structure, and the UI component tree. </p>
+
+ <p class="figure">Figure: Calculator screen</p>
+ <p align="center"><img alt="Calculator screen" src="../images/calculator_sd.png" /></p>
+ <p align="center"><img alt="Calculator screen" src="../images/calculator_wire.png" /></p>
+ <p align="center"><img alt="Calculator screen" src="../images/calculator_tree.png" /></p>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">_on_create_cb()</span> callback function initializes the application model and user interface.</p>
+
+<pre class="prettyprint">
+static Evas_Object *_add_naviframe(app_data *app)
+{
+ Evas_Object *result = NULL;
+ Evas_Object *parent = win_get_host_layout(app->win);
+ if (parent)
+ {
+ result = ui_utils_navi_add(parent, _navi_back_cb, app);
+ if (result)
+ {
+ win_set_layout(app->win, result);
+ }
+ }
+ return result;
+}
+
+static bool _on_create_cb(void *user_data)
+{
+ app_data *app = user_data;
+ RETVM_IF(!app, false, "ad is NULL");
+
+ result_type result = RES_OK;
+ app->model = calc_create(&result);
+ RETVM_IF(!app->model, false, "calc instance creation failed: %d", result);
+
+ app->win = win_create();
+ RETVM_IF(!app->win, false, "Window creation failed.");
+
+ app->navi = _add_naviframe(app);
+ RETVM_IF(!app->navi, false, "Naviframe creation failed.");
+
+ main_view_add(app);
+ return true;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">win_create()</span> function creates the window which consists of the indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>) and the background with a red color to easily see if the view does not have its own background component.</p>
+
+<pre class="prettyprint">
+window_obj *win_create()
+{
+ window_obj *obj = calloc(1, sizeof(window_obj));
+ RETVM_IF(!obj, NULL, "Cannot allocate memory");
+
+ obj->win = elm_win_add(NULL, APP_NAME, ELM_WIN_BASIC);
+ elm_win_wm_rotation_available_rotations_set(obj->win, AVAILABLE_ROTATIONS, AVAILABLE_ROTATIONS_LENGTH);
+ elm_win_conformant_set(obj->win, EINA_TRUE);
+ evas_object_show(obj->win);
+
+ obj->conform = elm_conformant_add(obj->win);
+ evas_object_size_hint_weight_set(obj->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(obj->win, obj->conform);
+ evas_object_show(obj->conform);
+
+ obj->bg = elm_bg_add(obj->conform);
+ elm_bg_color_set(obj->bg, WIN_FAIL_BG_COLOR);
+ evas_object_size_hint_weight_set(obj->bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(obj->bg);
+
+ elm_object_part_content_set(obj->conform, "elm.swallow.bg", obj->bg);
+
+ return obj;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">main_view_add()</span> function creates the main view layout and all its UI components and pushes itself to the naviframe. This function also registers the rotation change callback with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function, the callback on model display change with the <span style="font-family: Courier New,Courier,monospace">calc_set_display_change_cb()</span> function and the region format change callback by assigning a function pointer and data to the main application structure.</p>
+
+<pre class="prettyprint">
+void main_view_add(app_data *app)
+{
+ RETM_IF(!app, "app is NULL");
+
+ main_view_data *data = calloc(1, sizeof(main_view_data));
+ RETM_IF(!data, "Failed to allocate the instance");
+
+ result_type result = _main_view_init(data, app);
+ if (RES_OK != result)
+ {
+ _main_view_del(data);
+ }
+}
+
+result_type _main_view_init(main_view_data *data, app_data *app)
+{
+ RETVM_IF(!app->model, RES_ILLEGAL_ARGUMENT, "app->model is NULL");
+ RETVM_IF(!app->win, RES_ILLEGAL_ARGUMENT, "app->win is NULL");
+ RETVM_IF(!app->win->win, RES_ILLEGAL_ARGUMENT, "app->win->win is NULL");
+ RETVM_IF(!app->navi, RES_ILLEGAL_ARGUMENT, "app->navi is NULL");
+
+ data->app = app;
+ data->model = app->model;
+ data->window = app->win->win;
+ data->orientation = elm_win_rotation_get(data->window);
+
+ result_type result = RES_INTERNAL_ERROR;
+
+ result = _main_view_make_layout(data, app->navi);
+ RETVM_IF(RES_OK != result, result, "Failed to make layout: %d", result);
+
+ result = _main_view_make_widgets(data);
+ RETVM_IF(RES_OK != result, result, "Failed to make widgets: %d", result);
+
+ _main_view_repack_widgets(data);
+
+ Elm_Object_Item *navi_item = elm_naviframe_item_push(app->navi, STR_MAIN_TITLE, NULL, NULL, data->layout, NULL);
+ RETVM_IF(!navi_item, RES_OUT_OF_MEMORY, "Failed to push naviframe item");
+
+ evas_object_smart_callback_add(data->window, "wm,rotation,changed", _main_view_win_rotate_cb, data);
+ calc_set_display_change_cb(data->model, _main_view_display_changed_cb, data);
+ app->region_fmt_change_cb = _main_view_region_fmt_changed_cb;
+ app->region_fmt_change_cb_data = data;
+
+ return RES_OK;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_make_layout()</span> function creates the main view layout components:</p>
+<ul><li>Table: Holds other UI components and adds border padding around the view</li>
+<li>Grid: Positions all UI components on the view in a scalable manner</li>
+<li>Background: Colors the view with the default background color</li></ul>
+
+ <p class="figure">Figure: Calculator main view layout</p>
+ <p align="center"><img alt="Calculator main view layout" src="../images/calculator_main_view.png" /></p>
+
+<p>The view object is deleted when the main layout component (table) is deleted by its parent. The callback is registered using the <span style="font-family: Courier New,Courier,monospace">evas_object_event_callback_add()</span> function.</p>
+
+<pre class="prettyprint">
+result_type _main_view_make_layout(main_view_data *data, Evas_Object *parent)
+{
+ int scaled_border_padding = (int)utils_round(ELM_SCALE_SIZE(VIEW_BORDER_WIDTH));
+
+ // Create a single cell table so the internal grid can support padding
+ Evas_Object *layout = elm_table_add(parent);
+ RETVM_IF(!layout, RES_OUT_OF_MEMORY, "Failed to create elm_table");
+
+ data->layout = layout;
+ elm_table_homogeneous_set(layout, EINA_TRUE);
+ evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_event_callback_add(layout, EVAS_CALLBACK_FREE, _main_view_layout_free_cb, data);
+ evas_object_show(layout);
+
+ // Add a background to the view with the default theme color
+ Evas_Object *bg = elm_bg_add(layout);
+ RETVM_IF(!bg, RES_OUT_OF_MEMORY, "Failed to create elm_bg");
+
+ elm_table_pack(layout, bg, 0, 0, 1, 1);
+ evas_object_size_hint_align_set(bg, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(bg);
+
+ // Create a grid for holding and aligning the UI components
+ Evas_Object *grid = elm_grid_add(layout);
+ RETVM_IF(!grid, RES_OUT_OF_MEMORY, "Failed to create elm_grid");
+
+ data->grid = grid;
+ elm_table_pack(layout, grid, 0, 0, 1, 1);
+ evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_padding_set(grid,
+ scaled_border_padding, scaled_border_padding,
+ scaled_border_padding, scaled_border_padding);
+ evas_object_show(grid);
+
+ return RES_OK;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_make_widgets()</span> function creates all UI components (the display label and buttons), but does not pack them to the grid yet. For each UI component, a separate single cell table is created. This table is needed to add padding around a specific UI component, since the grid does not support padding for its elements.</p>
+<p>You can use a single table instead of a grid (without additional single cell tables), but the grid is more stable as it resizes all UI components in a single calculation and does not stretch if the UI components are too large. To handle button events, a smart <span style="font-family: Courier New,Courier,monospace">clicked</span> callback is registered with the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function.</p>
+
+<pre class="prettyprint">
+result_type _main_view_make_widgets(main_view_data *data)
+{
+ int scaled_widget_padding = (int)utils_round(ELM_SCALE_SIZE(WIDGET_PADDING));
+ int scaled_number_padding = (int)utils_round(ELM_SCALE_SIZE(DISP_NUMBER_RIGHT_PADDING));
+
+ int btn_idx = 0;
+ for (int i = 0; i < WIDGETS_COUNT; ++i)
+ {
+ const widget_params *params = &WIDGET_PARAMS[i];
+
+ // For each UI component in the grid cell, create an additional single cell table
+ // This allows adding paddings for UI components because grid does not support paddings
+ Evas_Object *table = elm_table_add(data->grid);
+ RETVM_IF(!table, RES_OUT_OF_MEMORY, "Failed to create elm_table");
+
+ data->widgets[i] = table; // Registering the UI component in the array to pack it to the grid later
+ elm_table_homogeneous_set(table, EINA_TRUE);
+ evas_object_show(table);
+
+ bool is_button = (CALC_KEY_NONE != params->key);
+ Evas_Object *obj = is_button ? elm_button_add(table) : elm_label_add(table);
+ RETVM_IF(!obj, RES_OUT_OF_MEMORY, "Failed to create widget object");
+
+ elm_table_pack(table, obj, 0, 0, 1, 1);
+
+ if (is_button)
+ {
+ RETVM_IF(BUTTONS_COUNT == btn_idx, RES_INTERNAL_ERROR, "Too many buttons in params!");
+
+ main_view_btn_data *btn_data = &data->btns_data[btn_idx];
+ ++btn_idx;
+ btn_data->view = data;
+ btn_data->key = params->key;
+ evas_object_smart_callback_add(obj, "clicked", _main_view_btn_click_cb, btn_data);
+
+ int text_size = (int)utils_round(ELM_SCALE_SIZE(((CALC_KEY_ERASE == params->key) ? ERASE_BTN_TEXT_SIZE : GENERAL_BTN_TEXT_SIZE)));
+
+ char buff[DISP_STR_SIZE] = {'\0'};
+ if (CALC_KEY_DEC == params->key)
+ {
+ snprintf(buff, DISP_STR_SIZE, params->text, text_size, calc_get_dec_point_str(data->model));
+ }
+ else
+ {
+ snprintf(buff, DISP_STR_SIZE, params->text, text_size);
+ }
+ elm_object_text_set(obj, buff);
+
+ evas_object_size_hint_align_set(obj, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_padding_set(obj,
+ scaled_widget_padding, scaled_widget_padding,
+ scaled_widget_padding, scaled_widget_padding);
+ }
+ else
+ {
+ data->label = obj;
+ _main_view_update_disp_label(data);
+ evas_object_size_hint_align_set(obj, 1, EO_ALIGN_HINT_CENTER);
+ evas_object_size_hint_padding_set(obj,
+ scaled_widget_padding, scaled_widget_padding + scaled_number_padding,
+ scaled_widget_padding, scaled_widget_padding);
+ }
+
+ evas_object_show(obj);
+ }
+
+ return RES_OK;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_repack_widgets()</span> function clears the grid from UI components (if any) and packs it again according to the current screen orientation.</p>
+
+<pre class="prettyprint">
+void _main_view_repack_widgets(main_view_data *data)
+{
+ // Remove all UI components from the grid without deleting
+ elm_grid_clear(data->grid, EINA_FALSE);
+
+ // Obtain the UI component position parameters and resize the grid according to the orientation
+ const widget_pos *pos_array = NULL;
+ if ((((abs(data->orientation) + CIRCLE_HALF_QUARTER_DEG) / CIRCLE_QUARTER_DEG) & 1) == 0)
+ {
+ pos_array = PORT_WPOS;
+ elm_grid_size_set(data->grid, PORT_GRID_W, PORT_GRID_H);
+ }
+ else
+ {
+ pos_array = LAND_WPOS;
+ elm_grid_size_set(data->grid, LAND_GRID_W, LAND_GRID_H);
+ }
+
+ // Packing UI components to the grid using information from the array
+ for (int i = 0; i < WIDGETS_COUNT; ++i)
+ {
+ elm_grid_pack(data->grid, data->widgets[i],
+ pos_array[i].x, pos_array[i].y,
+ pos_array[i].w, pos_array[i].h);
+ }
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_layout_free_cb()</span> function removes the view object from the memory when the main layout component is deleted by the parent.</p>
+
+<pre class="prettyprint">
+void _main_view_layout_free_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ main_view_data *view_data = data;
+ // NULL the layout so you do not delete it twice in _main_view_del()
+ view_data->layout = NULL;
+ // Delete self when layout is deleted by parent object
+ _main_view_del(view_data);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_display_changed_cb()</span> function handles the model display change event and updates the display label. The current display value is retrieved from the model using the <span style="font-family: Courier New,Courier,monospace">calc_get_display_str()</span> function. The label is updated with the <span style="font-family: Courier New,Courier,monospace">elm_object_text_set(</span>) function.</p>
+
+<pre class="prettyprint">
+void _main_view_display_changed_cb(void *data)
+{
+ _main_view_update_disp_label((main_view_data *)data);
+}
+
+void _main_view_update_disp_label(main_view_data *data)
+{
+ RETM_IF(!data->label, "label is NULL");
+
+ int text_size = (int)utils_round(ELM_SCALE_SIZE(DISP_NUMBER_TEXT_SIZE));
+
+ char buff[DISP_STR_SIZE] = {'\0'};
+ snprintf(buff, DISP_STR_SIZE, "<font_size=%d>%s</font_size>",
+ text_size, calc_get_display_str(data->model));
+ elm_object_text_set(data->label, buff);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_region_fmt_changed_cb()</span> function handles the device region format change event. Before the view update, call the <span style="font-family: Courier New,Courier,monospace">calc_update_region_fmt()</span> function to update the model. After this, the decimal point button text can be updated using the result of the <span style="font-family: Courier New,Courier,monospace">calc_get_dec_point_str()</span> function.</p>
+
+<pre class="prettyprint">
+void _main_view_region_fmt_changed_cb(void *data)
+{
+ _main_view_update_region_fmt((main_view_data *)data);
+}
+
+void _main_view_update_region_fmt(main_view_data *data)
+{
+ RETM_IF(!data->dec_btn, "dec_btn is NULL");
+
+ calc_update_region_fmt(data->model);
+
+ int text_size = (int)utils_round(ELM_SCALE_SIZE(GENERAL_BTN_TEXT_SIZE));
+
+ char buff[DISP_STR_SIZE] = {'\0'};
+ snprintf(buff, DISP_STR_SIZE, "<font_size=%d>%s</font_size>",
+ text_size, calc_get_dec_point_str(data->model));
+ elm_object_text_set(data->dec_btn, buff);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_main_view_btn_click_cb()</span> function handles the button clock event. The function is implemented mostly by calling the <span style="font-family: Courier New,Courier,monospace">calc_handle_key_press()</span> model function. The model method can generate the display change event described earlier.</p>
+
+<pre class="prettyprint">
+void _main_view_btn_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ main_view_btn_data *btn_data = data;
+ _main_view_handle_key_press(btn_data->view, btn_data->key);
+}
+
+void _main_view_handle_key_press(main_view_data *data, key_type key)
+{
+ result_type result = calc_handle_key_press(data->model, key);
+ if (RES_MAX_DIGITS_REACHED == result)
+ {
+ char msg[DISP_STR_SIZE] = {'\0'};
+ snprintf(msg, DISP_STR_SIZE, "<p align=center>"STR_POPUP_MAX_INPUT"</p>", DISP_MAX_DIGITS);
+ _main_view_create_msg_popup(data, msg);
+ }
+}</pre>
+
+<p>The computation logic of the application is implemented in a separate <span style="font-family: Courier New,Courier,monospace">calc.c</span> module. Before using the module, create the <span style="font-family: Courier New,Courier,monospace">calc</span> object using the <span style="font-family: Courier New,Courier,monospace">calc_create()</span> function. The <span style="font-family: Courier New,Courier,monospace">calc_handle_key_press()</span> function handles a specific calculator key specified by the <span style="font-family: Courier New,Courier,monospace">key_type</span> enumeration.</p>
+<p>Handling keys usually changes the calculator display string, which the <span style="font-family: Courier New,Courier,monospace">calc_get_display_str()</span> function can retrieve.</p>
+<p>To listen on display string change events, the application can register a callback using the <span style="font-family: Courier New,Courier,monospace">calc_set_display_change_cb()</span> function. By registering this callback, the view can avoid manual checking of the display string value after each key handling.</p>
+
+<pre class="prettyprint">
+// Create and initialize a calc object instance
+calc *calc_create(result_type *result);
+
+// Destroy and free the calc instance referenced
+void calc_destroy(calc *obj);
+
+// Register the callback to be invoked on display string change
+void calc_set_display_change_cb(calc *obj, notify_cb cb, void *cb_data);
+
+// Get current display string message
+const char *calc_get_display_str(calc *obj);
+
+// Handle calculator key press
+result_type calc_handle_key_press(calc *obj, key_type key);
+
+// Update region format dependent properties (decimal point character)
+void calc_update_region_fmt(calc *obj);
+
+// Get current decimal point character used by the object
+const char *calc_get_dec_point_str(calc *obj);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_calc</span> structure in the <span style="font-family: Courier New,Courier,monospace">calc.c</span> module defines the <span style="font-family: Courier New,Courier,monospace">calc</span> object structure. A pointer to this structure is passed to all functions of this module.</p>
+
+<pre class="prettyprint">
+// Internal data structure of the calc object
+struct _calc
+{
+ // Error flag to indicate critical failure and block computations until reset
+ bool error;
+
+ // Major state variables of the calculator
+ bool dirty; // In the middle of expression calculation
+ bool num_is_new; // Indicates that number in num register is new (entered by user of by unary function)
+ bool in_edit_mode; // Indicates that the user is entering number to the display
+ key_type op; // Current operation to apply to operands
+
+ // Calculator registers used in the computations
+ double num; // Corresponds to the number on display (not actual in edit mode)
+ double acc; // Left operand of the operation, stores the result of the operation
+ double rep; // Special repeat register, used to repeat last operation on result key
+
+ // Display object to handle I/O
+ display disp;
+
+ // 1 char string to hold current decimal point character
+ char dec_point_str[CALC_DEC_POINT_STR_SIZE];
+};</pre>
+
+<p>The following example shows how to implement the <span style="font-family: Courier New,Courier,monospace">calc.c</span> module functions:</p>
+
+<pre class="prettyprint">
+result_type calc_handle_key_press(calc *obj, key_type key)
+{
+ RETVM_IF(!obj, RES_INTERNAL_ERROR, "obj is NULL");
+
+ if (CALC_KEY_RESET == key)
+ {
+ _calc_reset(obj);
+ return RES_OK;
+ }
+
+ RETVM_IF(obj->error, RES_ILLEGAL_STATE, "Calculator is in error state");
+
+ result_type result = RES_INTERNAL_ERROR;
+
+ switch (key & CALC_KEY_TYPE_MASK)
+ {
+ case CALC_KEY_TYPE_NUM:
+ result = _calc_handle_num_key(obj, key);
+ break;
+ case CALC_KEY_TYPE_OP:
+ result = _calc_handle_op_key(obj, key);
+ break;
+ default:
+ result = _calc_handle_etc_key(obj, key);
+ break;
+ }
+
+ if (RES_OK != result)
+ {
+ _calc_handle_error(obj, result);
+ return result;
+ }
+ return RES_OK;
+}
+
+result_type _calc_handle_etc_key(calc *obj, key_type key)
+{
+ switch (key)
+ {
+ case CALC_KEY_RESULT:
+ return _calc_handle_result_key(obj);
+ case CALC_KEY_SIGN:
+ return _calc_handle_sign_key(obj);
+ case CALC_KEY_ERASE:
+ return _calc_handle_erase_key(obj);
+ default:
+ return RES_ILLEGAL_ARGUMENT;
+ }
+}
+
+result_type _calc_handle_num_key(calc *obj, key_type key)
+{
+ bool reset = false;
+ if (!obj->in_edit_mode)
+ {
+ obj->in_edit_mode = true;
+ reset = true;
+ }
+ return display_enter_key(&obj->disp, key, reset);
+}
+
+result_type _calc_handle_op_key(calc *obj, key_type key)
+{
+ switch (key)
+ {
+ case CALC_KEY_ADD:
+ case CALC_KEY_SUB:
+ case CALC_KEY_MUL:
+ case CALC_KEY_DIV:
+ break;
+ default:
+ return RES_ILLEGAL_ARGUMENT;
+ }
+
+ _calc_end_edit_mode(obj);
+
+ result_type result = RES_OK;
+
+ if (!obj->dirty)
+ {
+ obj->dirty = true;
+ obj->acc = obj->num;
+ }
+ else if (obj->num_is_new)
+ {
+ result = _calc_perform_op(obj, obj->num);
+ }
+
+ obj->num_is_new = false;
+ obj->op = key;
+
+ return result;
+}
+
+result_type _calc_handle_result_key(calc *obj)
+{
+ _calc_end_edit_mode(obj);
+
+ if (obj->dirty)
+ {
+ obj->dirty = false;
+ obj->rep = obj->num;
+ }
+ else if (obj->num_is_new)
+ {
+ obj->acc = obj->num;
+ }
+
+ obj->num_is_new = false;
+
+ return _calc_perform_op(obj, obj->rep);
+}
+
+result_type _calc_handle_sign_key(calc *obj)
+{
+ if (obj->in_edit_mode)
+ {
+ display_negate(&obj->disp);
+ }
+ else
+ {
+ _calc_perform_negate_func(obj);
+ }
+ return RES_OK;
+}
+
+result_type _calc_handle_erase_key(calc *obj)
+{
+ RETVM_IF(!obj->in_edit_mode, RES_ILLEGAL_STATE, "Not in edit mode");
+
+ return display_erase(&obj->disp);
+}
+
+void _calc_end_edit_mode(calc *obj)
+{
+ if (obj->in_edit_mode)
+ {
+ obj->in_edit_mode = false;
+ obj->num = display_get_number(&obj->disp);
+ obj->num_is_new = true;
+ // This removes extra chars from the current display (for example: 2.300 -> 2.3; -0.0 -> 0)
+ display_set_number(&obj->disp, obj->num);
+ }
+}
+
+result_type _calc_perform_op(calc *obj, double rv)
+{
+ switch (obj->op)
+ {
+ case CALC_KEY_ADD:
+ obj->acc += rv;
+ break;
+ case CALC_KEY_SUB:
+ obj->acc -= rv;
+ break;
+ case CALC_KEY_MUL:
+ obj->acc *= rv;
+ break;
+ case CALC_KEY_DIV:
+ if (fabs(rv) <= CALC_ZERO_EPS)
+ {
+ return ((fabs(obj->acc) <= CALC_ZERO_EPS) ? RES_UNDEFINED_VALUE : RES_DIVISION_BY_ZERO);
+ }
+ obj->acc /= rv;
+ break;
+ default:
+ return RES_INTERNAL_ERROR;
+ }
+
+ result_type result = display_set_number(&obj->disp, obj->acc);
+ RETVM_IF(RES_OK != result, result, "Failed to set display number: f", obj->acc);
+
+ // Get number back from display to get rounded value
+ obj->num = display_get_number(&obj->disp);
+ obj->acc = obj->num;
+
+ return RES_OK;
+}
+
+void _calc_perform_negate_func(calc *obj)
+{
+ if (0.0 != obj->num)
+ {
+ obj->num = -obj->num;
+ (void)display_set_number(&obj->disp, obj->num);
+ }
+ obj->num_is_new = true;
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">disp.c</span> module handles user number input and rounds calculation results in a string representation. This module contains the following functions:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">display_reset()</span> function resets the display to the initial state (<span style="font-family: Courier New,Courier,monospace">0</span>).</li>
+<li><span style="font-family: Courier New,Courier,monospace">display_set_number()</span> function is used to set a number to the display after the computations in the model. The number is rounded and converted to a string.</li>
+<li><span style="font-family: Courier New,Courier,monospace">display_get_number()</span> function converts a string number on the display to a double value.</li>
+<li><span style="font-family: Courier New,Courier,monospace">display_enter_key()</span> and <span style="font-family: Courier New,Courier,monospace">display_erase()</span> functions are used to edit a number in the display.</li>
+<li><span style="font-family: Courier New,Courier,monospace">display_negate()</span> function adds or removes a negative sign on the non-zero number on the display. If the number is zero, this function does nothing. </li>
+<li><span style="font-family: Courier New,Courier,monospace">display_set_str()</span> function is used in special cases to set an error message to the display of the calculator. After this function, the display must be reset to work properly.</li></ul>
+
+<pre class="prettyprint">
+// Data structure of the display object
+typedef struct
+{
+ char str[DISP_STR_SIZE]; // String buffer of the display
+ int len; // Length of the string in the buffer
+ int dig_count; // Count of decimal digits in the string
+ bool is_neg; // Is number in the string negative
+ bool has_dec_point; // Does number in the string contain decimal point
+
+ notify_cb change_cb; // Callback to be invoked on display string change
+ void *change_cb_data; // Data pointer for the callback
+
+ char dec_point_char; // Current decimal point character used by the display
+} display;
+
+// Reset display to "0"
+void display_reset(display *obj);
+
+// Set new decimal pointer character to use
+void display_set_dec_point_char(display *obj, char new_dec_point_char);
+
+// Set double value number to the display
+result_type display_set_number(display *obj, double value);
+
+// Get number from display as double value
+double display_get_number(display *obj);
+
+// Process number key category to enter new characters to display
+result_type display_enter_key(display *obj, key_type key, bool reset);
+
+// Erase last entered character
+result_type display_erase(display *obj);
+
+// Negate number on display
+void display_negate(display *obj);
+
+// Set string message to display
+void display_set_str(display *obj, const char *new_str);</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
--- /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>Contacts Sample Overview</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"/></p>
+ </div>
+
+ <h1>Contacts Sample Overview</h1>
+
+<p>The Contacts sample application demonstrates how you can manage contacts using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts API</a>. The source code shows how to use the contacts database for creating and deleting contacts, making contacts favorites, viewing and changing contact information, creating and deleting contacts categories, adding contacts to categories, and viewing the favorites list.</p>
+<p>The following figure illustrates the main screens of the application.</p>
+ <p class="figure">Figure: Contacts main views</p>
+ <p align="center"><img alt="Contacts main views" src="../images/contacts.png" /> </p>
+
+<p>The application opens with the <strong>Contacts</strong> screen, which displays a list of existing contacts. On the screen:</p>
+<ul>
+<li>To create a new contact, click <strong>Create</strong>, fill in the contact details, and click <strong>Save</strong>. To select the address book into which the new contact is added, click <strong>></strong>.</li>
+<li>To view the details of a contact, click the contact in the list. The detail screen displays the contact details. On this screen:
+<ul>
+ <li>To edit an existing contact, click <strong>Edit</strong>.</li>
+ <li>To delete the contact, click <strong>Delete</strong>.</li>
+ <li>To change the favorite status of the contact, click <strong>Fav</strong> on the top-right corner.</li>
+ </ul></li>
+<li>To view the category list of the default address book, press the device menu key, and click <strong>Categories</strong>. On the <strong>Categories</strong> screen, you can view the members of the existing category by clicking the category, or add new categories by clicking <strong>Create</strong>. After clicking a category, the category member screen opens. On this screen:
+ <ul>
+ <li>To add a new member to the category, click <strong>Add Member</strong>.</li>
+ <li>To remove a member from the category, click <strong>Remove Member</strong>.</li>
+ <li>To delete the category, click <strong>Delete</strong>.</li>
+ </ul>
+ </li>
+<li>To view the favorite persons list, press the device menu key, and click <strong>Favorites</strong>.</li>
+</ul>
+
+<p>The application uses the <span style="font-family: Courier New,Courier,monospace">contacts-svc</span> module to work with the contacts database and the <span style="font-family: Courier New,Courier,monospace">elementary</span> module to support the UI requirements.</p>
+
+<p>You must declare the following privileges in the application manifest file to be able to execute the application:</p>
+<pre class="prettyprint"><privilege>http://tizen.org/privilege/contact.write</privilege>
+<privilege>http://tizen.org/privilege/contact.read</privilege></pre>
+
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table>
+<caption>Table: Source files</caption>
+<tbody>
+<tr>
+ <th>Category</th>
+ <th>File name</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td rowspan="2">General</td>
+ <td><span style="font-family: Courier New,Courier,monospace">main.c</span></td>
+ <td>Provides the entry point in the application. Initializes application main data.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">main-app.c</span></td>
+ <td>Provides the implementation for Tizen main callbacks. Launches the creation of the window and navigation bar.</td>
+</tr>
+<tr>
+ <td rowspan="5">Model</td>
+ <td><span style="font-family: Courier New,Courier,monospace">common.c</span></td>
+ <td>Provides common utilities for the application, such as work with strings or conversion of time.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">contact-details.c</span></td>
+ <td>Provides functions to toggle favorite flags or get the favorite status for a contact.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">create-group.c</span></td>
+ <td>Provides functions to simplify group creation.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">edit-contact.c</span></td>
+ <td>Provides functions to simplify the contact creation process: for construction and destruction of contact structures, getting values from the database, and saving the contact.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">group-edit-member.c</span></td>
+ <td>Provides functions for adding members to a group, to remove members from a group, to get contacts in a group.</td>
+</tr>
+<tr>
+ <td rowspan="3">Model/Contacts-utils</td>
+ <td><span style="font-family: Courier New,Courier,monospace">contacts-db-utils.c</span></td>
+ <td>Provides functions to connect to the database, to disconnect from the database, and to check the connection status.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">contacts-list-utils.c</span></td>
+ <td>Provides useful functions to work with the contacts list, database queries, and filters. Hides the complexity of the work with the database.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">contact-record-utils.c</span></td>
+ <td>Provides functions to work with records. Hides the complexity of the work with the database.</td>
+</tr>
+<tr>
+ <td rowspan="2">Utils</td>
+ <td><span style="font-family: Courier New,Courier,monospace">logger.c</span></td>
+ <td>Provides functions to log information through the application.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ui-utils.c</span></td>
+ <td>Provides functions to create a navigation bar, layout, toolbar, and popup buttons.</td>
+</tr>
+<tr>
+ <td rowspan="9">View</td>
+ <td><span style="font-family: Courier New,Courier,monospace">contact-details-view.c</span></td>
+ <td>Provides functions to create the <strong>Contact details</strong> view. The file contains code that retrieves the contact information and shows it in the genlist.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">create-group-view.c</span></td>
+ <td>Provides functions to create the <strong>Create group</strong> view. The file contains code that creates a new group in the database with a specific name.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">edit-contact-view.c</span></td>
+ <td>Provides functions to create the <strong>Edit contact</strong> view. The file contains code to retrieve contact information from the database, to show and edit the information, to delete or save the contact.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">favourites-view.c</span></td>
+ <td>Provides functions to create the <strong>Favorite contacts</strong> view. The file contains code that gets the favorite contacts and shows the information in a list.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">group-details-view.c</span></td>
+ <td>Provides functions to create the <strong>Group details</strong> view. The file contains code to get and show group details and to remove the group.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">group-edit-member-view.c</span></td>
+ <td>Provides functions to create the <strong>Edit group member</strong> view. The file contains code to add members to the group and to remove members from the group.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">group-list-view.c</span></td>
+ <td>Provides functions to create the <strong>Groups list</strong> view. The file contains code to create a list of groups saved on the device, to set up the callback on click on group, to move to the <strong>Group details</strong> or <strong>Create group</strong> views.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">person-list-view.c</span></td>
+ <td>Provides functions to create the <strong>Contacts list</strong> view. The file contains code to create a list of contacts, to set up a callback on click on contact, to set up a callback for the menu key and to move to the <strong>Categories list</strong> or <strong>Favorites list</strong> views.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">window.c</span></td>
+ <td>Provides functions to create or destroy the main application window and to set the host layout.</td>
+</tr>
+</tbody>
+</table>
+
+<h2>Displaying and Retrieving Contacts</h2>
+
+
+ <p class="figure">Figure: Contacts and favorites</p>
+ <p align="center"> <img alt="Contacts and favorites" src="../images/contacts_favorites.png" /> </p>
+
+<p>To display contacts:</p>
+<ol>
+<li>Initialize the application by creating the window, naviframe and the <strong>Person list</strong> view.
+<pre class="prettyprint">
+static bool _app_create_cb(void *user_data)
+{
+ app_data *ad = user_data;
+ RETVM_IF(NULL == ad, false, "ad is null");
+
+ ad->win = win_create();
+ RETVM_IF(NULL == ad->win, false, "win is null");
+
+ ad->navi = _app_navi_add(ad);
+ RETVM_IF(NULL == ad->navi, false, "navi is null");
+
+ sc_plist_view_add(ad->navi);
+ return true;
+}
+</pre>
+</li>
+
+<li>Display the contacts list.
+<p>Contact retrieval is implemented in the <span style="font-family: Courier New,Courier,monospace"><person-list-view.c></span> file. The <span style="font-family: Courier New,Courier,monospace">sc_plist_view_add()</span> function invokes the <span style="font-family: Courier New,Courier,monospace">_plist_view_fill()</span> function to retrieve the contact list from the database. These contacts fill the <span style="font-family: Courier New,Courier,monospace">elm_list</span>.</p>
+<pre class="prettyprint">
+static void _plist_view_fill(list_view_data *data)
+{
+ RETM_IF(NULL == data, "data is null");
+ contacts_record_h record = NULL;
+
+ contacts_list_h person_list = NULL;
+ if (sc_db_utils_is_success(contacts_db_get_all_records(_contacts_person._uri, 0, 0,
+ &person_list)))
+ {
+ CONTACTS_LIST_FOREACH(person_list, record)
+ {
+ char *name = NULL;
+ int id = 0;
+ if (sc_db_utils_is_success(contacts_record_get_str_p(record,
+ _contacts_person.display_name, &name))
+ && sc_db_utils_is_success(contacts_record_get_int(record,
+ _contacts_person.id, &id)))
+ {
+...
+
+ elm_list_item_append(data->list, reduced_name, NULL, NULL,
+ _plist_view_sel_cb, (void *)id);
+</pre>
+</li>
+
+<li>Display the favorites list.
+<p>Favorites retrieval is implemented in the <span style="font-family: Courier New,Courier,monospace"><favourites-view.c></span> file. The <span style="font-family: Courier New,Courier,monospace">sc_favourites_view_add()</span> function invokes the <span style="font-family: Courier New,Courier,monospace">_favourites_view_fill()</span> function to get the favorites list from the database, and these contacts fill the <span style="font-family: Courier New,Courier,monospace">elm_list</span>.</p>
+<pre class="prettyprint">
+static void _favourites_view_fill(favourites_view_data *data)
+{
+ RETM_IF(!data, "data is null");
+ contacts_record_h record = NULL;
+
+ data->fav_list = sc_list_utils_get_records_list_bool_filter(_contacts_person._uri,
+ _contacts_person.is_favorite, true);
+ RETM_IF(!data->fav_list, "Favourite list is not retrieved");
+
+ CONTACTS_LIST_FOREACH(data->fav_list, record)
+ {
+ char *name = NULL;
+ if (sc_db_utils_is_success(contacts_record_get_str_p(record,
+ _contacts_person.display_name, &name)))
+ {
+ elm_list_item_append(data->list, name, NULL, NULL, _favourites_view_sel_cb,
+ record);
+...
+</pre>
+</li>
+</ol>
+
+<h2>Managing Contacts</h2>
+
+ <p class="figure">Figure: Managing contacts</p>
+ <p align="center"> <img alt="Managing contacts" src="../images/contacts_edit.png" /> </p>
+
+ <p>To manage contacts:</p>
+ <ol>
+<li>Initialize contact details.
+<p>When the user clicks on a contact in the contacts list, the contact details view opens using the <span style="font-family: Courier New,Courier,monospace">sc_cdetails_view_add()</span> function . Then it fills the contact details using the <span style="font-family: Courier New,Courier,monospace">_cdetails_view_fill()</span> function.</p>
+ <pre class="prettyprint">
+static void _cdetails_view_fill(contact_details_view_data *data)
+{
+ RETM_IF(!data, "data is null");
+ Elm_Genlist_Item_Class *itc = _cdetails_view_create_item_class();
+
+ evas_object_data_set(data->genlist, CT_DETAILS_VIEW_DATA, data);
+ for (sc_common_contact_fields i = CF_PHONE_NUMBER; i < CF_MAX; ++i)
+ {
+ elm_genlist_item_append(data->genlist, itc, (void *)i, NULL,
+ ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ }
+
+ elm_genlist_item_class_free(itc);
+}
+</pre>
+</li>
+
+<li>Initialize a new contact and edit the contact view.
+<p>To create a contact, the user presses the <strong>Create</strong> button in the <strong>Contacts list</strong> view. To edit a contact, the user can click <strong>Edit</strong> in the contact details view. In both cases, the <span style="font-family: Courier New,Courier,monospace">sc_ec_view_add()</span> function is invoked. It creates the new contact or edits the current one.</p>
+<pre class="prettyprint">
+void sc_ec_view_add(Evas_Object *parent, int contact_id)
+{
+ ...
+
+ if (contact_id > 0)
+ {
+ data->contact_id = contact_id;
+ data->data = sc_ec_create_edit_contact(data->contact_id);
+ }
+ else
+ {
+ data->contact_id = 0;
+ data->data = sc_ec_create_new_contact();
+ }
+...
+</pre>
+</li>
+
+<li>Edit the contact using the <span style="font-family: Courier New,Courier,monospace">sc_ec_create_edit_contact()</span> function in the <span style="font-family: Courier New,Courier,monospace"><edit-contact.c></span> file, which creates the database handle for the current contact.
+<pre class="prettyprint">
+sc_ec_contact_edit *sc_ec_create_edit_contact(int contact_id)
+{
+ bool is_ok = false;
+ sc_ec_contact_edit *edit_contact = malloc(sizeof(sc_ec_contact_edit));
+ if (edit_contact)
+ {
+ is_ok = sc_db_utils_is_success(contacts_db_get_record(_contacts_contact._uri, contact_id, &edit_contact->contact_record));
+ edit_contact->is_new_contact = false;
+ }
+
+ if (!is_ok)
+ {
+ sc_ec_destruct_edit_contact(edit_contact);
+ }
+ return edit_contact;
+}
+</pre>
+</li>
+
+<li>Create a new contact using the <span style="font-family: Courier New,Courier,monospace">sc_ec_create_new_contact()</span> function in the <span style="font-family: Courier New,Courier,monospace"><edit-contact.c></span> file, which creates the new database handle for the new contact.
+<pre class="prettyprint">
+sc_ec_contact_edit *sc_ec_create_new_contact()
+{
+ bool is_ok = false;
+ sc_ec_contact_edit *edit_contact = malloc(sizeof(sc_ec_contact_edit));
+ if (edit_contact)
+ {
+ is_ok = sc_db_utils_is_success(contacts_record_create(_contacts_contact._uri, &edit_contact->contact_record));
+ edit_contact->is_new_contact = true;
+ }
+
+ if (!is_ok)
+ {
+ sc_ec_destruct_edit_contact(edit_contact);
+ }
+ return edit_contact;
+}
+</pre>
+</li>
+
+<li>Fill a contact to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>.
+<pre class="prettyprint">
+static void _ec_view_fill(contact_edit_view_data *data)
+{
+...
+ for (sc_common_contact_fields i = CF_FIRST_NAME; i < CF_MAX; ++i)
+ {
+ if (CF_BIRTHDAY == i)
+ {
+ elm_genlist_item_append(data->genlist, itc_birthday, (void *)i, NULL,
+ ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ }
+ else
+ {
+ elm_genlist_item_append(data->genlist, itc_entry, (void *)i, NULL,
+ ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ }
+ }
+...
+}
+</pre>
+</li>
+</ol>
+
+
+<h2>Managing Categories</h2>
+
+<p>To manage categories:</p>
+<ol>
+<li>Create categories.
+<p>The category creation is implemented in the <span style="font-family: Courier New,Courier,monospace"><create-group.c></span> file.</p>
+<p>When the user clicks <strong>Create</strong> on the <strong>Categories</strong> screen, the <strong>Create Category</strong> view opens and the user can enter a category name. When the user clicks <strong>Save</strong>, the <span style="font-family: Courier New,Courier,monospace">_gcreate_view_create_group_cb()</span> smart callback is invoked. That callback calls the <span style="font-family: Courier New,Courier,monospace">sc_gcreate_db_create_group()</span> function to add the category to the specified address book.</p>
+<pre class="prettyprint">
+bool sc_gcreate_db_create_group(const char *group_name)
+{
+ bool result = false;
+ contacts_record_h record = NULL;
+ result = sc_db_utils_is_success(contacts_record_create(_contacts_group._uri,
+ &record));
+ if (result)
+ {
+ Result = sc_db_utils_is_success(contacts_record_set_str(record,
+ _contacts_group.name, group_name));
+ if (result)
+ {
+ result = sc_db_utils_is_success(contacts_db_insert_record(record, NULL));
+ }
+ contacts_record_destroy(record, true);
+ }
+ return result;
+}
+</pre>
+</li>
+
+<li>Edit category members.
+<p>The category member addition and removal are implemented in the <span style="font-family: Courier New,Courier,monospace"><group-edit-member-view.></span> file.</p>
+<p>When the user clicks <strong>Add Member</strong> on a specific category screen, the <strong>Add Member</strong> screen opens and the user can select a contact to add to the category. When the user clicks <strong>Add Member</strong>, the <span style="font-family: Courier New,Courier,monospace">contacts_group_add_contact()</span> function adds the selected contact to the category.</p>
+<p>When the user clicks <strong>Remove Member</strong> on a specific category screen, the <strong>Remove Member</strong> screen opens and the user can select a member to remove from the category. When the user clicks <strong>Remove</strong>, the <span style="font-family: Courier New,Courier,monospace">contacts_group_remove_contact()</span> function removes the selected member from the category.</p>
+<pre class="prettyprint">
+static void _gedit_member_view_edit_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ RETM_IF(!data, "data is null");
+ group_edit_member_view_data *member_data = data;
+
+...
+ if (member_data->type == EDIT_MEMBER_TYPE_ADD)
+ {
+ contacts_group_add_contact(member_data->group_id, check_data->contact_id);
+ }
+ else if (member_data->type == EDIT_MEMBER_TYPE_REMOVE)
+ {
+ contacts_group_remove_contact(member_data->group_id, _data->contact_id);
+ }
+...
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Evas_GL Sample Overview</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"/></p>
+ </div>
+
+ <h1>Evas_GL Sample Overview</h1>
+ <p>The Evas_GL sample application demonstrates how to implement a rotatable cube on the screen using Evas_GL with the Tizen SDK. The sample shows how to handle polygon geometry, and how to write a simple vertex and fragment shader for the cube. Evas_GL is similar to the EGL™ layer and is related to ElmGLView.</p>
+
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.<p>A 3D application using the OpenGL® ES must use the ElmGLView. Evas GL can be used in special cases, such as a multi-thread.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>The following figure illustrates the main screen of the Evas_GL.</p>
+
+ <p class="figure">Figure: Evas_GL screen</p>
+ <p align="center"><img alt="Evas_GL screen" src="../images/evas_gl_sd.png" /></p>
+
+<h2>Setting up the OpenGL® Surface</h2>
+<p>The Evas_GL interface is similar to the EGL interface. It can be connected to Evas so that OpenGL® ES code works with Evas 2D objects.</p>
+<p>This sample shows how to implement with Evas_GL to use OpenGL® ES:</p>
+
+<p>Create the application:</p>
+<pre class="prettyprint">
+#include <Evas_GL.h>
+#include <Evas_GL_GLES2_Helpers.h>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace"><Evas_GL.h></span> and <span style="font-family: Courier New,Courier,monospace"><Evas_GL_GLES2_Helpers.h></span> header files are needed for Evas GL applications.</p>
+
+<pre class="prettyprint">EVAS_GL_GLOBAL_GLES2_DEFINE();</pre>
+
+<p>The Evas_GL or ElmGLView program uses the wrapper function by the supported Evas GL. The wrapper function's interface is the same as OpenGL® ES's. This macro can provide a set of convenience wrapper function tables.</p>
+<pre class="prettyprint">
+Evas_Object *add_win(const char *name)
+{
+ Evas_Object *win;
+
+ elm_config_accel_preference_set("opengl");
+ win = elm_win_util_standard_add(name, "UI Template");
+ if (!win)
+ return NULL;
+
+ evas_object_show(win);
+
+ return win;
+}
+</pre>
+<p>Before creating the Elm Window, set the GL Rendering Engine using the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set("opengl")</span> function because Evas GL runs with Evas GL Render Engine.</p>
+
+<h2>Setting up Callbacks</h2>
+
+<p>To set up callbacks:</p>
+<ol>
+<li>Initialize the OpenGL® ES.
+<p>The following example creates a shader:</p>
+<pre class="prettyprint">
+static void init_evasgl(appdata_s *ad)
+{
+ // Set config of the surface for Evas GL
+ ad->cfg = evas_gl_config_new();
+ ad->cfg->color_format = EVAS_GL_RGBA_8888;
+ ad->cfg->depth_bits = EVAS_GL_DEPTH_BIT_24;
+ ad->cfg->stencil_bits = EVAS_GL_STENCIL_NONE;
+ ad->cfg->options_bits = EVAS_GL_OPTIONS_NONE;
+
+ // Get the window size
+ Evas_Coord w,h;
+ evas_object_geometry_get(ad->win, NULL, NULL, &w, &h);
+
+ // Get the Evas GL handle for doing GL things
+ ad->evasgl = evas_gl_new(evas_object_evas_get(ad->win));
+
+ // Create a surface and context
+ ad->sfc = evas_gl_surface_create(ad->evasgl, ad->cfg, w, h);
+ ad->ctx = evas_gl_context_create(ad->evasgl, NULL);
+
+ EVAS_GL_GLOBAL_GLES2_USE(ad->evasgl, ad->ctx);
+
+ // Set rotation variables
+ ad->xangle = 45.0f;
+ ad->yangle = 45.0f;
+ ad->mouse_down = EINA_FALSE;
+ ad->initialized = EINA_FALSE;
+
+ // Set up the image object. A filled one by default.
+ ad->img = evas_object_image_filled_add(evas_object_evas_get(ad->win));
+ evas_object_event_callback_add(ad->img, EVAS_CALLBACK_DEL, img_del_cb, ad);
+ evas_object_image_pixels_get_callback_set(ad->img, img_pixel_cb, ad);
+
+ // Add mouse event callbacks
+ evas_object_event_callback_add(ad->img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+ evas_object_event_callback_add(ad->img, EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+ evas_object_event_callback_add(ad->img, EVAS_CALLBACK_MOUSE_MOVE, mouse_move_cb, ad);
+
+ evas_object_event_callback_add(ad->win, EVAS_CALLBACK_RESIZE, win_resize_cb, ad);
+ ecore_animator_add(animate_cb, ad->img);
+}
+
+if (!ad->sfc)
+{
+ Evas_Native_Surface ns;
+
+ ad->sfc = evas_gl_surface_create(ad->evasgl, ad->cfg, w, h);
+ evas_gl_native_surface_get(ad->evasgl, ad->sfc, &ns);
+ evas_object_image_native_surface_set(ad->img, &ns);
+ evas_object_image_pixels_dirty_set(ad->img, EINA_TRUE);
+}
+</pre>
+<p>To use Evas GL, create it, set its configuration, and create the Evas GL surface and context. For rendering, connect Evas GL with the Evas Object Image using the <span style="font-family: Courier New,Courier,monospace">evas_object_image_native_surface_set()</span> function.</p>
+</li>
+
+<li>Resize callbacks.
+<p>The Evas GL resize behavior is related to Evas Object Image or Elm Window. In the following example, the Elm Window resize callback is used. When resizing occurs, Evas GL Surface is recreated and reconnected to Evas Object 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->sfc)
+ {
+ evas_object_image_native_surface_set(ad->img, NULL);
+ evas_gl_surface_destroy(ad->evasgl, ad->sfc);
+ ad->sfc = NULL;
+ }
+
+ Evas_Coord w,h;
+ evas_object_geometry_get(obj, NULL, NULL, &w, &h);
+ evas_object_image_size_set(ad->img, w, h);
+ evas_object_resize(ad->img, w, h);
+ evas_object_show(ad->img);
+
+ if (!ad->sfc)
+ {
+ Evas_Native_Surface ns;
+
+ ad->sfc = evas_gl_surface_create(ad->evasgl, ad->cfg, w, h);
+ evas_gl_native_surface_get(ad->evasgl, ad->sfc, &ns);
+ evas_object_image_native_surface_set(ad->img, &ns);
+ evas_object_image_pixels_dirty_set(ad->img, EINA_TRUE);
+ }
+</pre>
+</li>
+
+<li>Draw callbacks.
+<p>The Evas GL draw callback function is registered by the following Evas Object Image function:</p>
+<pre class="prettyprint">
+ evas_object_image_pixels_get_callback_set(ad->img, img_pixel_cb, ad);
+</pre>
+<p>This callback function is provided for on-demand mode. Especially, if Evas GL uses <span style="font-family: Courier New,Courier,monospace">EVAS_GL_OPTIONS_DIRECT</span>, all OpenGL® ES options are called in this callback function.</p>
+<pre class="prettyprint">
+static void img_pixel_cb(void *data, Evas_Object *obj)
+{
+ // Define the model view projection matrix
+ float model[16], mvp[16];
+ static float view[16];
+ appdata_s *ad = data;
+
+ Evas_Coord w, h;
+ evas_object_image_size_get(obj, &w, &h);
+
+ // Set up the context and surface as the current one
+ evas_gl_make_current(ad->evasgl, ad->sfc, ad->ctx);
+
+ // Initialize GL just once
+ if (ad->initialized == EINA_FALSE)
+ {
+ float aspect;
+ init_shaders(ad);
+ glGenBuffers(1, &ad->vbo);
+ glBindBuffer(GL_ARRAY_BUFFER, ad->vbo);
+ glBufferData(GL_ARRAY_BUFFER, 3 * 72 * 4, cube_vertices,GL_STATIC_DRAW);
+ init_matrix(view);
+ if (w > h)
+ {
+ aspect = (float)w/h;
+ view_set_ortho(view, -1.0 * aspect, 1.0 * aspect, -1.0, 1.0, -1.0, 1.0);
+ }
+ else {
+ aspect = (float)h/w;
+ view_set_ortho(view, -1.0, 1.0, -1.0 * aspect, 1.0 *aspect, -1.0, 1.0);
+ }
+ ad->initialized = EINA_TRUE;
+ }
+
+ glViewport(0, 0, w, h);
+ glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
+ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+ init_matrix(model);
+ rotate_xyz(model, ad->xangle, ad->yangle, 0.0f);
+ multiply_matrix(mvp, view, model);
+
+ glUseProgram(ad->program);
+ glBindBuffer(GL_ARRAY_BUFFER, ad->vbo);
+ glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, 0);
+ glEnableVertexAttribArray(0);
+
+ glBindBuffer(GL_ARRAY_BUFFER, ad->vbo);
+ glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, sizeof(float) * 6, (void*)(sizeof(float)*3));
+ glEnableVertexAttribArray(1);
+
+ glUniformMatrix4fv( glGetUniformLocation(ad->program, "mvpMatrix"), 1, GL_FALSE, mvp);
+ glDrawArrays(GL_TRIANGLES, 0, 36);
+
+ glFlush();
+}
+</pre>
+</li>
+
+<li>Add animators.
+<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to have a regular update of the scene. The following is an example for a default update refresh rate:</p>
+<pre class="prettyprint">
+static Eina_Bool animate_cb(void *data)
+{
+ Evas_Object *img = data;
+
+ // Animate here when an animation tick happens and mark the image as "dirty"
+ // meaning it needs an update next time Evas renders it
+ evas_object_image_pixels_dirty_set(img, EINA_TRUE);
+
+ return ECORE_CALLBACK_RENEW;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_dirty_set()</span> function is the Evas Object image which is connected Evas GL. After that, the <span style="font-family: Courier New,Courier,monospace">evas_object_image_pixels_get_callback_set()</span> callback function is called whenever Evas renders.</p>
+</li>
+
+<li>Delete callbacks.
+<p>The delete callback is triggered when the Evas GL is destroyed from the main loop. No other callback can be called on the same object afterwards.</p>
+<pre class="prettyprint">
+static void img_del_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+ appdata_s *ad = data;
+
+ // Free the GL resources when image object is deleted
+ evas_gl_make_current(ad->evasgl, ad->sfc, ad->ctx);
+
+ glDeleteShader(ad->vtx_shader);
+ glDeleteShader(ad->fgmt_shader);
+ glDeleteProgram(ad->program);
+ glDeleteBuffers(1, &ad->vbo);
+
+ evas_gl_surface_destroy(ad->evasgl, ad->sfc);
+ evas_gl_context_destroy(ad->evasgl, ad->ctx);
+ evas_gl_config_free(ad->cfg);
+
+ evas_gl_free(ad->evasgl);
+}</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>File Manager Sample Overview</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"/></p>
+ </div>
+
+ <h1>File Manager Sample Overview</h1>
+
+<p>The File Manager sample demonstrates how to implement a complex view using EFL UI components and containers.</p>
+<p>It uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>, <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>, and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_popup</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">elm_box</span> for UI component management inside the view. And UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span>, <span style="font-family: Courier New,Courier,monospace">elm_image</span>, and <span style="font-family: Courier New,Courier,monospace">elm_progress</span> for the content inside view.</p>
+
+<p>The following figure illustrates the main view of the File Manager sample application, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: File Manager main views</p>
+ <p align="center"><img alt="File Manager main views" src="../images/filemanager_main.png" /></p>
+ <p align="center"><img alt="File Manager main views" src="../images/filemanager_tree.png" /></p>
+
+<h2>Implementation</h2>
+
+<p>To manage files:</p>
+<ol>
+<li>Create a window:
+<ol type="a">
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">win_create()</span> function creates the window which consists of an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>), a view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), and a background (<span style="font-family: Courier New,Courier,monospace">elm_bg</span>).</p>
+<pre class="prettyprint">
+window_obj *win_create()
+{
+ window_obj *obj = calloc(1, sizeof(window_obj));
+ RETVM_IF(!obj, NULL, "Cannot allocate memory");
+
+ obj->win = elm_win_add(NULL, "File Manager", ELM_WIN_BASIC);
+ elm_win_conformant_set(obj->win, EINA_TRUE);
+ evas_object_show(obj->win);
+
+ obj->conform = elm_conformant_add(obj->win);
+ evas_object_size_hint_weight_set(obj->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(obj->win, obj->conform);
+ evas_object_show(obj->conform);
+
+ obj->bg = elm_bg_add(obj->conform);
+ evas_object_size_hint_weight_set(obj->bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(obj->bg);
+
+ elm_object_part_content_set(obj->conform, "elm.swallow.bg", obj->bg);
+
+ return obj;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_app_add_naviframe()</span> function adds the view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>) to the window. Naviframe is created using the <span style="font-family: Courier New,Courier,monospace"> ui_utils_navi_add()</span> function.</p>
+<pre class="prettyprint">
+static Evas_Object *_app_add_naviframe(app_data *app)
+{
+ Evas_Object *naviframe = NULL;
+ Evas_Object *parent = win_get_host_layout(app->win);
+ if (parent)
+ {
+ naviframe = ui_utils_navi_add(parent, _app_naviframe_backbutton_cb, app);
+ if (naviframe)
+ {
+ win_set_layout(app->win, naviframe);
+ }
+ }
+ return naviframe;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">ui_utils_navi_add()</span> function creates and adds the view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>) to the parent. In the following example, the parent is the window (<span style="font-family: Courier New,Courier,monospace">elm_win</span>).</p>
+<pre class="prettyprint">
+Evas_Object *ui_utils_navi_add(Evas_Object *parent, Eext_Event_Cb back_cb, void *cb_data)
+{
+ RETVM_IF(!parent, NULL, "Parent is NULL");
+
+ Evas_Object *navi = elm_naviframe_add(parent);
+ eext_object_event_callback_add(navi, EEXT_CALLBACK_BACK, back_cb, cb_data);
+ elm_naviframe_prev_btn_auto_pushed_set(navi, EINA_FALSE);
+
+ evas_object_show(navi);
+
+ return navi;
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>Create the main view:
+<ol type="a">
+<li>The <span style="font-family: Courier New,Courier,monospace">main_view_add()</span> function creates the main layout and UI components as genlist and control bar. Then layout inserts to naviframe.
+<pre class="prettyprint">
+int main_view_add(app_data *app, Evas_Object *parent)
+{
+ RETVM_IF(!app, RESULT_TYPE_INVALID_ARG, "App object is NULL");
+ RETVM_IF(!parent, RESULT_TYPE_INVALID_ARG, "Parent object is NULL");
+
+ app->status.is_mainview = EINA_TRUE;
+
+ main_view_data *data = calloc(1, sizeof(main_view_data));
+ RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Fail allocate memory");
+
+ data->view.app = app;
+ data->view.navi = parent;
+
+ data->storage_list = NULL;
+ data->view.is_root = EINA_FALSE;
+
+ data->view.navi_layout = ui_utils_layout_add(data->view.navi, _main_view_del_cb, data);
+ if (!data->view.navi_layout)
+ {
+ ERR("Failed to create layout");
+ _main_view_destroy(data);
+ return RESULT_TYPE_FAIL;
+ }
+
+ elm_layout_file_set(data->view.navi_layout, ui_utils_get_resource(FM_LAYOUT_EDJ), "navi_layout");
+
+ int result = navigator_add_view(data->view.app->navigator, FM_MAIN_VIEW_TITLE, &data->view);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Failed to add view to naviframe");
+ evas_object_del(data->view.navi_layout);
+ return result;
+ }
+
+ result = _main_view_create_widgets(data);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Failed to create widgets");
+ evas_object_del(data->view.navi_layout);
+ return result;
+ }
+
+ result = _main_view_fill(data);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Failed to initialize main view");
+ evas_object_del(data->view.navi_layout);
+ return result;
+ }
+
+ elm_object_item_data_set (data->view.navi_item, data);
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<p class="figure">Figure: File Manager main view layout</p>
+ <p align="center"> <img alt="File Manager main view layout" src="../images/filemanager_main_view.png" /></p>
+<li>The <span style="font-family: Courier New,Courier,monospace">ui_utils_genlist_add()</span> function creates the genlist:
+<pre class="prettyprint">
+Evas_Object *ui_utils_genlist_add(Evas_Object *parent, Evas_Object_Event_Cb destroy_cb, void *cb_data)
+{
+ Evas_Object *genlist = elm_genlist_add(parent);
+ RETVM_IF(!genlist, NULL, "Genlist is NULL");
+
+ evas_object_size_hint_weight_set(genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(genlist, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ evas_object_event_callback_add(genlist, EVAS_CALLBACK_FREE, destroy_cb, cb_data);
+
+ evas_object_show(genlist);
+
+ return genlist;
+}
+</pre>
+</li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">_main_view_fill()</span> function gets content using the <span style="font-family: Courier New,Courier,monospace">fs_manager_get_storage_list()</span> function and sets to the genlist using the <span style="font-family: Courier New,Courier,monospace">genlist_widget_content_set()</span> function.
+<pre class="prettyprint">
+static int _main_view_fill(main_view_data *data)
+{
+ int res = fs_manager_get_storage_list(data->view.app->manager, &data->storage_list);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to get storage list");
+
+ genlist_widget_content_set(data->genlist_widget, data->storage_list);
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">genlist_widget_content_set()</span> function sets the content from the list to the genlist.
+<pre class="prettyprint">
+void genlist_widget_content_set(genlist_widget *widget, const Eina_List *file_list)
+{
+ RETM_IF(!widget, "Widget is NULL");
+
+ const Eina_List *list = NULL;
+ void *item = NULL;
+
+ _genlist_widget_set_items_style(widget);
+
+ EINA_LIST_FOREACH(file_list, list, item)
+ {
+ Elm_Object_Item *node_item = elm_genlist_item_append(widget->genlist, &itc, item, NULL,
+ ELM_GENLIST_ITEM_NONE, _genlist_widget_item_sel_cb, widget);
+
+ elm_object_item_data_set(node_item, item);
+ }
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Create the storage view:
+
+<ol type="a">
+<li>The <span style="font-family: Courier New,Courier,monospace">list_view_add()</span> function creates and shows the storage view. It creates the layout and UI components as navigation path, genlist, and control bar. Then the layout is inserted to naviframe.
+<pre class="prettyprint">
+int list_view_add(app_data *app, Evas_Object *parent, const char *path, const char *dir_name)
+{
+ RETVM_IF(!app, RESULT_TYPE_INVALID_ARG, "App object is NULL");
+ RETVM_IF(!parent, RESULT_TYPE_INVALID_ARG, "Parent object is NULL");
+ RETVM_IF(!path, RESULT_TYPE_INVALID_ARG, "Path is NULL");
+
+ app->status.is_mainview = EINA_FALSE;
+
+ list_view_data *data = calloc(1, sizeof(list_view_data));
+ RETVM_IF(!data, RESULT_TYPE_FAIL_ALLOCATE_MEMORY, "Fail allocate memory");
+
+ data->list_view.app = app;
+ data->list_view.navi = parent;
+ data->list_view.curr_path = (dir_name) ? common_util_strconcat(path, "/", dir_name, NULL)
+ : strdup(path);
+ data->list_view.is_root = model_utils_is_root_path(data->list_view.curr_path);
+
+ data->file_list = NULL;
+
+ data->list_view.navi_layout = ui_utils_layout_add(data->list_view.navi, _list_view_del_cb, data);
+ if (!data->list_view.navi_layout )
+ {
+ ERR("Fail to create Layout");
+ _list_view_destroy(data);
+ return RESULT_TYPE_FAIL;
+ }
+
+ elm_layout_file_set(data->list_view.navi_layout, ui_utils_get_resource(FM_LAYOUT_EDJ), "navi_layout");
+
+ int result = fs_manager_get_file_list(data->list_view.app->manager, data->list_view.curr_path, &data->file_list);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Fail to get file list");
+ evas_object_del(data->list_view.navi_layout);
+ return result;
+ }
+
+ const char *title = ui_utils_title_get(data->list_view.curr_path);
+ result = navigator_add_view(data->list_view.app->navigator, title, &data->list_view);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Fail to add view to naviframe");
+ evas_object_del(data->list_view.navi_layout);
+ return result;
+ }
+
+ result = _list_view_create_widgets(data);
+ if (result != RESULT_TYPE_OK)
+ {
+ ERR("Fail to create widgets");
+ evas_object_del(data->list_view.navi_layout);
+ return result;
+ }
+
+ Eina_List *path_list = NULL;
+ int res = navi_path_storage_get_path_list(app->path_storage, &path_list);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail get folders list for navigation widget");
+ navi_path_widget_content_set(data->navi_path_wgt, path_list);
+
+ elm_object_item_data_set(data->list_view.navi_item, data);
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+
+<p class="figure">Figure: File Manager storage view layout</p>
+ <p align="center"> <img alt="File Manager storage view layout" src="../images/filemanager_storage_view.png" /></p>
+</li>
+
+<li>The <span style="font-family: Courier New,Courier,monospace">navi_path_widget_add()</span> function adds the navigation path component to the view. The UI component consists of the layout (<span style="font-family: Courier New,Courier,monospace">elm_layout</span>), table (<span style="font-family: Courier New,Courier,monospace">elm_table</span>), and scroller (<span style="font-family: Courier New,Courier,monospace">elm_scroller</span>).
+<pre class="prettyprint">
+navi_path_widget *navi_path_widget_add(view_data *view)
+{
+ RETVM_IF(!view, NULL, "View object is NULL");
+
+ navi_path_widget *widget = calloc(1, sizeof(navi_path_widget));
+ RETVM_IF(!widget, NULL, "Fail allocate memory");
+
+ widget->table_size = 0;
+ widget->view = view;
+
+ widget->navi_path_layout = ui_utils_genlist_add(widget->view->navi_layout, _navi_path_widget_delete_cb, widget);
+ if (!widget->navi_path_layout)
+ {
+ ERR("Layout is NULL");
+ _navi_path_widget_destroy(widget);
+ return NULL;
+ }
+
+ evas_object_size_hint_weight_set(widget->navi_path_layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(widget->navi_path_layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ elm_layout_file_set(widget->navi_path_layout, ui_utils_get_resource(FM_LAYOUT_EDJ), "path_info");
+
+ evas_object_show(widget->navi_path_layout);
+
+ widget->navi_path_scroller = elm_scroller_add(widget->navi_path_layout);
+ if (!widget->navi_path_scroller)
+ {
+ ERR("Scroller is NULL");
+ evas_object_del(widget->navi_path_layout);
+ return NULL;
+ }
+
+ elm_scroller_bounce_set(widget->navi_path_scroller, EINA_TRUE, EINA_FALSE);
+ elm_scroller_policy_set (widget->navi_path_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+
+ evas_object_size_hint_weight_set(widget->navi_path_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(widget->navi_path_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(widget->navi_path_scroller);
+
+ widget->navi_path_table = elm_table_add(widget->navi_path_layout);
+ if (!widget->navi_path_table)
+ {
+ ERR("Table is NULL");
+ evas_object_del(widget->navi_path_layout);
+ return NULL;
+ }
+
+ evas_object_size_hint_weight_set(widget->navi_path_table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(widget->navi_path_table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(widget->navi_path_table);
+
+ elm_object_content_set(widget->navi_path_scroller, widget->navi_path_table);
+ elm_object_part_content_set(widget->navi_path_layout, "info", widget->navi_path_scroller);
+
+ elm_object_part_content_set(widget->view->navi_layout, "header_box", widget->navi_path_layout);
+
+ return widget;
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Edit files.
+<p>The following figure illustrates the main functionalities of the File Manager.</p>
+
+ <p class="figure">Figure: File Manager functionalities</p>
+ <p align="center"> <img alt="File Manager functionalities" src="../images/filemanager_functionalities.png" /> </p>
+<ol type="a">
+<li>
+<p>After clicking the <strong>Edit Mode</strong> button, the <span style="font-family: Courier New,Courier,monospace">genlist_widget_update()</span> and <span style="font-family: Courier New,Courier,monospace">ctrl_bar_widget_mode_update()</span> functions are called.</p>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">genlist_widget_update()</span> function updates the style of the genlist items. If it is in the edit mode, checkboxes and the <strong>Select All</strong> genlist is shown.</p>
+<pre class="prettyprint">
+int genlist_widget_update(genlist_widget *widget)
+{
+ RETVM_IF(!widget->view, RESULT_TYPE_INVALID_ARG, "View object is NULL");
+
+ app_data *app = widget->view->app;
+
+ _genlist_widget_set_items_style(widget);
+ _genlist_widget_reset_all_checkboxes(widget);
+
+ if (app->status.curr_mode == MODE_EDIT)
+ {
+ elm_layout_signal_emit(widget->view->navi_layout, "show_select_all", "");
+ }
+ else
+ {
+ elm_layout_signal_emit(widget->view->navi_layout, "hide_select_all", "");
+ }
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">ctrl_bar_widget_mode_update()</span> function updates the buttons in the toolbar. In the edit mode, the toolbar shows the delete, copy, move, and exit functionalities.</p>
+<pre class="prettyprint">
+int ctrl_bar_widget_mode_update(ctrl_bar_widget *widget)
+{
+ RETVM_IF(!widget, RESULT_TYPE_FAIL, "Widget object is NULL");
+ RETVM_IF(!widget->view, RESULT_TYPE_FAIL, "View object is NULL");
+ RETVM_IF(!widget->ctrl_bar, RESULT_TYPE_FAIL, "Ctrl bar object is NULL");
+
+ _ctrl_bar_widget_add_update_buttons(widget);
+
+ return RESULT_TYPE_OK;
+}
+
+static void _ctrl_bar_widget_add_update_buttons(ctrl_bar_widget *widget)
+{
+ ...
+ if (app->status.curr_mode == MODE_DEFAULT)
+ {
+ Elm_Object_Item *edit_item = elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_EDIT, _ctrl_bar_widget_edit_btn_cb, widget);
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_MORE, _ctrl_bar_widget_more_btn_cb, widget);
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_EXIT, _ctrl_bar_widget_exit_btn_cb, widget);
+
+ if (list_view_items_count_get(widget->view) < 1)
+ {
+ elm_object_item_disabled_set(edit_item, EINA_TRUE);
+ }
+ }
+ else if (app->status.curr_mode == MODE_EDIT)
+ {
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_DELETE, _ctrl_bar_widget_delete_btn_cb, widget);
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_MOVE, _ctrl_bar_widget_move_btn_cb, widget);
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_COPY, _ctrl_bar_widget_copy_btn_cb, widget);
+ elm_toolbar_item_append(widget->ctrl_bar, NULL, FM_TOOLBAR_TEXT_CANCEL, _ctrl_bar_widget_cancel_btn_cb, widget);
+ }
+ ...
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Create a new folder:
+<ol type="a">
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_popup_new_folder_type_create()</span> function creates a popup with an edit field and the <strong>OK</strong> and <strong>Cancel</strong> buttons. It sets the text and callback functions.</p>
+<pre class="prettyprint">
+static int _popup_new_folder_type_create(view_data *view)
+{
+ Evas_Object *popup = _popup_new(view->navi, NULL, view);
+ RETVM_IF(!popup, RESULT_TYPE_INVALID_ARG, "Fail to create popup");
+
+ elm_object_part_text_set(popup, "title,text", POPUP_TEXT_TITLE_NEW_FOLDER);
+
+ int res = _popup_editfield_add(popup);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to add editfield");
+
+ res = _popup_buttons_add(popup, _popup_create_folder_ok_cb, _popup_cancel_cb);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to add buttons");
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_popup_new()</span> function creates a popup (<span style="font-family: Courier New,Courier,monospace">elm_popup</span>) and sets its text and style.</p>
+<pre class="prettyprint">
+static Evas_Object *_popup_new(Evas_Object *parent, const char *text, const void *data)
+{
+ Evas_Object *popup = elm_popup_add(parent);
+ RETVM_IF(!popup, NULL, "Fail to create popup");
+
+ eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, _popup_back_button_cb, NULL);
+
+ elm_object_style_set(popup, "default");
+ elm_object_text_set(popup, text);
+
+ evas_object_data_set(popup, "view", data);
+ evas_object_show(popup);
+
+ return popup;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_popup_editfield_add()</span> creates the edit field from the entry (<span style="font-family: Courier New,Courier,monospace">elm_entry</span>), sets its theme and text.</p>
+<pre class="prettyprint">
+static int _popup_editfield_add(Evas_Object *popup)
+{
+ Evas_Object *entry = elm_entry_add(popup);
+ RETVM_IF(!entry, RESULT_TYPE_INVALID_ARG, "Fail to create entry");
+
+ elm_layout_theme_set(entry, "entry", "base-single", "editfield");
+ evas_object_size_hint_weight_set(entry, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_entry_scrollable_set(entry, EINA_TRUE);
+ elm_entry_single_line_set(entry, EINA_TRUE);
+
+ elm_object_part_text_set(entry, "elm.guide", POPUP_TEXT_EMPTY_EDIT_FIELD);
+ elm_object_part_text_set(entry, "elm.text", POPUP_TEXT_NEW_FOLDER);
+ elm_object_content_set(popup, entry);
+
+ elm_entry_cursor_end_set(entry);
+ elm_object_focus_set(entry, EINA_TRUE);
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+</ol></li>
+<li>Copy operation:
+<ol type="a">
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_ctrl_bar_widget_copy_btn_cb()</span> function is called when the <strong>Copy</strong> button is clicked. This function copies the selected items using the <span style="font-family: Courier New,Courier,monospace">list_view_copy_items()</span> function then updates the storage list using the <span style="font-family: Courier New,Courier,monospace">list_view_update()</span> function and shows the popup.</p>
+<pre class="prettyprint">
+static void _ctrl_bar_widget_copy_btn_cb(void *data, Evas_Object *obj, void *eventInfo)
+{
+ RETM_IF(!data, "Data is NULL");
+
+ ctrl_bar_widget *widget = data;
+ widget->view->app->status.curr_mode = MODE_DEFAULT;
+
+ int res = list_view_copy_items(widget->view);
+ RETM_IF(res != RESULT_TYPE_OK, "Fail to copy file");
+
+ res = list_view_update(widget->view->navi_item, UPDATE_TYPE_GENLIST | UPDATE_TYPE_CTRL_BAR_MODE);
+ RETM_IF(res != RESULT_TYPE_OK, "Fail to update view");
+
+ res = popup_create(widget->view, POPUP_TYPE_COPY_MOVE);
+ RETM_IF(res != RESULT_TYPE_OK, "Fail to create popup");
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">list_view_copy_items()</span> function copies selected files to the clipboard using the <span style="font-family: Courier New,Courier,monospace">clipboard_add_data()</span> function and sets the operation type using the <span style="font-family: Courier New,Courier,monospace">clipboard_set_operation()</span> function.</p>
+<pre class="prettyprint">
+int list_view_copy_items(view_data *view)
+{
+ RETVM_IF(!view, RESULT_TYPE_INVALID_ARG, "View object is NULL");
+
+ list_view_data *list_data = (list_view_data *)view;
+ app_data *app = list_data->list_view.app;
+
+ int res = clipboard_add_data(app->clipboard, list_data->file_list);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to copy files");
+
+ res = clipboard_set_operation(app->clipboard, OPERATION_TYPE_COPY);
+ RETVM_IF(res != RESULT_TYPE_OK, res, "Fail to set operation");
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+</ol></li>
+<li>Model functionality:
+<ul>
+<li>
+<p>The main model part functionalities provided by the <span style="font-family: Courier New,Courier,monospace">fs_manager</span> and <span style="font-family: Courier New,Courier,monospace">fs_operation</span> methods.</p>
+<p>The provided <span style="font-family: Courier New,Courier,monospace">fs_manager</span> API is used by the GUI elements to get data the for UI component: list of available storages, list of files and subfolder for specified folder; make copy, move, delete operations on files, and folders.</p>
+<p>To get a list of available storages, use the <span style="font-family: Courier New,Courier,monospace">fs_manager_get_storage_list()</span> function.</p>
+<pre class="prettyprint">
+int fs_manager_get_storage_list(fs_manager *manager, Eina_List **storage_list)
+{
+ RETVM_IF(!manager, RESULT_TYPE_INVALID_ARG, "File manager is NULL");
+ if (manager->is_locked)
+ {
+ ERR("File manager is busy");
+ return RESULT_TYPE_BUSY;
+ }
+
+ bool is_supported = false;
+
+ int res = _fs_manager_is_mmc_supported(&is_supported);
+ if (res != RESULT_TYPE_OK)
+ {
+ return res;
+ }
+
+ if (is_supported)
+ {
+ storage_info *const pNode_internal = calloc(1, sizeof(node_info));
+ pNode_internal->root_name = strdup(FM_MEMORY_LABEL);
+ pNode_internal->root_path = strdup(FM_MEMORY_FOLDER);
+ pNode_internal->type = STORAGE_TYPE_MMC;
+
+ *storage_list = eina_list_append(*storage_list, pNode_internal);
+ }
+
+ storage_info *const pNode_device = calloc(1, sizeof(node_info));
+ pNode_device->root_name = strdup(FM_PHONE_LABEL);
+ pNode_device->root_path = strdup(FM_PHONE_FOLDER);
+ pNode_device->type = STORAGE_TYPE_PHONE;
+
+ *storage_list = eina_list_append(*storage_list, pNode_device);
+ *storage_list = eina_list_sort(*storage_list, eina_list_count(*storage_list), _fs_manager_sort_by_name_cb);
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>To check whether an SD card is mounted, the <span style="font-family: Courier New,Courier,monospace">_fs_manager_is_mmc_supported()</span> function is used where the <span style="font-family: Courier New,Courier,monospace">storage_get_external_memory_size()</span> function from the storage API is called. The total size of the external storage is counted. If the size is 0, no SD card is mounted.</p>
+<p>For getting a list of the files and subfolders in the current folder, the <span style="font-family: Courier New,Courier,monospace">fs_manager_get_file_list()</span> function is called. Inside this, the <span style="font-family: Courier New,Courier,monospace">model_utils_read_dir()</span> function is called. It gets 2 Eina_List containers with the current folder's subfolders and files. Using the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function sorts the lists. The order can be defined using the <span style="font-family: Courier New,Courier,monospace">_fs_manager_sort_by_name_cb()</span> function and merged into the result list using the <span style="font-family: Courier New,Courier,monospace">eina_list_merge()</span> function.</p>
+<pre class="prettyprint">
+int fs_manager_get_file_list(fs_manager *manager, const char *dir_path, Eina_List **file_list)
+{
+ …
+ Eina_List *dirs = NULL;
+ Eina_List *files = NULL;
+ ret = model_utils_read_dir(dir_path, &dirs, &files);
+ if (ret != RESULT_TYPE_OK)
+ {
+ ERR("Failed to read dir '%s'", dir_path);
+ return ret;
+ }
+ dirs = eina_list_sort(dirs, eina_list_count(dirs), _fs_manager_sort_by_name_cb);
+ files = eina_list_sort(files, eina_list_count(files), _fs_manager_sort_by_name_cb);
+ *file_list = eina_list_merge(dirs, files);
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>The folder content getter, the <span style="font-family: Courier New,Courier,monospace">model_utils_read_dir()</span> function uses the Linux <span style="font-family: Courier New,Courier,monospace">readdir_r()</span> function to read data from folders.</p>
+<pre class="prettyprint">
+int model_utils_read_dir(const char *dir_path, Eina_List **dir_list, Eina_List **file_list)
+{
+ …
+ struct dirent ent_struct;
+ struct dirent *ent = NULL;
+ while ((readdir_r(pDir, &ent_struct, &ent) == 0) && ent)
+ {
+ int skip = (!ent->d_name ||
+ (strncmp(ent->d_name, ".", 1) == 0) ||
+ (strncmp(ent->d_name, "..", 2) == 0));
+
+ skip = skip || ((ent->d_type != DT_DIR) && (ent->d_type != DT_REG));
+
+ skip = skip || ((ent->d_type == DT_DIR) &&
+ (strcmp(dir_path, FM_PHONE_FOLDER) == 0) &&
+ (strcmp(ent->d_name, FM_DEBUG_FOLDER) == 0));
+
+ node_info *const pNode = skip ? NULL : calloc(1, sizeof(node_info));
+
+ if (pNode)
+ {
+ pNode->parent_path = strdup(dir_path);
+ pNode->name = strdup(ent->d_name);
+ pNode->is_selected = EINA_FALSE;
+
+ if (ent->d_type == DT_DIR)
+ {
+ pNode->type = FILE_TYPE_DIR;
+ }
+ else
+ {
+ model_utils_get_file_category(ent->d_name, &(pNode->type));
+ }
+
+ if (pNode->type == FILE_TYPE_DIR)
+ {
+ *dir_list = eina_list_append(*dir_list, pNode);
+ }
+ else
+ {
+ *file_list = eina_list_append(*file_list, pNode);
+ }
+ }
+ }
+
+ closedir(pDir);
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>To create a new folder in the file system, use the <span style="font-family: Courier New,Courier,monospace">fs_manager_create_folder()</span> function that uses the Linux <span style="font-family: Courier New,Courier,monospace">mkdir()</span> method.</p>
+<pre class="prettyprint">
+int fs_manager_create_folder(fs_manager *manager, const char *dir)
+{
+ RETVM_IF(!manager, RESULT_TYPE_INVALID_ARG, "File manager is NULL");
+ RETVM_IF(!dir, RESULT_TYPE_INVALID_ARG, "Directory path is NULL");
+ …
+ if (mkdir(dir, DIR_MODE) < 0)
+ {
+ ERR("Failed to create folder '%s'", dir);
+ return RESULT_TYPE_FAIL;
+ }
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>To create a copy, or move or delete an operation, the <span style="font-family: Courier New,Courier,monospace">fs_manager</span> provides the <span style="font-family: Courier New,Courier,monospace">fs_manager_copy_files()</span>, <span style="font-family: Courier New,Courier,monospace">fs_manager_move_files()</span>, and <span style="font-family: Courier New,Courier,monospace">fs_manager_delete_files()</span> functions. All of them call the private <span style="font-family: Courier New,Courier,monospace">_fs_manager_generate_operation()</span> function. In this method, the <span style="font-family: Courier New,Courier,monospace">fs_operation</span> instance is created.</p>
+<pre class="prettyprint">
+static int _fs_manager_generate_operation(fs_manager *manager,
+ Eina_List *source_list,
+ const char *dest_path,
+ operation_type oper_type,
+ fs_manager_complete_cb_func func,
+ void *data)
+{
+ ...
+
+ manager->user_cb_func = func;
+ manager->user_cb_data = data;
+
+ manager->operation = fs_operation_create();
+ if (!manager->operation)
+ {
+ _fs_manager_clear_data(manager);
+ ERR("Failed to allocate memory for file operation");
+ return RESULT_TYPE_FAIL_ALLOCATE_MEMORY;
+ }
+
+ int result = fs_operation_set_data(manager->operation, source_list, dest_path, oper_type);
+ if (result != RESULT_TYPE_OK)
+ {
+ _fs_manager_clear_data(manager);
+ ERR("Failed to set operation data");
+ return result;
+ }
+
+ fs_operation_cb_data *cb_data = calloc(1, sizeof(fs_operation_cb_data));
+ if (!cb_data)
+ {
+ _fs_manager_clear_data(manager);
+ ERR("Failed to allocate memory for callback operation data");
+ return RESULT_TYPE_FAIL_ALLOCATE_MEMORY;
+ }
+
+ cb_data->manager = manager;
+ cb_data->result = RESULT_TYPE_FAIL;
+
+ // Lock file system manager
+ manager->is_locked = EINA_TRUE;
+
+ result = fs_operation_execute(manager->operation, _on_operation_completed, cb_data);
+ if (result != RESULT_TYPE_OK)
+ {
+ free(cb_data);
+ _fs_manager_clear_data(manager);
+ manager->is_locked = EINA_FALSE;
+ ERR("Failed to execute operation");
+ }
+
+ return result;
+}
+</pre>
+</li>
+<li>
+<p>Every file operation that is needed to be done runs separately from the main loop thread. This functionality is provided by the <span style="font-family: Courier New,Courier,monospace">fs_operation</span> API. The <span style="font-family: Courier New,Courier,monospace">fs_manager</span> creates the <span style="font-family: Courier New,Courier,monospace">fs_operation</span> instance, sets the operation data, completes the callback data, and runs this operation by calling the <span style="font-family: Courier New,Courier,monospace">fs_operation_execute()</span> function where a new instance of the <span style="font-family: Courier New,Courier,monospace">ecore_thread</span> is created.</p>
+<pre class="prettyprint">
+int fs_operation_execute(fs_operation *operation,
+ fs_operation_cb_func cb_func,
+ fs_operation_cb_data *cb_data)
+{
+ RETVM_IF(!operation, RESULT_TYPE_INVALID_ARG, "Operation object is NULL");
+ RETVM_IF(!operation->source_list, RESULT_TYPE_FAIL,"File list not set");
+ RETVM_IF(operation->oper_type == OPERATION_TYPE_NONE, RESULT_TYPE_FAIL,"Type of operation not set");
+ RETVM_IF(!operation->dst_path && (operation->oper_type != OPERATION_TYPE_DELETE),
+ RESULT_TYPE_FAIL, "Destination path not set");
+
+ operation->cb_func = cb_func;
+ operation->cb_data = cb_data;
+
+ operation->exec_thread = ecore_thread_feedback_run(_fs_operation_run,
+ NULL,
+ _fs_operation_end,
+ NULL,
+ (void*)operation,
+ EINA_TRUE);
+
+ RETVM_IF(!operation->exec_thread, RESULT_TYPE_FAIL, "Failed to create thread");
+
+ return RESULT_TYPE_OK;
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_fs_operation_run()</span> function is the thread function that runs in the separate thread. The operation is executed in this function file. The result of the operation is set to the callback data.</p>
+<pre class="prettyprint">
+void _fs_operation_run(void *data, Ecore_Thread *thread)
+{
+ fs_operation *operation = data;
+ int res = RESULT_TYPE_FAIL;
+
+ switch (operation->oper_type)
+ {
+ case OPERATION_TYPE_COPY:
+ res = _fs_operation_copy(operation);
+ break;
+ case OPERATION_TYPE_MOVE:
+ res = _fs_operation_move(operation);
+ break;
+ case OPERATION_TYPE_DELETE:
+ res = _fs_operation_delete(operation);
+ break;
+ default:
+ ERR("Operation type not set");
+ return;
+ break;
+ }
+
+ if (operation->is_canceled)
+ {
+ return;
+ }
+
+ if (operation->cb_data)
+ {
+ operation->cb_data->result = res;
+ }
+}
+</pre>
+</li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">_fs_operation_end()</span> function runs after the <span style="font-family: Courier New,Courier,monospace">_fs_operation_run()</span> is finished and it runs in the main loop. In this method, the operation callback function is called and the operation result is returned to the operation caller.</p>
+<pre class="prettyprint">
+void _fs_operation_end(void *data, Ecore_Thread *thread)
+{
+ fs_operation *operation = data;
+ _fs_operation_delete_exec_thread(operation);
+ if (operation->is_canceled)
+ {
+ fs_operation_destroy(operation);
+ return;
+ }
+
+ if (operation->cb_func)
+ {
+ operation->cb_func(operation->cb_data);
+ }
+}
+</pre>
+</li>
+</ul>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>GLView11Cube Sample Overview</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"/></p>
+ </div>
+
+ <h1>GLView11Cube Sample Overview</h1>
+
+<p>The GLView11Cube sample demonstrates how you can use ElmGLView to create a 3D cube using OpenGL® ES 1.1.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>This sample extends the functionality of OpenGL® ES 1.1 on the Tizen platform to create spinning 3D cubes. OpenGL® is a standard specification defining a cross-language, cross-platform API for writing applications that produce 2D and 3D computer graphics. OpenGL® ES 1.1 is light-weight but packed with functionalities for hardware acceleration, improved image quality with multi-texture support, and optimizations to increase performance while reducing memory bandwidth usage to save power. ElmGLView can support the surface for 3D rendering.</p>
+
+ <p class="figure">Figure: GLView11Cube</p>
+ <p align="center"><img alt="GLView11Cube" src="../images/glview11_cube.png" /></p>
+
+
+<h2>Initializing the Application</h2>
+<p>The easiest way to use OpenGL® within an EFL application is to rely on the Elementary GLView component.</p>
+<p>Current GLView can support both GELS2.0 and 1.1. GLView with the GLES 1.1 basic application has a similar basic format as the other GLView application.</p>
+<p>Create a basic application:</p>
+<pre class="prettyprint">
+#include <Evas_GL.h>
+#include <Elementary.h>
+#include <efl_extension.h>
+#include <dlog.h>
+</pre>
+
+<p>The GLView application should include the header files as the <span style="font-family: Courier New,Courier,monospace"><Evas_GL.h></span> and <span style="font-family: Courier New,Courier,monospace"><Elementary.h></span>. The <span style="font-family: Courier New,Courier,monospace"><efl_extension.h></span> header file is related to key events and the <span style="font-family: Courier New,Courier,monospace"><dlog.h></span> header file is for seeing logs.</p>
+<pre class="prettyprint">
+#define S(a) evas_object_show(a)
+
+#define SX(a) do
+{
+ evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_weight_set(a, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(a);
+} while (0)
+
+#define SF(a) do
+{
+ evas_object_size_hint_align_set(a, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_weight_set(a, 0.00001, 0.00001);
+ evas_object_show(a);
+} while (0)
+
+static bool
+app_create(void *data)
+{
+ Evas_Object *o, *t;
+ appdata_s *ad = (appdata_s*)data;
+
+ // Force OpenGL engine
+ elm_config_accel_preference_set("opengl");
+
+ // Add a window
+ ad->win = o = elm_win_add(NULL,"glview", ELM_WIN_BASIC);
+ evas_object_smart_callback_add(o, "delete,request", _close_cb, ad);
+ evas_object_event_callback_add(o, EVAS_CALLBACK_RESIZE, _win_resize_cb, ad);
+ eext_object_event_callback_add(o, EEXT_CALLBACK_BACK, _close_cb, ad);
+ S(o);
+
+ // Add a background
+ ad->bg = o = elm_bg_add(ad->win);
+ elm_win_resize_object_add(ad->win, ad->bg);
+ elm_bg_color_set(o, 68, 68, 68);
+ S(o);
+
+ // Add a resize conformant
+ ad->conform = o = elm_conformant_add(ad->win);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ SX(o);
+
+ ad->table = t = elm_table_add(ad->win);
+ S(t);
+
+ o = elm_label_add(ad->win);
+ elm_object_text_set(o, "Gles 1.1 Cube");
+ elm_table_pack(t, o, 1, 0, 3, 1);
+ SF(o);
+
+ o = elm_button_add(ad->win);
+ elm_object_text_set(o, "Quit");
+ evas_object_smart_callback_add(o, "clicked", _close_cb, ad);
+ elm_table_pack(t, o, 1, 9, 3, 1);
+ SF(o);
+
+ ad->glview = o = _glview_create(ad);
+ SX(o);
+
+ // Add an animator to call _anim_cb_() every (1/60) seconds
+ // _anim_cb() indicates that glview has changed, which eventually triggers
+ // function (draw_gl() here) to redraw glview surface
+
+ ecore_animator_frametime_set(1.0 / 60.0);
+ ad->anim = ecore_animator_add(_anim_cb, ad);
+ evas_object_event_callback_add(ad->glview, EVAS_CALLBACK_DEL, _destroy_anim, ad->anim);
+
+ return true;
+}
+</pre>
+
+<p>To set the GL rendering engine, the application calls the <span style="font-family: Courier New,Courier,monospace">elm_config_accel_preference_set("opengl")</span> function with the special string:</p>
+<pre class="prettyprint">
+static Evas_Object*
+_glview_create(appdata_s *ad)
+{
+ Evas_Object *obj;
+
+ // Create a GLView with an OpenGL®-ES 1.1 context
+ obj = elm_glview_version_add(ad->win, EVAS_GL_GLES_1_X);
+ elm_table_pack(ad->table, obj, 1, 1, 3, 1);
+ evas_object_data_set(obj, APPDATA_KEY, ad);
+
+ elm_glview_mode_set(obj,
+ ELM_GLVIEW_ALPHA |
+ ELM_GLVIEW_DEPTH
+ );
+ elm_glview_resize_policy_set(obj, ELM_GLVIEW_RESIZE_POLICY_RECREATE);
+ elm_glview_render_policy_set(obj, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);
+
+ elm_glview_init_func_set(obj, init_gles);
+ elm_glview_del_func_set(obj, destroy_gles);
+ elm_glview_resize_func_set(obj, resize_gl);
+ elm_glview_render_func_set(obj, draw_gl);
+
+ return obj;
+}
+</pre>
+
+<p>To create ElmGLView with GLES 1.1, use the <span style="font-family: Courier New,Courier,monospace">elm_glview_version_add()</span> function with the specific version (<span style="font-family: Courier New,Courier,monospace">EVAS_GL_GLES_1_X</span>). The current ElmGLView can support both GLES 2.0 and 1.1.</p>
+
+<h2>Setting up Callbacks</h2>
+<p>To set up callbacks:</p>
+<ol>
+<li>Set the initialization callback.
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL® context and surface have been created. This is called from the main loop, as are the 3 other callbacks.</p>
+<pre class="prettyprint">
+#include <Elementary_GL_Helpers.h></pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace"><Elementary_GL_Helpers.h></span> header file provides a set of convenience functions and macros. To use these functions and macros, include the header file in the application.</p>
+<pre class="prettyprint">
+void
+init_gles(Evas_Object *obj)
+{
+ int w, h;
+ appdata_s *ad;
+
+ ELEMENTARY_GLVIEW_USE(obj);
+ ad = evas_object_data_get(obj, APPDATA_KEY);
+
+ glGenTextures(2, ad->tex_ids);
+
+ // Create and map texture 1
+ glBindTexture(GL_TEXTURE_2D, ad->tex_ids[0]);
+ glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 128, 128, 0, GL_RGBA, GL_UNSIGNED_SHORT_4_4_4_4, IMAGE_4444_128_128_1);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
+
+ // Create and map texture 2
+ glBindTexture(GL_TEXTURE_2D, ad->tex_ids[1]);
+ glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 128, 128, 0, GL_RGB, GL_UNSIGNED_SHORT_5_6_5, IMAGE_565_128_128_1);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
+ glTexParameterx(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
+
+ ad->current_tex_index = 0;
+
+ glShadeModel(GL_SMOOTH);
+
+ glEnable(GL_CULL_FACE);
+ glCullFace(GL_BACK);
+
+ glEnable(GL_DEPTH_TEST);
+ glDepthFunc(GL_LESS);
+
+ elm_glview_size_get(obj, &w, &h);
+ set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);
+}
+</pre>
+
+<p>In the GLES 1.1 sample, 2 textures are created and mapped in this function.</p>
+</li>
+
+<li>Set the resize callback.
+<p>The resize callback is called whenever the GLView component is resized. A common action to take here is to reset the viewport and matrix mode.</p>
+<pre class="prettyprint">
+void resize_gl(Evas_Object *obj)
+{
+ int w, h;
+
+ elm_glview_size_get(obj, &w, &h);
+ set_perspective(obj, 60.0f, w, h, 1.0f, 400.0f);
+}
+</pre>
+</li>
+
+<li>Set the draw callback.
+<p>The draw 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>
+<pre class="prettyprint">
+ elm_glview_render_policy_set(glview, ELM_GLVIEW_RENDER_POLICY_ON_DEMAND);</pre>
+
+<p>Another policy is <span style="font-family: Courier New,Courier,monospace">ELM_GLVIEW_POLICY_ALWAYS</span>.</p>
+<p>The application can now draw anything using GL primitives when this callback is triggered. All draw operations are restricted to the surface of the GLView object previously created. The following example covers the whole window:</p>
+<pre class="prettyprint">
+void draw_gl(Evas_Object *obj)
+{
+ELEMENTARY_GLVIEW_USE(obj);
+
+ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+ glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
+
+ draw_cube1(obj);
+ draw_cube2(obj);
+}
+</pre>
+</li>
+
+<li>Set the delete callback.
+<p>The delete callback is triggered when the GLView is destroyed from the main loop, and no other callback can be called on the same object afterwards. In GELS 1.1, 2 textures are deleted.</p>
+<pre class="prettyprint">
+void
+destroy_gles(Evas_Object *obj)
+{
+ appdata_s *ad;
+
+ ELEMENTARY_GLVIEW_USE(obj);
+ ad = evas_object_data_get(obj, APPDATA_KEY);
+
+ if (ad->tex_ids[0])
+ {
+ glDeleteTextures(1, &(ad->tex_ids[0]));
+ ad->tex_ids[0] = 0;
+ }
+
+ if (ad->tex_ids[1])
+ {
+ glDeleteTextures(1, &(ad->tex_ids[1]));
+ ad->tex_ids[1] = 0;
+ }
+}
+</pre>
+</li>
+
+<li>Add an animator.
+<p>The application above is technically working but the scene does not get updated unless the object is marked as such. Games usually use an animator to update the scene regularly. The following example shows a default update refresh rate:</p>
+<pre class="prettyprint">
+static Eina_Bool
+_anim_cb(void *data)
+{
+ appdata_s *ad = data;
+
+ elm_glview_changed_set(ad->glview);
+ return ECORE_CALLBACK_RENEW;
+}
+</pre>
+
+<p>Any other event can be used to refresh the view, for example, the user input if the view does not need to be updated.</p>
+</li>
+</ol>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">OpenGL® ES 1.1 application can be implemented in Tizen. However, if OpenGL® ES 1.1 and OpenGL® ES 2.0 are used together, they cannot be used in the same file.</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>GLViewCube Sample Overview</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"/></p>
+ </div>
+
+ <h1>GLViewCube Sample Overview</h1>
+
+<p>This sample demonstrates how to render with OpenGL® ES 2.0 using an Elementary GLView component. It goes through the creation of a simple UI and how to draw a rotating cube using simple vertex and fragment shaders.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <p class="figure">Figure: GLViewCube</p>
+ <p align="center"><img alt="GLViewCube" src="../images/glview_cube.png" /></p>
+
+<h2>Elementary_GL_Helpers</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace"><Elementary_GL_Helpers.h></span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>
+<pre class="prettyprint">
+#include <app.h>
+#include <Elementary.h>
+#include <Elementary_GL_Helpers.h>
+#include <efl_extension.h>
+
+#include "glviewcube_utils.h"
+
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+...
+static bool app_create(void *data)
+{
+...
+ // Create and initialize GLView
+ gl = elm_glview_add(win);
+ ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
+...
+}
+</pre>
+
+<h2>Setting up Callbacks</h2>
+<ol>
+<li>Set the initialization callback.
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL® context and surface have been created.</p>
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
+
+<pre class="prettyprint">
+static void init_gl(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+
+ if (!ad->initialized)
+ {
+ init_shaders(obj);
+ glEnable(GL_DEPTH_TEST);
+ ad->initialized = EINA_TRUE;
+ }
+ ...
+}
+</pre>
+</li>
+
+<li>Initialize the shaders.
+<ol type="a">
+<li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
+ <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+ <pre class="prettyprint">
+static void init_shaders(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+ const char *p;
+ p = vertex_shader;
+ ad->vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+ glShaderSource(ad->vtx_shader, 1, &p, NULL);
+ glCompileShader(ad->vtx_shader);
+
+ p = fragment_shader;
+ ad->fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+ glShaderSource(ad->fgmt_shader, 1, &p, NULL);
+ glCompileShader(ad->fgmt_shader);
+</pre></li>
+ <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+ <pre class="prettyprint">
+ ad->program = glCreateProgram();
+ glAttachShader(ad->program, ad->vtx_shader);
+ glAttachShader(ad->program, ad->fgmt_shader);
+ glLinkProgram(ad->program);
+</pre>
+ </li>
+
+ <li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> functions. If the shader program attributes <span style="font-family: Courier New,Courier,monospace">a_position</span>, <span style="font-family: Courier New,Courier,monospace">a_color</span>, and <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
+ <p>The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> function retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color. The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position.</p>
+ <pre class="prettyprint">
+ ad->idx_position = glGetAttribLocation(ad->program, "a_position");
+ ad->idx_color = glGetAttribLocation(ad->program, "a_color");
+ ad->idx_mvp = glGetUniformLocation(ad->program, "u_mvpMatrix");
+ </pre>
+ </li>
+
+ <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.
+ <pre class="prettyprint">
+ glUseProgram(ad->program);
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Set the resize callback.
+<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>
+<pre class="prettyprint">
+static void resize_gl(Evas_Object *obj)
+{
+ int w, h;
+ elm_glview_size_get(obj, &w, &h);
+ glViewport(0, 0, w, h);
+}
+</pre>
+</li>
+
+
+<li>Set the draw callback.
+<p>The draw callback is called whenever a new frame has to be drawn.</p>
+<p>The application can now draw anything using GL primitives when this callback is triggered.</p>
+<ol type="a">
+ <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
+ <pre class="prettyprint">
+static void draw_gl(Evas_Object *obj)
+{
+ ...
+ elm_glview_size_get(obj, &w, &h);
+ ...
+ glViewport(0, 0, w, h);
+</pre>
+ </li>
+ <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the cube. In this case, the parameters are position and color. In both instances, the final parameter (vertices and colors) represent the previously defined arrays - vertices and colors.
+ <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. The enabled attributes can be accessed and used to render the scene.</p>
+ <pre class="prettyprint">
+ glVertexAttribPointer(ad->idx_position, 3, GL_FLOAT, GL_FALSE,
+ 3 * sizeof(float), cube_vertices);
+ glVertexAttribPointer(ad->idx_color, 4, GL_FLOAT, GL_FALSE,
+ 4 * sizeof(float), cube_colors);
+
+ glEnableVertexAttribArray(ad->idx_position);
+ glEnableVertexAttribArray(ad->idx_color);
+ </pre>
+ </li>
+
+ <li>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> function modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the cube. An MVP matrix is created with data after each vertex of the cube has passed through 2 transformation stages: The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the perspective or orthography.
+ <pre class="prettyprint">
+ glUniformMatrix4fv(ad->idx_mvp, 1, GL_FALSE, ad->mvp);</pre>
+ </li>
+
+ <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function. The final parameter in this function is the indices array.
+ <pre class="prettyprint">
+ glDrawElements(GL_TRIANGLES, cube_indices_count,
+ GL_UNSIGNED_SHORT, cube_indices);
+ </pre>
+ </li>
+ </ol>
+ </li>
+
+<li>Add an animator.
+<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
+<pre class="prettyprint">
+static Eina_Bool anim(void *data)
+{
+elm_glview_changed_set(data);
+return EINA_TRUE;
+}
+
+static bool app_create(void *data)
+{
+ ...
+ ani = ecore_animator_add(anim, gl);
+ ...
+}
+</pre>
+</li>
+
+<li>Set event callbacks.
+<p>The event callbacks receive touch events and allow you to rotate the cube in a vertical or horizontal direction.</p>
+
+<pre class="prettyprint">
+static void mouse_down_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+ appdata_s *ad = data;
+ ad->mouse_down = EINA_TRUE;
+}
+
+static void mouse_move_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+ Evas_Event_Mouse_Move *ev;
+ ev = (Evas_Event_Mouse_Move *)event_info;
+ appdata_s *ad = data;
+ float dx = 0, dy = 0;
+
+ if (ad->mouse_down)
+ {
+ dx = ev->cur.canvas.x - ev->prev.canvas.x;
+ dy = ev->cur.canvas.y - ev->prev.canvas.y;
+ ad->xangle += dy;
+ ad->yangle += dx;
+ }
+}
+
+static void mouse_up_cb(void *data, Evas *e , Evas_Object *obj , void *event_info)
+{
+ appdata_s *ad = data;
+ ad->mouse_down = EINA_FALSE;
+}
+</pre>
+</li>
+
+
+<li>Set the delete callback.
+<p>The delete callback is triggered when the GLView is destroyed from the main loop.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span> and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free memory.</p>
+<pre class="prettyprint">
+static void del_gl(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+
+ glDeleteShader(ad->vtx_shader);
+ glDeleteShader(ad->fgmt_shader);
+ glDeleteProgram(ad->program);
+
+ evas_object_data_del((Evas_Object*) obj, "ad");
+}
+</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>GLViewShader Sample Overview</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"/></p>
+ </div>
+
+ <h1>GLViewShader Sample Overview</h1>
+
+<p>The GLViewShader sample demonstrates how to render more complex geometries with OpenGL® ES 2.0, using slightly more advanced vertex and fragment shaders to draw a rotating teapot. It also demonstrates how to use Elementary GLView helper macros to port existing code easily to Tizen.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The application presented in this overview is not a full Tizen application, since it does not use the Application Framework. The application simply starts and runs.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p class="figure">Figure: GLViewShader</p>
+ <p align="center"><img alt="GLViewShader" src="../images/glview_shader.png" /></p>
+
+<h2>Elementary_GL_Helpers</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace"><Elementary_GL_Helpers.h></span> header file provides a set of convenience functions and macros. To use these functions and macros, include this header file in the application.</p>
+<pre class="prettyprint">
+#include <app.h>
+#include <Elementary.h>
+#include <Elementary_GL_Helpers.h>
+#include <efl_extension.h>
+
+#include "glviewcube_utils.h"
+
+ELEMENTARY_GLVIEW_GLOBAL_DEFINE();
+...
+static bool app_create(void *data)
+{
+ ...
+ // Create and initialize GLView
+ gl = elm_glview_add(win);
+ ELEMENTARY_GLVIEW_GLOBAL_USE(gl);
+ ...
+}
+</pre>
+
+<h2>Setting up Callbacks</h2>
+
+<p>To set up callbacks:</p>
+<ol>
+<li>Set the initialization callback.
+<p>The initialization callback is called when the GLView is first created, after a valid OpenGL® context and surface have been created.</p>
+<p>This callback function initializes shaders using the <span style="font-family: Courier New,Courier,monospace">init_shaders(obj)</span> function.</p>
+<p>A Vertex Buffer Object (VBO) allows vertex array data to be stored in a high-performance graphics memory on the server, enabling efficient data transfer.</p>
+<p>A VBO is created in the application for the teapot vertices. Additionally, an Index Buffer Object (IBO) is created for the indices. The <span style="font-family: Courier New,Courier,monospace">glGenBuffers()</span> function specifies an array in which the buffer object name is stored.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function binds the buffer object to a specified target. In this case, the target is <span style="font-family: Courier New,Courier,monospace">GL_ARRAY_BUFFER</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glBufferData()</span> function is used to create a new data storage for the current buffer object. The parameters of the function are the buffer object target, the data store size, the array of teapot vertices, and the usage function of the data store (in this case, <span style="font-family: Courier New,Courier,monospace">GL_STATIC_DRAW</span>).</p>
+<pre class="prettyprint">
+static void init_gl(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+ ...
+ if (!ad->initialized)
+ {
+ init_shaders(obj);
+ ...
+ glEnable(GL_DEPTH_TEST);
+
+ glGenBuffers(1, &ad->idx_vbo);
+ glBindBuffer(GL_ARRAY_BUFFER, ad->idx_vbo);
+ glBufferData(GL_ARRAY_BUFFER, 6 * sizeof(float) * MAX_V_COUNT,
+ TEAPOT_VERTICES, GL_STATIC_DRAW);
+
+ glGenBuffers(1, &ad->idx_ibo);
+ glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad->idx_ibo);
+ glBufferData(GL_ELEMENT_ARRAY_BUFFER,
+ 3 * sizeof(unsigned short) * MAX_F_COUNT, TEAPOT_INDICES,
+ GL_STATIC_DRAW);
+
+ ad->initialized = EINA_TRUE;
+ }
+}
+</pre>
+</li>
+
+<li>Initialize the shaders:
+<ol type="a">
+ <li>The shader instances for the fragment and vertex shader are compiled and created by passing the shader type as a parameter to the <span style="font-family: Courier New,Courier,monospace">glCreateShader()</span> function.
+ <p>Load the shader objects, use the GLES2 Shader compiler to read and compile the shader source code for both the fragment and the vertex shader.</p>
+ <pre class="prettyprint">
+
+static void init_shaders(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+ const char *p;
+ p = vertex_shader;
+ ad->vtx_shader = glCreateShader(GL_VERTEX_SHADER);
+ glShaderSource(ad->vtx_shader, 1, &p, NULL);
+ glCompileShader(ad->vtx_shader);
+
+ p = fragment_shader;
+ ad->fgmt_shader = glCreateShader(GL_FRAGMENT_SHADER);
+ glShaderSource(ad->fgmt_shader, 1, &p, NULL);
+ glCompileShader(ad->fgmt_shader);
+</pre></li>
+ <li>Once the shader objects have been loaded, a shader program is created. The program attaches and links the shader objects to the shader program.
+ <pre class="prettyprint">
+ ad->program = glCreateProgram();
+ glAttachShader(ad->program, ad->vtx_shader);
+ glAttachShader(ad->program, ad->fgmt_shader);
+ glLinkProgram(ad->program);
+</pre>
+</li>
+
+<li>Get the location for each vertex or pixel attribute in the shader program using the <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> and <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> functions. If the shader program attributes, such as <span style="font-family: Courier New,Courier,monospace">u_mvpMatrix</span> and <span style="font-family: Courier New,Courier,monospace">a_position</span> are valid, these functions return an integer value that represents the index location of the attributes. For invalid attributes, the return value is -1.
+<p>The <span style="font-family: Courier New,Courier,monospace">glGetUniformLocation()</span> function retrieves the location of the attributes that have an effect on groups of vertices or pixels, such as model view matrix, projection matrix, or light position. The <span style="font-family: Courier New,Courier,monospace">glGetAttribLocation()</span> retrieves the location of the attributes that have an effect on a vertex or pixel, such as position vector, normal vector, or vertex color.</p>
+<pre class="prettyprint">
+ ad->idx_light_dir = glGetUniformLocation(ad->program, "u_light_dir");
+ ad->idx_mvp = glGetUniformLocation(ad->program, "u_mvpMatrix");
+ ad->idx_time_stamp = glGetUniformLocation(ad->program, "u_time_stamp");
+
+ ad->idx_vposition = glGetAttribLocation(ad->program, "a_position");
+ ad->idx_vnormal = glGetAttribLocation(ad->program, "a_normal");
+</pre>
+</li>
+
+ <li>Install the shader program and enable the GPU to execute the shader operations in the frame buffer.
+ <pre class="prettyprint">
+ glUseProgram(ad->program);
+}
+</pre>
+</li>
+</ol>
+</li>
+
+<li>Set the resize callback.
+<p>The resize callback is called whenever the GLView component is resized. It resets the viewport.</p>
+<pre class="prettyprint">
+static void resize_gl(Evas_Object *obj)
+{
+ int w, h;
+ elm_glview_size_get(obj, &w, &h);
+ glViewport(0, 0, w, h);
+}
+</pre>
+</li>
+
+<li>Set the draw callback.
+<p>The draw callback is called whenever a new frame has to be drawn.</p>
+<p>The application can now draw anything using GL primitives when this callback is triggered.</p>
+<ol type="a">
+ <li>The <span style="font-family: Courier New,Courier,monospace">glViewport()</span> function specifies the affine transformation of the x and y values from normalized device coordinates to window coordinates as specified by the <span style="font-family: Courier New,Courier,monospace">elm_glview_size_get()</span> function.
+ <pre class="prettyprint">
+
+static void draw_gl(Evas_Object *obj)
+{
+ ...
+ elm_glview_size_get(obj, &w, &h);
+ ...
+ glViewport(0, 0, w, h);
+</pre>
+ </li>
+ <li>The <span style="font-family: Courier New,Courier,monospace">glUniform4fv()</span> function modifies the light direction in the graphic based on the light-related information of the teapot.
+ <p>The <span style="font-family: Courier New,Courier,monospace">glUniformMatrix4fv()</span> modifies the values of the 4x4 MVP (Model View/Projection) uniform matrix according to the vertices information of the teapot. An MVP matrix is created with data after each vertex of the teapot has passed through 2 transformation stages. The first transformation state is the model view transformation, which includes translation, rotation, and scaling of objects. The second state is projection, which includes changes in the perspective or orthography.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">glUniform1f()</span> function modifies the timer-related information while drawing the teapot on the screen.</p>
+ <pre class="prettyprint">
+ glUniform4fv(ad->idx_light_dir, 1, ad->light_dir);
+ glUniformMatrix4fv(ad->idx_mvp, 1, GL_FALSE, ad->mvp);
+ glUniform1f(ad->idx_time_stamp, ad->time_stamp);
+ </pre>
+ </li>
+
+ <li>The <span style="font-family: Courier New,Courier,monospace">glVertexAttribPointer()</span> function is used to define an array of generic vertex attribute data. These attributes are parameters associated with each vertex of the teapot. In this case, they are position and normal.
+ <p>A normal tells you in which direction a surface is facing. This helps in identifying the proper lighting of a surface.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">glEnableVertexAttribArray()</span> function enables the generic vertex attribute data arrays. These enabled attributes can be accessed and used to render the scene and apply the desired shading to it.</p>
+ <pre class="prettyprint">
+ glBindBuffer(GL_ARRAY_BUFFER, ad->idx_vbo);
+ glVertexAttribPointer(ad->idx_vposition, 3, GL_FLOAT, GL_FALSE,
+ sizeof(float) * 6, 0);
+ glEnableVertexAttribArray(ad->idx_vposition);
+ glVertexAttribPointer(ad->idx_vnormal, 3, GL_FLOAT, GL_FALSE,
+ sizeof(float) * 6, (void*) (sizeof(float) * 3));
+ glEnableVertexAttribArray(ad->idx_vnormal);
+ glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, ad->idx_ibo);
+ </pre>
+ </li>
+
+ <li>Once the vertex arrays have been enabled, the actual process of rendering graphics primitives from the array data occurs using the <span style="font-family: Courier New,Courier,monospace">glDrawElements()</span> function.
+ <pre class="prettyprint">
+ glDrawElements(GL_TRIANGLES, MAX_F_COUNT * 3,
+ GL_UNSIGNED_SHORT, 0);
+ </pre>
+ </li>
+
+ <li>The <span style="font-family: Courier New,Courier,monospace">glFlush()</span> function empties all buffers causing all issued commands to be executed as quickly as they are accepted by the rendering engine.
+ <p>Finally, the vertex attribute arrays are disabled using the <span style="font-family: Courier New,Courier,monospace">glDisableVertexAttribArray()</span> function, and the buffer object binding is released by calling the <span style="font-family: Courier New,Courier,monospace">glBindBuffer()</span> function and specifying the buffer as 0.</p>
+ <pre class="prettyprint">
+ glFlush();
+
+ glDisableVertexAttribArray(ad->idx_vposition);
+ glDisableVertexAttribArray(ad->idx_vnormal);
+ glBindBuffer(GL_ARRAY_BUFFER, 0);
+ glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
+}
+ </pre>
+ </li></ol></li>
+
+<li>Add an animator.
+<p>The application regularly triggers updates of the GLView using the <span style="font-family: Courier New,Courier,monospace">elm_glview_changed_set()</span> function.</p>
+<pre class="prettyprint">
+static Eina_Bool anim(void *data)
+{
+elm_glview_changed_set(data);
+return EINA_TRUE;
+}
+
+static bool app_create(void *data)
+{
+ ...
+ ani = ecore_animator_add(anim, gl);
+ ...
+}
+</pre>
+</li>
+
+<li>Set the delete callback.
+<p>The delete callback is triggered when the GLView is being destroyed from the main loop.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">glDeleteBuffers()</span>, <span style="font-family: Courier New,Courier,monospace">glDeleteShader()</span>, and <span style="font-family: Courier New,Courier,monospace">glDeleteProgram()</span> functions are used to free the memory.</p>
+<pre class="prettyprint">
+static void del_gl(Evas_Object *obj)
+{
+ appdata_s *ad = evas_object_data_get(obj, "ad");
+
+ glDeleteBuffers(1, &ad->idx_vbo);
+ glDeleteBuffers(1, &ad->idx_ibo);
+ glDeleteShader(ad->vtx_shader);
+ glDeleteShader(ad->fgmt_shader);
+ glDeleteProgram(ad->program);
+
+ evas_object_data_del((Evas_Object*) obj, "ad");
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>GPS Consumer Sample Overview</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"/></p>
+ </div>
+
+ <h1>GPS Consumer Sample Overview</h1>
+
+ <p>The GPS Consumer sample application demonstrates how to implement a location-based application utilizing the geolocation data provided by a <a href="gps_service_sd_mn.htm">GPS service</a> and a geolocation boundary provided by the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a> API.</p>
+ <p>The following figure illustrates the application views.</p>
+ <p class="figure">Figure: GPS Consumer screens</p>
+ <p align="center"><img alt="No service" src="../images/gps_consumer_no_service_sd.png" /> <img alt="Inside the boundary" src="../images/gps_consumer_inside_boundary_sd.png" /> <img alt="Outside the boundary" src="../images/gps_consumer_outside_boundary_sd.png" /></p>
+
+ <p>The application is responsible for displaying geolocation and satellite information acquired from the GPS service through a message port. The coordinates (longitude and latitude) are acquired at 1-second intervals, whereas the satellites information is fetched every 5 seconds. These interval values are determined by the GPS service.</p>
+
+ <p>The application main window consists of 3 areas:</p>
+ <ul>
+ <li>Information: displays the longitude, latitude, and number of visible satellites</li>
+ <li>Message: displays textual information based on the geolocation data received from the GPS service and cross-boundary calculation
+ <ul>
+ <li><strong>Boundary area exceeded</strong>: if the current position is outside the defined boundary</li>
+ <li><strong>Inside boundary area</strong>: if the current position is inside the defined boundary</li>
+ </ul>
+ </li>
+ <li>Map: displays the local area with the current position marked. At the initial position, the circular boundary is set with a radius equal to 30 m. The current position marker is updated according to the acquired geolocation data.</li>
+ </ul>
+
+
+<h2>Implementation</h2>
+<h3>Message Port Module</h3>
+<p>The message port module is used for communication between the GPS service and consumer applications. The GPS consumer application must register a local port with a specified name to receive data from the GPS service. To do that, the <span style="font-family: Courier New,Courier,monospace">message_port_register_local_port()</span> function is invoked. The function takes the local port name as the first parameter and a callback function to be called when a message is received as the second. If the port is created successfully, a local message port ID is returned; otherwise, the function returns a negative error value.</p>
+<pre class="prettyprint">
+int local_port_id = message_port_register_local_port(LOCAL_PORT_NAME, _msg_port_cb, NULL);
+if (local_port_id < 0)
+{
+ LOGE("Failed to register port, error: %d", local_port_id);
+
+ return false;
+}
+</pre>
+
+<p>When a message is received on the previously registered local port, the <span style="font-family: Courier New,Courier,monospace">_msg_port_cb()</span> function is invoked. The message in a form of a bundle is parsed here to check the message type and content. The <span style="font-family: Courier New,Courier,monospace">_bundle_str_error_check_get()</span> function is a simple helper that retrieves a string value associated with a given key and logs the appropriate message in case an error occurs. After the message content is acquired, it is passed to another function to be handled depending on the message type.</p>
+<pre class="prettyprint">
+static void
+_msg_port_cb(int local_port_id, const char *remote_app_id, const char *remote_port, bool trusted, bundle *message, void *user_data)
+{
+ char *msg_type = NULL;
+ char *latitude_str = NULL, *longitude_str = NULL;
+ char *satellites_count_str = NULL;
+
+ if (!_bundle_str_error_check_get(message, MESSAGE_TYPE_STR, &msg_type))
+ {
+ return;
+ }
+
+ if (!strncmp(msg_type, MESSAGE_TYPE_SATELLITES_UPDATE, strlen(msg_type)))
+ {
+ if (!_bundle_str_error_check_get(message, MESSAGE_SATELLITES_COUNT_STR, &satellites_count_str))
+ {
+ return;
+ }
+ LOGI("Received message from %s: satellites_count %s", remote_app_id, satellites_count_str);
+ _satellites_update(satellites_count_str);
+ }
+ else if (!strncmp(msg_type, MESSAGE_TYPE_POSITION_UPDATE, strlen(msg_type)))
+ {
+ if (!_bundle_str_error_check_get(message, MESSAGE_LATITUDE_STR, &latitude_str) ||
+ !_bundle_str_error_check_get(message, MESSAGE_LONGITUDE_STR, &longitude_str))
+ {
+ return;
+ }
+ LOGI("Received message from %s: position data: %s %s", remote_app_id, latitude_str, longitude_str);
+ _position_update(latitude_str, longitude_str);
+ }
+}
+</pre>
+
+<pre class="prettyprint">
+static bool
+_bundle_str_error_check_get(bundle *message, char *msg_type, char **message_content)
+{
+ if (bundle_get_str(message, msg_type, message_content) != BUNDLE_ERROR_NONE)
+ {
+ LOGE("Failed to get message: %s", msg_type);
+
+ return false;
+ }
+
+ return true;
+}
+</pre>
+
+<p>When the GPS consumer application receives a message with the initial coordinates, it uses the values to create a map
+ with the circle boundary as a center point defined by the coordinates.</p>
+<pre class="prettyprint">
+static void
+_circle_init(char *circle_latitude_str, char *circle_longitude_str)
+{
+ double circle_latitude, circle_longitude;
+
+ if (!circle_latitude_str || !circle_longitude_str)
+ {
+ LOGE("Invalid parameter");
+ return;
+ }
+
+ sscanf(circle_latitude_str, "%lf", &circle_latitude);
+ sscanf(circle_longitude_str, "%lf", &circle_longitude);
+
+ view_manager_map_with_circle_boundary_create(circle_longitude, circle_latitude);
+}
+</pre>
+
+<p>When the first position update message is received, the coordinates are used to create a map with the circle boundary whose center point is defined by the coordinate values. After that, when the position update message is received, the coordinates are passed to the view manager to update the current location marker on the map as well as to check whether the current coordinates are inside the previously defined boundary.</p>
+
+<pre class="prettyprint">
+static void
+_position_update(char *latitude_str, char *longitude_str)
+{
+ double latitude, longitude;
+
+ if (!latitude_str || !longitude_str)
+ {
+ LOGE("Invalid parameter");
+
+ return;
+ }
+
+ sscanf(latitude_str, "%lf", &latitude);
+ sscanf(longitude_str, "%lf", &longitude);
+
+ view_manager_map_position_update(longitude, latitude);
+}
+</pre>
+
+<p>When the satellite update message is received, the satellite count is passed to the view manager to handle the displayed satellite value.</p>
+<pre class="prettyprint">
+static void
+_satellites_update(char *satellites_count_str)
+{
+ view_manager_satellites_count_update(satellites_count_str);
+}
+</pre>
+
+<h3>View Manager Module</h3>
+<p>The application UI consists of a window object with a standard setup with an EDJE-defined layout.</p>
+<p>The map is created after the first position update message is received. The zoom level is set to <span style="font-family: Courier New,Courier,monospace">ZOOM_LEVEL</span> (18), which is currently the maximum supported value.</p>
+<pre class="prettyprint">
+static Evas_Object*
+_map_create(Evas_Object *parent)
+{
+ Evas_Object *map = elm_map_add(parent);
+ if (!map)
+ {
+ LOGE("Failed to create map");
+
+ return NULL;
+ }
+
+ evas_object_size_hint_weight_set(map, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(map, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(map);
+
+ elm_map_zoom_set(map, ZOOM_LEVEL);
+
+ return map;
+}
+</pre>
+
+<p>After the map has been created, a circle boundary is created with the center defined by the received coordinates and the radius equal to 30 m. The boundary consists of 2 elements:</p>
+ <ul>
+ <li>Map overlay, which is a graphic representation of the boundary. It is created directly on the map using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_circle_add()</span> function. The map object, circle center longitude and latitude, as well as the pixel length of the radius are passed to this function. In this example, with the zoom level set to 18 and radius length equal to 30 meters, the pixel length of the radius is set to <span style="font-family: Courier New,Courier,monospace">BOUNDARY_CIRCLE_RADIUS_REL</span> (0.0002604).
+ <p>The minimum zoom level with which the overlay is displayed is set with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_displayed_zoom_min_set()</span> function.</p>
+ <pre class="prettyprint">
+// Create circle boundary
+LOGI("Circle boundary overlay at %lf, %lf", circle_longitude, circle_latitude);
+
+s_view_data.boundary_overlay = elm_map_overlay_circle_add(s_view_data.map, circle_longitude, circle_latitude, BOUNDARY_CIRCLE_RADIUS_REL);
+if (!s_view_data.boundary_overlay)
+{
+ LOGE("Failed to create boundary overlay");
+
+ return;
+}
+
+elm_map_overlay_displayed_zoom_min_set(s_view_data.boundary_overlay, ZOOM_LEVEL);
+</pre></li>
+
+ <li>Circle location bounds, which define a geographical boundary that can be used to track the device entering and leaving a specified region. The location center coordinates in a form of the <span style="font-family: Courier New,Courier,monospace">location_coords_s</span> structure and the radius (in meters) are passed to the <span style="font-family: Courier New,Courier,monospace">location_bounds_create_circle()</span> function to create the location bounds. The third function parameter is the newly created location bounds.
+ <pre class="prettyprint">
+// Create location bounds - BOUNDARY_CIRCLE_RADIUS [m] circle with center defined by initial coordinates
+circle_coords.longitude = circle_longitude;
+ circle_coords.latitude = circle_latitude;
+
+LOGI("center: %lf %lf, radius %lf", circle_coords.longitude, circle_coords.latitude, BOUNDARY_CIRCLE_RADIUS_M);
+int ret = location_bounds_create_circle(circle_coords, BOUNDARY_CIRCLE_RADIUS_M, &s_view_data.bounds);
+if (ret != LOCATIONS_ERROR_NONE)
+{
+ LOGE("Failed to create circle bound: error %d", ret);
+
+ return;
+}
+LOGI("Circle bounds created - %.1fm radius, center at %f, %f", BOUNDARY_CIRCLE_RADIUS_M, circle_coords.longitude, circle_coords.latitude);
+ </pre></li>
+ </ul>
+
+
+<p>When the position update message is received, the <span style="font-family: Courier New,Courier,monospace">view_manager_map_position_update()</span> function is invoked to apply the current position coordinate changes to the displayed map. Another map overlay is created indicating the device position on the map. The minimum zoom level with which the overlay is displayed is set with the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_displayed_zoom_min_set()</span> function.</p>
+<p>If the overlay already exists, its position is changed to match the current coordinates using the <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_region_set()</span> function.</p>
+<p>The region that is shown on the map is changed so that the current position marker is at the center of the map. It is done with the <span style="font-family: Courier New,Courier,monospace">elm_map_region_bring_in()</span> function, which takes the map object and new map center coordinates as parameters.</p>
+<pre class="prettyprint">
+// Set position overlay to new coordinates
+if (!s_view_data.pos_overlay)
+{
+ // Create position overlay
+ s_view_data.pos_overlay = elm_map_overlay_add(s_view_data.map, longitude, latitude);
+ if (!s_view_data.pos_overlay)
+ {
+ LOGE("Failed to create position overlay");
+
+ return;
+ }
+
+ elm_map_overlay_displayed_zoom_min_set(s_view_data.pos_overlay, ZOOM_LEVEL);
+ elm_map_overlay_show(s_view_data.pos_overlay);
+}
+else
+{
+ // Move position overlay
+ elm_map_overlay_region_set(s_view_data.pos_overlay, longitude, latitude);
+}
+
+// Show current region
+elm_map_region_bring_in(s_view_data.map, longitude, latitude);
+</pre>
+
+<p>To check whether the given coordinates are within the boundary circle, the <span style="font-family: Courier New,Courier,monospace">location_bounds_contains_coordinates()</span> function is invoked. It takes the location bounds object and the <span style="font-family: Courier New,Courier,monospace">location_coords_s</span> structure as parameters and returns a bool value (<span style="font-family: Courier New,Courier,monospace">true</span> if the bounds contain the specified coordinates, <span style="font-family: Courier New,Courier,monospace">false</span> otherwise).</p>
+<p>Depending on the result, a message is set either to <span style="font-family: Courier New,Courier,monospace">MESSAGE_BOUNDARY_INSIDE</span> (<strong>Inside boundary area</strong>) or <span style="font-family: Courier New,Courier,monospace">MESSAGE_BOUNDARY_OUTSIDE</span> (<strong>Boundary area exceeded</strong>).</p>
+<pre class="prettyprint">
+coords.longitude = longitude;
+coords.latitude = latitude;
+
+contains = location_bounds_contains_coordinates(s_view_data.bounds, coords);
+
+contains ? view_manager_message_update(MESSAGE_BOUNDARY_INSIDE) : view_manager_message_update(MESSAGE_BOUNDARY_OUTSIDE);
+</pre>
+
+<p>When the application is closed, the view resources must be released. The <span style="font-family: Courier New,Courier,monospace">elm_map_overlay_del()</span> function is used to delete the created map overlays. Also, the location bounds must be released using the <span style="font-family: Courier New,Courier,monospace">location_bounds_destroy()</span> function.</p>
+<pre class="prettyprint">
+elm_map_overlay_del(s_view_data.pos_overlay);
+elm_map_overlay_del(s_view_data.boundary_overlay);
+
+location_bounds_destroy(s_view_data.bounds);
+</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
--- /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>GPS Service Sample Overview</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"/></p>
+ </div>
+
+ <h1>GPS Service Sample Overview</h1>
+
+ <p>The GPS Service sample demonstrates how to implement a Tizen service that provides geolocation data. The geolocation data is obtained using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a> API and broadcasted to the consumer using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port</a> API.</p>
+ <p>Using the GPS module, the following information is obtained and broadcasted:</p>
+ <ul>
+ <li>Longitude</li>
+ <li>Latitude</li>
+ <li>Satellite information (the number of satellites in view)</li>
+ </ul>
+
+ <p>There are 2 types of messages broadcasted through the message port:</p>
+ <ul>
+ <li>Position update contains the current longitude and latitude. This message is sent at 1-second intervals.</li>
+ <li>Satellite update contains the number of satellites currently in view. This message is sent at 5-second intervals.</li>
+ </ul>
+
+ <p>No user interface is provided, as this is a service-like application that runs in the background.</p>
+
+ <p>The current implementation requires precise knowledge about the message receiver application (its package name).</p>
+
+<h2>Requirements</h2>
+<p>To ensure proper application execution, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/location</span> privilege must be set and the following features must be enabled:
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span></li>
+ </ul>
+</p>
+
+<h2>Implementation</h2>
+<h3>Location Manager Module</h3>
+<p>The application uses the location manager to retrieve the GPS and satellite data.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function is used to initialize the location manager handle, which is later used to acquire geolocation data. The first parameter defines the method used to retrieve this information (the application uses the Global Positioning System (GPS) method). The second parameter is the newly created location manager handle, used by every other location manager function.</p>
+
+<pre class="prettyprint">
+// Create the location manager handle
+if (location_manager_create(LOCATIONS_METHOD_GPS, &s_geolocation_data.manager) != LOCATIONS_ERROR_NONE)
+{
+ LOGE("Failed to create location manager");
+
+ return false;
+}
+</pre>
+
+<p>User-defined callback functions are registered to be invoked at defined intervals with the updated position information. The callbacks are defined for a position update with the <span style="font-family: Courier New,Courier,monospace">POSITION_UPDATE_INTERVAL</span> interval (1 second) and a satellite data update with the <span style="font-family: Courier New,Courier,monospace">SATELLITE_UPDATE_INTERVAL</span> interval (5 seconds).</p>
+<pre class="prettyprint">
+// Register callbacks for position and satellites data update
+location_error_e pos_cb = location_manager_set_position_updated_cb(s_geolocation_data.manager, _geolocation_manager_position_updated_cb, POSITION_UPDATE_INTERVAL, NULL);
+location_error_e sat_cb = gps_status_set_satellite_updated_cb(s_geolocation_data.manager, _geolocation_manager_satellite_updated_cb, SATELLITE_UPDATE_INTERVAL, NULL);
+
+if (pos_cb != LOCATIONS_ERROR_NONE || sat_cb != LOCATIONS_ERROR_NONE)
+{
+ LOGE("Failed to register callbacks for location manager");
+ geolocation_manager_service_destroy();
+
+ return false;
+}
+</pre>
+
+<p>To manage the location service:</p>
+<ol><li><p>To start the location service, the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function is invoked:</p>
+<pre class="prettyprint">
+location_manager_start(s_geolocation_data.manager);
+</pre></li>
+<li><p>To pause (stop) the location service, the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function is invoked:</p>
+<pre class="prettyprint">
+location_manager_stop(s_geolocation_data.manager);
+</pre></li>
+<li><p>When the location service is no longer needed, it is destroyed. The callbacks for position and satellite data updates must be unset and the location manager must be stopped. After that, the <span style="font-family: Courier New,Courier,monospace">location_manager_destroy()</span> function must be used to release the location manager.</p>
+<pre class="prettyprint">
+location_manager_unset_position_updated_cb(s_geolocation_data.manager);
+gps_status_unset_satellite_updated_cb(s_geolocation_data.manager);
+location_manager_stop(s_geolocation_data.manager);
+location_manager_destroy(s_geolocation_data.manager);
+</pre></li></ol>
+
+
+<p>Once location service is up and running, the application acquires initial position and satellite data.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">location_manager_get_last_position()</span> function is used to retrieve the location data. The data provided by the function is the last recorded coordinates. In addition to the position data (longitude, latitude, and altitude), the function also provides a timestamp that can be used to determine whether the acquired data is still valid.</p>
+<pre class="prettyprint">
+// Get last location information
+if (location_manager_get_last_position(s_geolocation_data.manager, &altitude, &init_coords->latitude, &init_coords->longitude, &timestamp) != LOCATIONS_ERROR_NONE)
+{
+ LOGE("Failed to get last location");
+
+ return false;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">gps_status_get_satellite()</span> function is used to acquire the satellite data. The second and third parameters are the number of active satellites and the number of satellites in view, respectively. This function also provides a timestamp for determining the data validity.</p>
+<p>Note that the satellite data is not supported on the Tizen Emulator. On the Emulator, this function always returns the <span style="font-family: Courier New,Courier,monospace">LOCATIONS_ERROR_NOT_SUPPORTED</span> error code. To ensure that the GPS service application works on the Emulator in case of the <span style="font-family: Courier New,Courier,monospace">gps_status_get_satellite()</span> failure, the satellite count is set to a fixed value (0).</p>
+<pre class="prettyprint">
+// Get initial count of satellites
+location_error_e ret = gps_status_get_satellite(s_geolocation_data.manager, &num_of_active, satellites_count, &timestamp);
+if (ret != LOCATIONS_ERROR_NONE)
+{
+ LOGE("Failed to get satellite data [%d]", ret);
+ // Satellite data is not supported on Tizen Emulator - satellite count remains at 0
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_position_updated_cb()</span> callback function is registered to be invoked at defined intervals with the updated position information. As parameters, this function gets the new latitude, longitude, and altitude, as well as a timestamp of the measurement and user-defined data.</p>
+<p>To ensure a proper information flow, the position update message is sent only if the initial data has already been sent. To prevent the application from sending useless information, it sends the position update only if the measurement took place less than <span style="font-family: Courier New,Courier,monospace">MAX_TIME_DIFF</span> (15) seconds ago. If these conditions are met, the application invokes the <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_position_coords_send()</span> function to send new coordinates to the GPS consumer application.</p>
+<pre class="prettyprint">
+static void
+_geolocation_manager_position_updated_cb(double latitude, double longitude, double altitude, time_t timestamp, void *data)
+{
+ location_coords_s coords;
+
+ coords.latitude = latitude;
+ coords.longitude = longitude;
+
+ time_t curr_timestamp;
+
+ // Get current time to compare to the last position timestamp
+ time(&curr_timestamp);
+
+
+ // Send updated position only if init data has been sent and position update
+ // was registered less than MAX_TIME_DIFF seconds ago
+ if (s_geolocation_data.init_data_sent && curr_timestamp - timestamp < MAX_TIME_DIFF)
+ {
+ // Send position update through message port
+ if (_geolocation_manager_position_coords_send(coords))
+ {
+ LOGI("Position updated to %f, %f", latitude, longitude);
+ }
+ else
+ {
+ LOGE("Failed to send position update");
+ }
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_satellite_updated_cb()</span> callback function is registered to be invoked at defined intervals with the updated satellite information (number of active and in view satellites). Also, the timestamp of the measurement is provided. A proper information flow is ensured in the same way as in the position update callback described above.</p>
+<p>If the initial data has been sent, new satellites in view count is sent to the GPS consumer application using the <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_satellites_count_send()</span> function.</p>
+<pre class="prettyprint">
+static void
+_geolocation_manager_satellite_updated_cb(int num_of_active, int num_of_inview, time_t timestamp, void *data)
+{
+ // Send update satellite count only if init data has been sent
+ if (s_geolocation_data.init_data_sent)
+ {
+ // Send satellite count update through message port
+ if (_geolocation_manager_satellites_count_send(num_of_inview))
+ {
+ LOGI("Satellite count updated: inview %d", num_of_inview);
+ }
+ else
+ {
+ LOGE("Failed to send satellite count update");
+ }
+ }
+}
+</pre>
+
+<h3>Message Port Module</h3>
+<p>The message port module is used for communication between the GPS service and consumer applications. The GPS consumer application registers a local port that can be used by other applications to send data to, provided that they have its package and port name. For that reason, the port name and GPS consumer application name are fixed.</p>
+<p>The GPS service application can check the state of the message port that the GPS consumer application has registered using the <span style="font-family: Courier New,Courier,monospace">message_port_check_remote_port()</span> function. This function takes the remote app ID and remote port name as parameters.</p>
+<pre class="prettyprint">
+// Check remote port state from GPS consumer
+if (message_port_check_remote_port(REMOTE_APP_ID, REMOTE_PORT, &exists) != MESSAGE_PORT_ERROR_NONE)
+{
+ LOGE("Failed to check remote port");
+ geolocation_manager_service_destroy();
+
+ return false;
+}
+
+if (!exists)
+{
+ LOGE("Remote port is not registered");
+}
+</pre>
+
+<p>The initial data is sent using the <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_init_data_send()</span> function. If it fails (because the remote port is not registered or some internal error occurs), the service continues to try to send the data at <span style="font-family: Courier New,Courier,monospace">SEND_DATA_INTERVAL</span> (5-second) intervals.</p>
+<pre class="prettyprint">
+// Send initial data to GPS consumer port
+if (!_geolocation_manager_init_data_send())
+{
+ LOGE("Failed to send init data - create timer to periodically try to send data");
+ ecore_timer_add(SEND_DATA_INTERVAL, _geolocation_manager_init_data_send_cb, NULL);
+}
+</pre>
+
+<p>The position update message is created in the <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_position_coords_send()</span> function. It uses the <a href="../../../org.tizen.native.mobile.apireference/group__CORE__LIB__BUNDLE__MODULE.html">Bundle</a> API to form a message, which consists of 3 elements: message type, and the latitude and longitude value. After the message is formed, the <span style="font-family: Courier New,Courier,monospace">_send_message()</span> function is invoked to send it.</p>
+<pre class="prettyprint">
+static bool
+_geolocation_manager_position_coords_send(location_coords_s coords)
+{
+ bundle *b = bundle_create();
+ char latitude_str[CHAR_BUFF_SIZE], longitude_str[CHAR_BUFF_SIZE];
+
+ if (!b)
+ {
+ LOGE("Failed to create bundle, the coords will not be sent");
+
+ return false;
+ }
+
+ snprintf(latitude_str, CHAR_BUFF_SIZE, "%f", coords.latitude);
+ snprintf(longitude_str, CHAR_BUFF_SIZE, "%f", coords.longitude);
+
+ bundle_add_str(b, "msg_type", MESSAGE_TYPE_POSITION_UPDATE);
+ bundle_add_str(b, "latitude", latitude_str);
+ bundle_add_str(b, "longitude", longitude_str);
+
+ bool ret = _send_message(b);
+
+ bundle_free(b);
+
+ return ret;
+}
+</pre>
+
+<p>The satellite update message is created in the <span style="font-family: Courier New,Courier,monospace">_geolocation_manager_satellites_count_send()</span> function, using the Bundle API. It consists of 2 strings: message type and satellite count. The created bundle is sent to the GPS consumer using the <span style="font-family: Courier New,Courier,monospace">_send_message()</span> function.</p>
+<pre class="prettyprint">
+static bool
+_geolocation_manager_satellites_count_send(int s_count)
+{
+ bundle *b = bundle_create();
+ char count_str[CHAR_BUFF_SIZE];
+
+ if (!b)
+ {
+ LOGE("Failed to create bundle, the satellites will not be sent");
+
+ return false;
+ }
+
+ snprintf(count_str, CHAR_BUFF_SIZE, "%d", s_count);
+
+ bundle_add_str(b, "msg_type", MESSAGE_TYPE_SATELLITES_UPDATE);
+ bundle_add_str(b, "satellites_count", count_str);
+
+ bool ret = _send_message(b);
+
+ bundle_free(b);
+
+ return ret;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_send_message()</span> function is responsible for sending the message passed as the parameter to the message port of the remote application. To do that, the <span style="font-family: Courier New,Courier,monospace">message_port_send_message()</span> function must be invoked. The remote app ID and remote port name have defined fixed values.</p>
+<pre class="prettyprint">
+static bool
+_send_message(bundle *b)
+{
+ if (!b)
+ {
+ LOGE("Can not send message, the bundle is NULL");
+
+ return false;
+ }
+
+ // Send message to specified remote port
+ int ret = message_port_send_message(REMOTE_APP_ID, REMOTE_PORT, b);
+
+ if (ret != MESSAGE_PORT_ERROR_NONE)
+ {
+ LOGE("Failed to send message: error %d", ret);
+
+ return false;
+ }
+
+ return 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>
\ 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>HybridServiceApp Sample Overview</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"/></p>
+ </div>
+
+ <h1>HybridServiceApp Sample Overview</h1>
+
+<p>The HybridServiceApp sample application demonstrates how you can communicate with a Tizen Web application (<a href="../mobile_w/hybridwebapp_mw.htm">HybridWebApp</a>) to manage the timer for the application.</p>
+<p>The HybridServiceApp is a service application that has no user interface. It creates the timer, and starts and stops it according to the requests received from the HybridWebApp application.</p>
+<p>As HybridServiceApp is a service, call the <span style="font-family: Courier New,Courier,monospace">service_app_main()</span> function of the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SERVICE__APP__MODULE.html">Service App</a> API to create its instance. In addition, set the service callbacks, such as <span style="font-family: Courier New,Courier,monospace">service_app_event_callback_s</span>.</p>
+<pre class="prettyprint">
+int app_run(app_data *app, int argc, char **argv)
+{
+ RETVM_IF(!app, -1, "Application data is NULL");
+
+ app_event_handler_h lmh;
+ app_event_handler_h lbh;
+ service_app_add_event_handler(&lmh, APP_EVENT_LOW_MEMORY, _on_low_memory_cb, app);
+ service_app_add_event_handler(&lbh, APP_EVENT_LOW_BATTERY, _on_low_battery_cb, app);
+
+ service_app_lifecycle_callback_s cbs =
+ {
+ .create = _on_create_cb,
+ .terminate = _on_terminate_cb
+ };
+
+ return service_app_main(argc, argv, &cbs, app);
+}
+</pre>
+
+<p>To destroy the service, call the <span style="font-family: Courier New,Courier,monospace">service_app_exit()</span> function.</p>
+<p>Declare the application type as service in the manifest XML file:</p>
+<pre class="prettyprint">
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns="http://tizen.org/ns/packages" package="org.tizen.hybridsvc" version="1.0.0">
+ <service-application appid="org.tizen.hybridsvc" exec="hybridsvc" type="capp" multiple="false" taskmanage="false" nodisplay="true">
+ <label>HybridSvc</label>
+ </service-application>
+</manifest>
+</pre>
+<p>The hybrid Web application must launch the service application by its application ID. Before running the hybrid Web application in the project folder, JavaScript must open the <span style="font-family: Courier New,Courier,monospace">main.js</span> file, find the <span style="font-family: Courier New,Courier,monospace">gServiceAppId</span> initialization variable, and change its value on token from the HybridServiceApp manifest file <span style="font-family: Courier New,Courier,monospace">appid</span> value (<span style="font-family: Courier New,Courier,monospace">appid="org.tizen.hybridsvc"</span>).</p>
+
+<h2>Implementation</h2>
+<p>Communication with the Web application is set using the <span style="font-family: Courier New,Courier,monospace">proxy_client</span> functionality that uses the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGE__PORT__MODULE.html">Message Port API</a>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">proxy_client_create()</span> function creates a proxy client instance for storing the main communication information as a local message port ID, remote application name, and its message port name.</p>
+<pre class="prettyprint">
+proxy_client *proxy_client_create()
+{
+ proxy_client *const proxy = calloc(1 , sizeof(proxy_client));
+ return proxy;
+}
+</pre>
+<p>To register the message port on the service side, use the <span style="font-family: Courier New,Courier,monospace">proxy_client_register_port()</span> function.</p>
+<pre class="prettyprint">
+int proxy_client_register_port(proxy_client *proxy_cl, const char *const port_name)
+{
+ int result = SVC_RES_FAIL;
+
+ RETVM_IF(!proxy_cl, result, "Proxy client is NULL");
+ RETVM_IF(!port_name, result, "Message port name is NULL");
+
+ int temp_id = message_port_register_local_port(port_name, _on_message_received_cb);
+ if (temp_id < 0)
+ {
+ _proxy_client_convert_msg_port_result(temp_id);
+ ERR("Failed to register local message port");
+ proxy_cl->local_port_id = 0;
+ return result;
+ }
+
+ DBG("Message port %s registered with id: %d", port_name, temp_id);
+ proxy_cl->local_port_id = temp_id;
+
+ return SVC_RES_OK;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">proxy_client_register_msg_receive_callback()</span> function is needed to register the internal <span style="font-family: Courier New,Courier,monospace">proxy_client</span> callback data and a function that is called when the registered message port receives data from the Web application.</p>
+<pre class="prettyprint">
+int proxy_client_register_msg_receive_callback(proxy_client *proxy_cl,
+ proxy_client_callback_func callback_func,
+ void *data)
+{
+ RETVM_IF(!proxy_cl, SVC_RES_FAIL, "Proxy client is NULL");
+
+ callback_data.proxy_cl = proxy_cl;
+ callback_data.func = callback_func;
+ callback_data.data = data;
+
+ return SVC_RES_OK;
+}
+</pre>
+<p>To send messages by the <span style="font-family: Courier New,Courier,monospace">proxy_client</span> callback, use the <span style="font-family: Courier New,Courier,monospace">proxy_client_send_message()</span> function. Use the <span style="font-family: Courier New,Courier,monospace">message_port_send_message_with_local_port()</span> function of the Message Port API.</p>
+<pre class="prettyprint">
+int proxy_client_send_message(proxy_client *proxy_cl, bundle *const msg)
+{
+ int result = SVC_RES_FAIL;
+
+ RETVM_IF(!proxy_cl, result , "Proxy client is NULL");
+ RETVM_IF(!(proxy_cl->local_port_id), result, "Message port is not registered");
+ RETVM_IF(!(proxy_cl->remote_app_name), result, "Remote application name is not registered");
+ RETVM_IF(!(proxy_cl->remote_port_name), result, "Remote message port is not registered");
+
+ result = _proxy_client_convert_msg_port_result(message_port_send_message_with_local_port(proxy_cl->remote_app_name,
+ proxy_cl->remote_port_name,
+ msg,
+ proxy_cl->local_port_id));
+
+ RETVM_IF(result != SVC_RES_OK, result, "Failed to send bidirectional message to: %s:%s",
+ proxy_cl->remote_app_name,
+ proxy_cl->remote_port_name);
+
+ DBG("Message successfully send to: %s:%s", proxy_cl->remote_app_name, proxy_cl->remote_port_name);
+ return result;
+}
+</pre>
+<p>The private <span style="font-family: Courier New,Courier,monospace">_on_message_received_cb()</span> function is a registered message port callback function. This function is called if an application receives information from the Web application. The <span style="font-family: Courier New,Courier,monospace">proxy_client</span> callback function is called in this method.</p>
+<pre class="prettyprint">
+static void _on_message_received_cb(int port_id, const char *rem_app_name, const char *rem_port_name,
+ bool trusted_message, bundle *rec_msg)
+{
+ DBG("Received message from port %d", port_id);
+
+ if (!callback_data.proxy_cl)
+ {
+ return;
+ }
+
+ if (port_id != callback_data.proxy_cl->local_port_id)
+ {
+ ERR("Receive message by unknown port id = %d", port_id);
+ return;
+ }
+
+ int res = _proxy_client_set_remote_data(callback_data.proxy_cl, rem_app_name, rem_port_name);
+ RETM_IF(res != SVC_RES_OK ,"Failed to set remote data to message port");
+
+ if (callback_data.func)
+ {
+ res = callback_data.func(callback_data.data, rec_msg);
+ RETM_IF(res != SVC_RES_OK ,"Message port callback function failed");
+ }
+ else
+ {
+ DBG("Message port callback function not set");
+ }
+}
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace">proxy_client</span> callback function is called, the service decides what response must be sent to the Web application (the <span style="font-family: Courier New,Courier,monospace">_app_process_received_message()</span> function) and what action must be taken on the service side (the <span style="font-family: Courier New,Courier,monospace">_app_execute_operation()</span> function).</p>
+<p>For example, if a message with the <span style="font-family: Courier New,Courier,monospace">start</span> command is received, the service must run a timer that periodically notifies the Web application, and on receiving the <span style="font-family: Courier New,Courier,monospace">stop</span> command, the timer must be stopped. After that, the service sends a response to the Web application.</p>
+<pre class="prettyprint">
+static int _on_proxy_client_msg_received_cb(void *data, bundle *const rec_msg)
+{
+ int result = SVC_RES_FAIL;
+ RETVM_IF(!data, result, "Data is NULL");
+
+ app_data *app = data;
+ req_operation req_operation = REQ_OPER_NONE;
+
+ bundle *resp_msg = bundle_create();
+ RETVM_IF(!resp_msg, result, "Failed to create bundle");
+
+ result = _app_process_received_message(rec_msg, resp_msg, &req_operation);
+ if (result != SVC_RES_OK)
+ {
+ ERR("Failed to generate response bundle");
+ bundle_free(resp_msg);
+ return result;
+ }
+
+ result = _app_execute_operation(app, req_operation);
+ if (result == SVC_RES_OK)
+ {
+ result = _app_send_response(app, resp_msg);
+ if (result != SVC_RES_OK)
+ {
+ ERR("Failed to send message to remote application");
+ }
+ }
+ else
+ {
+ ERR("Failed to execute operation");
+ }
+ bundle_free(resp_msg);
+
+ return result;
+}
+</pre>
+
+<p>The timer is realized on a separate thread. When starting the application, the thread instance is created and the thread function is locked by the waiting signal to start. After the start signal is received, it starts to send notifications at 1 second intervals until the stop signal is received. The thread sleeps and waits for another notification.</p>
+<pre class="prettyprint">
+static void* _app_timer_thread_func(void *data)
+{
+ RETVM_IF(!data, NULL, "Data is NULL");
+ app_data *app = data;
+
+ pthread_mutex_lock(&app->tmr_mutex);
+ bool was_timedwait = false;
+
+ while (app->run_svc)
+ {
+ if (app->run_timer)
+ {
+ if (was_timedwait)
+ {
+ RETVM_IF(_app_execute_operation(app, REQ_OPER_SEND_TIMER_EXP_MSG), NULL, "Execute operation failed");
+ }
+ else
+ {
+ was_timedwait = true;
+ }
+ INF("START WAITING BY TIMEOUT");
+ struct timespec nowTs;
+ clock_gettime(CLOCK_REALTIME, &nowTs);
+ nowTs.tv_sec += TIMER_INTERVAL_RUN;
+ pthread_cond_timedwait(&app->tmr_cond, &app->tmr_mutex, &nowTs);
+ INF("STOP WAITING BY TIMEOUT");
+ }
+ else
+ {
+ was_timedwait = false;
+ INF("START WAITING INFINIT");
+ pthread_cond_wait(&app->tmr_cond, &app->tmr_mutex);
+ INF("STOP WAITING INFINIT");
+ }
+ }
+ pthread_mutex_unlock(&app->tmr_mutex);
+
+ return NULL;
+}
+</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
--- /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>Media App Sample Overview</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"/></p>
+ </div>
+
+<h1>Media App Sample Overview</h1>
+<p>The Media App sample demonstrates how to develop a media handling application with the ability to open, decode, and transform different media sources, such as video, images, and sound files.</p>
+<p>The following figure illustrates the starting screen of the Media App.</p>
+
+<p class="figure">Figure: Media App main view</p>
+<p align="center"><img alt="Media App main view" src="../images/mediaapp_main.png" /></p>
+
+<p>The purpose of this sample application is to demonstrate how to use the Media API to open, decode, and transform images. Each form contains appropriate UI components to enter the required data, such as phone number, message content, and buttons to send messages or emails.</p>
+
+<p>This sample consists of the following:</p>
+<ul>
+ <li>Image
+ <ul>
+ <li><a href="#image">Image Viewer</a>
+ <p>Decode images.</p></li>
+ <li><a href="#image_conv">Image Converter</a>
+ <p>Convert images.</p></li>
+ <li><a href="#gif">GIF Viewer</a>
+ <p>Open and play GIF images.</p></li>
+ <li><a href="#flip">Flip</a>
+ <p>Flip and rotate images.</p></li>
+ <li><a href="#resize">Image Resize</a>
+ <p>Resize images.</p></li>
+ <li><a href="#color">Color Converter</a>
+ <p>Convert images to pixel format.</p></li>
+ <li><a href="#frame">Frame Extractor</a>
+ <p>Extract frames.</p></li>
+ </ul>
+ </li>
+ <li>Audio
+ <ul>
+ <li><a href="#tone">Tone Player</a>
+ <p>Play the keypad tone sounds</p></li>
+ <li><a href="#inout">Audio In Out</a>
+ <p>Record and play audio.</p></li>
+ <li><a href="#equal">Audio Equalizer</a>
+ <p>Control the equalizer.</p></li>
+ <li><a href="#gles">Gles Cube Player</a>
+ <p>Manage the OpenGL® functionality with audio streaming.</p></li>
+ </ul>
+ </li>
+ <li>Player
+ <ul>
+ <li><a href="#media">Media Player</a>
+ <p>Play media from different sources</p></li>
+ <li><a href="#multi">Multi Play</a>
+ <p>Play different kinds of media simultaneously.</p></li>
+ <li><a href="#cam_play">Camera and Player</a>
+ <p>Manage camera preview and video player</p></li>
+ <li><a href="#vid_play">Video Recorder and Player</a>
+ <p>Manage camera recording and video player.</p></li>
+ </ul>
+ </li>
+ <li>Recorder
+ <ul>
+ <li><a href="#camera">Camera Capture</a>
+ <p>Manage the camera frame capturing.</p></li>
+ <li><a href="#video">Video Recorder</a>
+ <p>Manage video recording.</p></li>
+ <li><a href="#audio">Audio Recorder</a>
+ <p>Manage audio recording.</p></li>
+ </ul>
+ </li>
+ </ul>
+
+<h2>Image</h2>
+
+<h3 id="image" name="image">Image Viewer</h3>
+<p>This view allows the user to decode, change the scale, and convert the pixel format of images and fit them to the display. Internally, when the resize slider is changed and released, the <span style="font-family: Courier New,Courier,monospace;">_slider_drag_stop_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">update_scale</span> method is executed:</p>
+
+<pre class="prettyprint">
+static void _update_scale(image_viewer_view *view)
+{
+ RETM_IF(NULL == view, "view is NULL");
+ Evas_Object *evas_image = elm_image_object_get(view->image);
+ double scale = elm_slider_value_get(view->slider) / DEFAULT_SCALE;
+ Evas_Coord_Rectangle new_geometry = {};
+ bool result = ic_calc_image_new_geometry(evas_image, view->image_scroller, scale, &new_geometry);
+ RETM_IF(!result, "error: on image new geometry calculation");
+
+ evas_object_image_fill_set(evas_image, 0, 0, new_geometry.w, new_geometry.h);
+ evas_object_resize(evas_image, new_geometry.w, new_geometry.h);
+ evas_object_move(evas_image, new_geometry.x, new_geometry.y);
+
+ _update_scale_factor_params(view);
+}
+</pre>
+
+<p class="figure">Figure: Image viewer</p>
+<p align="center"><img alt="Image viewer" src="../images/mediaapp_image_viewer.png" /></p>
+
+<h3 id="image_conv" name="image_conv">Image Converter</h3>
+
+<p>This view allows the user to transform a source image into a new image with a different pixel format and size. Internally, when the <strong>Change pixel format</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_change_format</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_process</span> method executed:</p>
+
+<pre class="prettyprint">
+static bool _process(image_converter_view *view, double scale)
+{
+ RETVM_IF(NULL == view, false, "view is NULL");
+ RETVM_IF(NULL == view->image_source, false, "view is NULL");
+ bool result = true;
+ int w = 0, h = 0;
+ Evas_Object* source_eo = elm_image_object_get(view->image_source);
+ RETVM_IF(NULL == source_eo, false, "evas_object image is NULL");
+
+ long long ticks_begin = get_ticks();
+ evas_object_image_size_get(source_eo, &w, &h);
+ RETVM_IF(0 == w * h, false, "wrong size of source image: %d x %d", w, h);
+ int dest_width = scale * w;
+ int dest_height = scale * h;
+
+ view->scale_perc = scale * SLIDER_MAX;
+ int error = IMAGE_UTIL_ERROR_NONE;
+ unsigned int dest_size = 0;
+ unsigned char* dest_buff = NULL;
+ void* src_buff = evas_object_image_data_get(source_eo, EINA_FALSE);
+ RETVM_IF(NULL == src_buff, false, "image_util_calculate_buffer_size error");
+
+ error = image_util_calculate_buffer_size(dest_width , dest_height, IMAGE_UTIL_COLORSPACE_BGRA8888, &dest_size);
+ RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, false, "image_util_calculate_buffer_size error");
+
+ dest_buff = malloc(dest_size);
+ RETVM_IF(NULL == dest_buff, false, "malloc destination buffer error %d", dest_size);
+
+ error = image_util_resize(dest_buff, &dest_width , &dest_height, src_buff, w, h, IMAGE_UTIL_COLORSPACE_BGRA8888);
+ if (IMAGE_UTIL_ERROR_NONE == error)
+ {
+ Evas_Object* im = evas_object_image_filled_add(evas_object_evas_get(view->layout));
+ if (im)
+ {
+ evas_object_image_colorspace_set(im, EVAS_COLORSPACE_ARGB8888);
+ evas_object_image_alpha_set(im, EINA_FALSE);
+ evas_object_image_size_set(im, dest_width, dest_height);
+ evas_object_image_data_copy_set(im, dest_buff);
+
+ char output_buf[PATH_MAX] = {'\0'};
+ snprintf(output_buf, PATH_MAX, "%s%s%s.%s", get_resource_path(""), IMAGE_OUTPUT_DIR, image_names[view->image_id], image_file_format_to_str(converted_formats[view->convert_format_ind]));
+ if (EINA_FALSE == evas_object_image_save(im, output_buf, NULL, NULL))
+ {
+ ERR("evas_object_image_save error");
+ result = false;
+ }
+ else
+ {
+ strcpy(view->image_converted_uri, output_buf);
+ }
+ evas_object_del(im);
+ view->ticks = get_ticks() - ticks_begin;
+ }
+ }
+ else
+ {
+ INF("Image buffer manipulation: image_util_resize error");
+ result = false;
+ }
+ free(dest_buff);
+ dest_buff = NULL;
+
+ return result;
+}
+</pre>
+
+<p class="figure">Figure: Image converter</p>
+<p align="center"><img alt="Image converter" src="../images/mediaapp_image_converter.png" /></p>
+
+<h3 id="gif" name="gif">GIF Viewer</h3>
+<p>This view displays GIF images, and allows the user to change the pixel format. Internally, when the <strong>Next</strong> or <strong>Prev</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_toolbar_button_clicked_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_change_image</span> method is executed:</p>
+
+<pre class="prettyprint">
+static void _change_image(gif_viewer_view *this, bool to_next)
+{
+ RETM_IF(NULL == this, "this is NULL");
+ unsigned int image_id = this->image_id;
+ RETM_IF((to_next && image_id + 1 >= IMAGES_COUNT), "Out of image container");
+ RETM_IF((!to_next && image_id == 0), "Out of image container");
+
+ if (to_next)
+ {
+ ++image_id;
+ }
+ else
+ {
+ --image_id;
+ }
+
+ if (!ic_load_image(this->image, image_file_names[image_id]))
+ {
+ ERR("ic_load_image failed");
+ }
+ ic_image_set_animated(this->image);
+ this->image_id = image_id;
+
+ _update_view_controls(this);
+}
+</pre>
+
+<p class="figure">Figure: GIF viewer</p>
+<p align="center"><img alt="GIF viewer" src="../images/mediaapp_gif_viewer.png" /></p>
+
+<h3 id="flip" name="flip">Flip</h3>
+<p>This view allows the user to flip and rotate images. Internally, when the <strong>Flip</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_on_button_flip_clicked_cb</span> callback is called:</p>
+
+<pre class="prettyprint">
+static void _on_button_rotate_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ RETM_IF(NULL == data, "data is NULL");
+ image_flip_rotate_view *view = data;
+ if (view->rotate_state + 1 < ROTATE_STATES_MAX)
+ {
+ ++(view->rotate_state);
+ }
+ else
+ {
+ view->rotate_state = ROTATE_STATE_0;
+ }
+ elm_image_orient_set(view->image_rotate, _convert_to_elm_rotate_state(view->rotate_state));
+ _update_rotate_state(view);
+ _update_label(view);
+}
+</pre>
+
+<p class="figure">Figure: Flip and rotate view</p>
+<p align="center"><img alt="Flip and rotate view" src="../images/mediaapp_flip_rotate.png" /></p>
+
+<h3 id="resize" name="resize">Image Resize</h3>
+
+<p>This view allows the user to change the image size. Internally, when the resize slider is changed, the <span style="font-family: Courier New,Courier,monospace;">_slider_drag_stop_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_update_scale</span> method is executed:</p>
+
+<pre class="prettyprint">
+static void _update_scale(image_resize_view *view)
+{
+ RETM_IF(NULL == view, "view is NULL");
+ Evas_Object *evas_image = elm_image_object_get(view->image);
+ double scale = elm_slider_value_get(view->slider) / DEFAULT_SCALE;
+ Evas_Coord_Rectangle new_geometry = {};
+ bool result = ic_calc_image_new_geometry(evas_image, view->image_scroller, scale, &new_geometry);
+ RETM_IF(!result, "error: on image new geometry calculation");
+
+ evas_object_image_fill_set(evas_image, 0, 0, new_geometry.w, new_geometry.h);
+ evas_object_resize(evas_image, new_geometry.w, new_geometry.h);
+ evas_object_move(evas_image, new_geometry.x, new_geometry.y);
+ view->image_scaled_size.w = new_geometry.w;
+ view->image_scaled_size.h = new_geometry.h;
+}
+</pre>
+
+<p class="figure">Figure: Image resize</p>
+<p align="center"><img alt="Image resize" src="../images/mediaapp_image_resize.png" /></p>
+
+<h3 id="color" name="color">Color Converter</h3>
+<p>This view allows the user to change the image pixel format (RGB32, RGB16, YUV420, or YUV422). Internally, when the <strong>Change pixel format</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_toolbar_button_clicked_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">_process_colorspace_convert</span> method is executed:</p>
+
+<pre class="prettyprint">
+static bool _process_colorspace_convert(color_converter_view *view)
+{
+ long long time_begin = get_ticks();
+ RETVM_IF(NULL == view, false, "view is NULL");
+ RETVM_IF(NULL == view->image_source, false, "image is NULL");
+ Evas_Object* evas_image = elm_image_object_get(view->image_source);
+ RETVM_IF(NULL == evas_image, false, "evas image is NULL");
+
+ free(view->decoded_buffer);
+ view->decoded_buffer = NULL;
+
+ int w = 0, h = 0;
+ evas_object_image_size_get(evas_image, &w, &h);
+ RETVM_IF(0 == w * h, false, "wrong size of image: %d x %d", w, h);
+
+ void* src_buff = evas_object_image_data_get(evas_image, EINA_FALSE);
+ RETVM_IF(NULL == src_buff, false, "image source buffer is NULL");
+
+ image_util_colorspace_e src_colorspace = SOURCE_COLORSPACE;
+ image_util_colorspace_e dest_colorspace = colorspaces[view->color_id_to];
+ int error = IMAGE_UTIL_ERROR_NONE;
+ unsigned int dest_size = 0;
+ error = image_util_calculate_buffer_size(w , h, dest_colorspace, &dest_size);
+ RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, false, "image_util_calculate_buffer_size error");
+
+ view->decoded_buffer = malloc(dest_size);
+ RETVM_IF(NULL == view->decoded_buffer, false, "malloc destination buffer error %d", dest_size);
+
+ error = image_sample_util_convert_colorspace(view->decoded_buffer, dest_colorspace, src_buff, w, h, src_colorspace);
+ RETVM_IF(IMAGE_UTIL_ERROR_NONE != error, false, "image_sample_util_convert_colorspace error");
+ view->decode_time = get_ticks() - time_begin;
+ return true;
+}
+</pre>
+
+<p class="figure">Figure: Color converter</p>
+<p align="center"><img alt="Color converter" src="../images/mediaapp_color_converter.png" /></p>
+
+<h3 id="frame" name="frame">Frame Extractor</h3>
+<p>This view allows the user to extract frames from the input video stream. Internally, when the frame slider is changed, the <span style="font-family: Courier New,Courier,monospace;">_sliderbar_changed_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">frame_extractor_frame_get</span> method is executed:</p>
+
+<pre class="prettyprint">
+bool frame_extractor_frame_get(const frame_extractor *extractor, unsigned char **frame, int pos)
+{
+ bool result = false;
+ if (extractor && frame)
+ {
+ void * buf = NULL;
+ int size = 0;
+ int error = METADATA_EXTRACTOR_ERROR_NONE;
+ error = metadata_extractor_get_frame_at_time(extractor->metadata, pos, false, &buf, &size);
+ if (METADATA_EXTRACTOR_ERROR_NONE == error && buf)
+ {
+ *frame = malloc(size + (extractor->width * extractor->height) * ARGB_PIXEL_SIZE);
+ if (*frame)
+ {
+ error = image_util_convert_colorspace(*frame , IMAGE_UTIL_COLORSPACE_BGRA8888, buf, extractor->width, extractor->height, IMAGE_UTIL_COLORSPACE_RGB888);
+ if (IMAGE_UTIL_ERROR_NONE == error)
+ {
+ result = true;
+ }
+ else
+ {
+ free(*frame);
+ *frame = NULL;
+ }
+ }
+ free(buf);
+ }
+ }
+
+ return result;
+}
+</pre>
+
+<p class="figure">Figure: Frame Extractor</p>
+<p align="center"><img alt="Frame Extractor" src="../images/mediaapp_frame_extractor.png" /></p>
+
+<h2>Audio</h2>
+
+<h3 id="tone" name="tone">Tone Player</h3>
+<p>This view allows the user to play tone sounds from the numeric phone keypad. Internally, when any phone keypad button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_on_keypad_btn_down_cb</span> and <span style="font-family: Courier New,Courier,monospace;">_on_keypad_btn_up_cb</span> callbacks are called and the <span style="font-family: Courier New,Courier,monospace;">_process</span> method is executed:</p>
+
+<pre class="prettyprint">
+static void _on_keypad_btn_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ tone_player_view *view = data;
+ if (view)
+ {
+ tone_player_stop(view->tone_handle);
+
+ tone_type_e tone = (tone_type_e)evas_object_data_get(obj, BUTTON_DTMF_KEY);
+ tone_player_start(tone, SOUND_TYPE_MEDIA, MAX_TONE_DURATION, &iew-gt;tone_handle);
+ }
+}
+</pre>
+
+<p class="figure">Figure: Tone player</p>
+<p align="center"><img alt="Tone player" src="../images/mediaapp_tone_player.png" /></p>
+
+<pre class="prettyprint">
+static void _on_keypad_btn_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ tone_player_view *view = data;
+ if (view)
+ {
+ tone_player_stop(view->tone_handle);
+ }
+}
+</pre>
+
+<h3 id="inout" name="inout">Audio In Out</h3>
+<p>This view allows the user to record sounds with the microphone and play them. Additionally there are options to adjust the channel type and sample rate. Internally, when the <strong>Record</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_audio_in_start_cb</span> callback is called, which prepares the audio stream to be recorded and starts it in a separate thread.</p>
+
+<p class="figure">Figure: Audio in-out</p>
+<p align="center"><img alt="Audio in-out" src="../images/mediaapp_inout.png" /></p>
+
+<pre class="prettyprint">
+static void _audio_in_start(audio_inout *obj)
+{
+ audio_buffer *buf = obj->buffer;
+ char *samples = buf->samples;
+ int len = 0;
+ size_t read_bytes = 0;
+ size_t last_reported_bytes = 0;
+
+ do
+ {
+ len = AUDIO_BUFFER_SIZE;
+ if (buf->len + len > buf->capacity)
+ {
+ len = buf->capacity - buf->len;
+ }
+
+ if (len > 0)
+ {
+ int bytes = audio_in_read((audio_in_h)obj->handle, samples, len);
+ assert(bytes >= 0);
+
+ if (bytes)
+ {
+ samples += bytes;
+ buf->len += bytes;
+ read_bytes += bytes;
+
+ if (read_bytes - last_reported_bytes >= obj->byte_per_sec * PROGRESS_UPD_PERIOD)
+ {
+ _report_progress(obj, read_bytes);
+ last_reported_bytes = read_bytes;
+ }
+ }
+ }
+ } while(!obj->stop && len > 0);
+
+ _report_progress(obj, read_bytes);
+}
+</pre>
+
+<p>When input audio is recorded, it can be played in a separate stream in the <span style="font-family: Courier New,Courier,monospace;">_audio_out_start</span> method.</p>
+
+<h3 id="equal" name="equal">Audio Equalizer</h3>
+
+<p>This view allows the user to play an altered frequency response of an audio stream using linear filters. Additionally, there are several pre-defined values to play audio streams. Internally, when the <strong>Play</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_start_player</span> callback is called, which prepares the audio equalizer layout and applies it to a stream.</p>
+
+<p class="figure">Figure: Audio equalizer</p>
+<p align="center"><img alt="Audio equalizer" src="../images/mediaapp_equalizer.png" /></p>
+
+<pre class="prettyprint">
+static void _set_equalizer_layout(equalizer_view *view, Evas_Object *parent)
+{
+ Evas_Object *box = elm_box_add(parent);
+ elm_box_horizontal_set(box, EINA_FALSE);
+ evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(box);
+
+ int bands_count = 0;
+ player_audio_effect_get_equalizer_bands_count(view->player, &bands_count);
+
+ view->bands_count = bands_count;
+ view->sliders = calloc(bands_count, sizeof(Evas_Object*));
+
+ for (int i = 0; i < bands_count; ++i)
+ {
+ int frequency = 0;
+ int min = 0;
+ int max = 0;
+
+ player_audio_effect_get_equalizer_band_frequency(view->player, i, &frequency);
+ player_audio_effect_get_equalizer_level_range(view->player, &min, &max);
+
+ Evas_Object *item = _add_band_item(view, box, i, frequency, min, max);
+ elm_box_pack_end(box, item);
+ }
+
+ elm_layout_content_set(parent, "band_content", box);
+}
+</pre>
+
+<h3 id="gles" name="gles">Gles Cube Player</h3>
+
+<p>This view demonstrates the usage of the OpenGL® library together with the audio output stream.</p>
+
+<p class="figure">Figure: Gles cube player</p>
+<p align="center"><img alt="Gles cube player" src="../images/mediaapp_gles.png" /></p>
+
+<p>Initialize and render openGL:</p>
+
+<pre class="prettyprint">
+void _gles_cube_view_glview_init(Evas_Object *obj)
+{
+ gles_cube_view_data *view = evas_object_data_get(obj, GLVIEW_VIEW_DATA_NAME);
+ RETM_IF(!view, "View data is NULL");
+ Evas_GL_API *api = elm_glview_gl_api_get(obj);
+ RETM_IF(!api, "GL API is NULL");
+
+ view->shader_ok = color_shader_init(&view->shader, api);
+ RETM_IF(!view->shader_ok, "Shader initialization failed");
+
+ api->glClearColor(VIEW_BG_COLOR);
+ api->glEnable(GL_DEPTH_TEST);
+}
+
+void _gles_cube_view_glview_render(Evas_Object *obj)
+{
+ gles_cube_view_data *view = evas_object_data_get(obj, GLVIEW_VIEW_DATA_NAME);
+ RETM_IF(!view, "View data is NULL");
+ RETM_IF(!view->resize_ok, "Viewport is not ready");
+ Evas_GL_API *api = elm_glview_gl_api_get(obj);
+ RETM_IF(!api, "GL API is NULL");
+
+ gl_matrix4 matrix;
+ gl_matrix4_load_identity(&matrix);
+ gl_matrix4_translate(&matrix, CUBE_XYZ_POSITION);
+ gl_matrix4_rotate(&matrix, view->angle, CUBE_ROTATE_VECTOR);
+
+ api->glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
+
+ color_shader_activate(&view->shader, api);
+ color_shader_load_mv(&view->shader, api, &matrix);
+ color_object3d_draw(&CUBE_OBJECT3D, api);
+ color_shader_deactivate(&view->shader, api);
+}
+</pre>
+
+<h2 id="player" name="player">Player</h2>
+
+<h3 id="media" name="media">Media Player</h3>
+<p>This view allows the user to play different media sources, such as MP3, AMR, WAV, MP4, and AAC. Internally, when the <strong>Play</strong> button is clicked, the <span style="font-family: Courier New,Courier,monospace;">_start_player</span> callback is called, which prepares the selected media and plays it.</p>
+
+<pre class="prettyprint">
+static void _start_player(media_player_view *view)
+{
+ player_state_e state;
+ player_get_state(view->player, &state);
+
+ if (state != PLAYER_STATE_PLAYING)
+ {
+ player_start(view->player);
+
+ if (_is_playing(view))
+ {
+ _toolbar_play_stop_btn_upd(view);
+ elm_object_disabled_set(view->progressbar, EINA_FALSE);
+
+ int ms = 0;
+ player_get_duration(view->player, &ms);
+ elm_slider_min_max_set(view->progressbar, 0, ms / 1000);
+ elm_slider_value_set(view->progressbar, 0.0);
+ _label_status_set(view, "Playing");
+ }
+ }
+
+ if (_is_playing(view))
+ {
+ _timer_start(view);
+ }
+}
+</pre>
+
+<p class="figure">Figure: Media Player</p>
+<p align="center"><img alt="Media Player" src="../images/mediaapp_mediaplayer.png" /></p>
+
+<h3 id="multi" name="multi">Multi Play</h3>
+
+<p>This view allows the user to play several audio sources simultaneously, such as MP3, AMR, AAC, and WAV. Internally, when each checkbox is checked, a separate player with the selected stream is started.</p>
+
+<p class="figure">Figure: Multi Play</p>
+<p align="center"><img alt="Multi Play" src="../images/mediaapp_multi.png" /></p>
+
+<pre class="prettyprint">
+static void _on_genlist_item_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Elm_Object_Item *item = (Elm_Object_Item *) event_info;
+ player_data *player = elm_object_item_data_get(item);
+ Evas_Object *checkbox = elm_object_item_part_content_get(item, CHECKBOX_PART);
+
+ elm_genlist_item_selected_set(item, EINA_FALSE);
+
+ assert(checkbox);
+ assert(player);
+ if (checkbox && player)
+ {
+ bool state = elm_check_state_get(checkbox);
+ elm_check_state_set(checkbox, !state);
+ state = elm_check_state_get(checkbox);
+
+ if (state)
+ {
+ _player_start(player);
+ }
+ else
+ {
+ _player_stop(player);
+ }
+ elm_genlist_item_fields_update(item, SUBTEXT_PART, ELM_GENLIST_ITEM_FIELD_TEXT);
+ }
+}
+</pre>
+
+<h3 id="cam_play" name="cam_play">Camera and Player</h3>
+<p>This view allows the user to display the camera preview and media player at the same window. Initially, both the camera and the player should be created and initiated:</p>
+
+<pre class="prettyprint">
+static player_h _create_player(camera_player_view *this)
+{
+ player_h player = NULL;
+
+ if (player_create(&player) == PLAYER_ERROR_NONE)
+ {
+ player_set_sound_type(player, SOUND_TYPE_MEDIA);
+ player_set_volume(player, 1.0, 1.0);
+ player_set_looping(player, true);
+ player_set_uri(player, SAMPLEMPEG4);
+
+ Ecore_X_Window xwin = elm_win_xwindow_get(this->app->win->win);
+
+ if (xwin)
+ {
+ player_set_display(player, PLAYER_DISPLAY_TYPE_X11, GET_DISPLAY(xwin));
+ player_set_display_mode(player, PLAYER_DISPLAY_MODE_DST_ROI);
+
+ int x = 0;
+ int y = 0;
+ int w = 0;
+ int h = 0;
+
+ Evas_Object *edje_layout = elm_layout_edje_get(this-gt;layout);
+ edje_object_calc_force(edje_layout);
+
+ evas_object_geometry_get(this-gt;video_rect, &x, &y, &w, &h);
+ player_prepare(player);
+ }
+ }
+
+ return player;
+}
+</pre>
+
+<p>When the <strong>Start</strong> button is clicked, camera streaming and video player streaming start simultaneously:</p>
+
+<pre class="prettyprint">
+static void _start_camera(camera_player_view *this)
+{
+ if (!this->camera)
+ {
+ this->camera = _create_camera(this);
+ }
+
+ if (this->camera)
+ {
+ camera_state_e state;
+ camera_get_state(this->camera, &state);
+
+ if (state != CAMERA_STATE_PREVIEW)
+ {
+ camera_start_preview(this->camera);
+ }
+ }
+}
+
+static void _start_player(camera_player_view *this)
+{
+ if (!this->player)
+ {
+ this->player = _create_player(this);
+ }
+
+ if (this->player)
+ {
+ player_state_e state;
+ player_get_state(this->player, &state);
+
+ if (state != PLAYER_STATE_PLAYING)
+ {
+ player_set_display_visible(this->player, true);
+ player_start(this->player);
+ }
+ }
+}
+</pre>
+
+<p class="figure">Figure: Camera and player</p>
+<p align="center"><img alt="Camera and player" src="../images/mediaapp_camplay.png" /></p>
+
+<h3 id="vid_play" name="vid_play">Video Recorder and Player</h3>
+
+<p>This view allows the user to record camera streaming and play another video stream at the same time. Initially, both the camera recorder and the player should be created and initiated:</p>
+
+<pre class="prettyprint">
+static void _create_video_recorder(video_recorder_player_view *view)
+{
+ window_obj *win_obj = view->app->win;
+ Evas_Object *win = win_obj->win;
+ if (view->camera)
+ {
+ camera_destroy(view->camera);
+ }
+
+ if (camera_create(CAMERA_DEVICE_CAMERA0, &view->camera) == CAMERA_ERROR_NONE)
+ {
+ // ... skip some code
+
+ recorder_create_videorecorder(view->camera, &view->recorder);
+ if (view->recorder)
+ {
+ recorder_set_file_format(view->recorder, RECORDER_FILE_FORMAT_3GP);
+ recorder_set_filename(view->recorder, get_data_path(RECORDERED_3GP_VIDEO));
+ recorder_attr_set_time_limit(view->recorder, limit_seconds);
+ recorder_set_recording_limit_reached_cb(view->recorder, _limit_reached_cb, view);
+ recorder_set_recording_status_cb(view->recorder, _record_status_cb, view);
+ recorder_prepare(view->recorder);
+ }
+ }
+}
+</pre>
+
+<p class="figure">Figure: Video recorder and player</p>
+<p align="center"><img alt="Video recorder and player" src="../images/mediaapp_vidplayer.png" /></p>
+
+<p>When the <strong>Start</strong> button is clicked, recording a video stream to a file and playing another video stream at the same time begins. The recorded file is played after the recording is finished.</p>
+
+<pre class="prettyprint">
+static void _stop_video_recorder(video_recorder_player_view *view)
+{
+ if (view->recorder)
+ {
+ recorder_commit(view->recorder);
+ recorder_unprepare(view->recorder);
+ recorder_destroy(view->recorder);
+ view->recorder = NULL;
+
+ elm_progressbar_value_set(view->progress_bar, 0.0);
+ _on_record_completed(view);
+ }
+}
+static void _on_record_completed(video_recorder_player_view *view)
+{
+ win_set_view_style(view->app->win, STYLE_DEFAULT_WINDOW);
+ Elm_Object_Item *video_player_navi_item = video_player_view_add(view->app, view->navi, get_data_path(RECORDERED_3GP_VIDEO), NULL, NULL);
+ elm_naviframe_item_pop_cb_set(video_player_navi_item, _video_player_navi_item_pop_cb, view);
+}
+</pre>
+
+<h2 id="recorder" name="recorder">Recorder</h2>
+
+<h3 id="camera" name="camera">Camera Capture</h3>
+<p>This view allows the user to capture a separate frame from the camera stream as an image and display it in the saved images. There are numerous settings that can be used to adjust the capturing process and to customize the camera stream style, quality, and filtering. Initially, the camera view should be prepared and started:</p>
+
+<pre class="prettyprint">
+static void _create_camera(camera_capture_view *view)
+{
+ window_obj *win_obj = view->app->win;
+ Evas_Object *win = win_obj->win;
+ if (view->camera)
+ {
+ _destroy_camera(view);
+ }
+
+ if (camera_create(CAMERA_DEVICE_CAMERA0, &view->camera) == CAMERA_ERROR_NONE)
+ {
+ int x = 0, y = 0, w = 0, h = 0;
+ Evas_Object *edje_layout = elm_layout_edje_get(view->layout);
+ edje_object_calc_force(edje_layout);
+ _get_geometry_camera_win(view, &x, &y, &w, &h);
+ ...
+ }
+ else
+ {
+ view->camera = NULL;
+ }
+}
+static void _start_camera(camera_capture_view *view)
+{
+ if (view->camera)
+ {
+ camera_start_preview(view->camera);
+ }
+}
+</pre>
+
+<p>When the <strong>Capture</strong> button is clicked, it takes a frame shot of the current camera view and places it into a scrollable gallery down the view. </p>
+
+<pre class="prettyprint">
+static void _on_camera_capture_cb(camera_image_data_s *image, camera_image_data_s *postview, camera_image_data_s *thumbnail, void *user_data)
+{
+ camera_capture_view *view = user_data;
+
+ if (view)
+ {
+ char *image_path = _save_file(view, image);
+ if (image_path)
+ {
+ thumbnail_data *mlt_data = calloc(1, sizeof(thumbnail_data));
+ mlt_data->view = view;
+ mlt_data->image_path = image_path;
+
+ ecore_main_loop_thread_safe_call_async(_on_ecore_main_loop_cb, mlt_data);
+ }
+ }
+}
+</pre>
+
+<p>Each newly created frame can be viewed with the image viewer:</p>
+
+<pre class="prettyprint">
+static void _on_thumb_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ thumbnail_data *thumbnail = data;
+ if (thumbnail)
+ {
+ if (capture_image_viewer_add(thumbnail->view->app, thumbnail->view->navi, thumbnail->image_path, _on_capture_image_viewer_del_cb, thumbnail->view))
+ {
+ thumbnail->view->activated = false;
+ _stop_camera(thumbnail->view);
+ }
+ }
+}
+</pre>
+
+<p class="figure">Figure: Camera Capture</p>
+<p align="center"><img alt="Camera Capture" src="../images/mediaapp_camera.png" /></p>
+
+<h3 id="video" name="video">Video Recorder</h3>
+
+<p>This view allows the user to record camera streaming and play the recorded video. There are numerous settings that can be used to adjust recording process and to customize the camera streaming style, quality, and filtering. Initially, the video recorder should be created and prepared:</p>
+
+<p class="figure">Figure: Video recorder</p>
+<p align="center"><img alt="Video recorder" src="../images/mediaapp_video.png" /></p>
+
+<pre class="prettyprint">
+static void _create_video_recorder(video_recorder_view *view)
+{
+ if (view->recorder)
+ {
+ _destroy_video_recorder(view);
+ }
+ recorder_create_videorecorder(view->camera, &view->recorder);
+ if (view->recorder)
+ {
+ _recorder_file_format_set(view, RECORDER_FILE_FORMAT_3GP);
+ recorder_attr_set_time_limit(view->recorder, limit_seconds);
+ recorder_set_recording_limit_reached_cb(view->recorder, _limit_reached_cb, view);
+ recorder_set_recording_status_cb(view->recorder, _record_status_cb, view);
+ recorder_prepare(view->recorder);
+ }
+}
+</pre>
+
+<p>When the <strong>Start</strong> button is clicked, it starts to record a video. The recorded video can be played in the Media player.</p>
+
+<pre class="prettyprint">
+static void _start_video_recorder(video_recorder_view *view)
+{
+ if (view->recorder)
+ {
+ recorder_start(view->recorder);
+ }
+}
+</pre>
+
+<h3 id="audio" name="audio">Audio Recorder</h3>
+<p>This view allows the user to record audio streaming and play the recorded audio. There are several settings that can be used to adjust audio quality and pre-processing. Initially, the audio recorder should be created and prepared:</p>
+
+<pre class="prettyprint">
+static void _recorder_create(audio_recorder_view *view)
+{
+ if (recorder_create_audiorecorder(&view->recorder) == RECORDER_ERROR_NONE)
+ {
+ _get_supported_codec_list(view);
+
+ if (view->codec_list_len)
+ {
+ _recorder_codec_set(view, view->codec_list[0]);
+ }
+ else
+ {
+ _recorder_codec_set(view, RECORDER_AUDIO_CODEC_PCM);
+ }
+ _recorder_quality_set(view, AQ_MEDIUM);
+
+ recorder_set_recording_status_cb(view->recorder, _on_recording_status_cb, view);
+ recorder_set_recording_limit_reached_cb(view->recorder, _on_recording_limit_reached_cb, view);
+
+ recorder_attr_set_audio_channel(view->recorder, 1);
+ recorder_attr_set_audio_device(view->recorder, RECORDER_AUDIO_DEVICE_MIC);
+ recorder_attr_set_time_limit(view->recorder, MAX_TIME);
+
+ _label_size_set(view, 0);
+ _label_time_set(view, 0);
+ }
+}
+</pre>
+
+<p class="figure">Figure: Audio recorder</p>
+<p align="center"><img alt="Audio recorder" src="../images/mediaapp_audio_recorder.png" /></p>
+
+<p>When the <strong>Start</strong> button is clicked, it starts to record the audio stream. The recorded audio can be played in the Media player.</p>
+
+<pre class="prettyprint">
+static void _recorder_start(audio_recorder_view *view)
+{
+ if (view->recorder)
+ {
+ recorder_prepare(view->recorder);
+ recorder_start(view->recorder);
+ if (_recorder_is_recording(view))
+ {
+ elm_object_item_text_set(view->ctrl_item, STR_STOP);
+ }
+ }
+}
+static void _recorder_stop(audio_recorder_view *view)
+{
+ if (view->recorder)
+ {
+ recorder_commit(view->recorder);
+ if (!_recorder_is_recording(view))
+ {
+ elm_object_item_text_set(view->ctrl_item, STR_START);
+ recorder_unprepare(view->recorder);
+
+ _label_size_set(view, 0);
+ _label_time_set(view, 0);
+ elm_progressbar_value_set(view->progressbar, 0.0);
+ }
+ }
+}
+
+static void _on_ctrl_btn_pressed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ audio_recorder_view *view = data;
+
+ if (view)
+ {
+ if (_recorder_is_recording(view))
+ {
+ _recorder_stop(view);
+ _navigate_to_audio_player_view(view);
+ }
+ else
+ {
+ _recorder_start(view);
+ }
+ }
+}
+</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
--- /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>NotificationManager Sample Overview</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"/></p>
+ </div>
+
+ <h1>NotificationManager Sample Overview</h1>
+
+<p>The NotificationManager sample demonstrates how you can present a notification to the user.</p>
+<p>The following figure illustrates the main view of the NotificationManager.</p>
+<p class="figure">Figure: NotificationManager main view</p>
+<p align="center"><img alt="NotificationManager main view" src="../images/notification_manager.png" /></p>
+
+
+<p>The application opens with the <strong>Notification</strong> tab, which provides access to various notification features. Click the list items to view the features.</p>
+<p>The <strong>Ongoing notification</strong> tab provides access to on-going notifications.</p>
+<p>To move between tabs, click the tabs in the header.</p>
+
+<p>This overview consists of the following parts:</p>
+<ul>
+ <li><a href="#noti">Managing Notifications</a>
+ <p>Manage notifications and use the application ID and application control with normal notifications.</p></li>
+ <li><a href="#ongoing">Managing On-going Notifications</a>
+ <p>Manage on-going notifications and use the application ID and application control with on-going notifications.</p></li>
+ <li><a href="#disp">Displaying Results</a>
+ <p>Display a notification result on the screen.</p></li>
+ </ul>
+
+<h2 id="noti" name="noti">Managing Notifications</h2>
+<p>The notification management is implemented in the <span style="font-family: Courier New,Courier,monospace"><notifications.c></span> file.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_notification()</span> function sets the default image, sound, and text.</p>
+<p>When the user clicks the list item related to the creation of a normal notification, the <span style="font-family: Courier New,Courier,monospace">_tab_view_layout_fill_cb()</span> function calls the appropriate notification to create the result layout function.</p>
+<p>The function to create notifications sets the request message information, such as the alert text, title text, and launch arguments, which are used in the result layout function.</p>
+<p>Manage notifications in the following ways:</p>
+<ul>
+<li>Manage normal notifications.
+<p>If the user clicks the list item related to the creation of the notification, the <span style="font-family: Courier New,Courier,monospace">notify_cb()</span> or <span style="font-family: Courier New,Courier,monospace">notify_normal_cb()</span> function is called to create the notification.</p>
+<p>If the user clicks the list item related to the removal of a notification, the <span style="font-family: Courier New,Courier,monospace">remove_notification_cb()</span> function is called to remove the normal and simple notification.</p>
+<pre class="prettyprint">
+static void create_notification(notification_data *notify_data)
+{
+ ...
+ // Remove all notifications before creating a new one
+
+ notify_data->notification = create_notification(MAIN_MENU_PATH, title_text,
+ alert_text, NULL);
+ if (notify_data->notification)
+ {
+ notification_status_message_post(app_message_text);
+ notification_post(notify_data->notification);
+ }
+
+ ...
+ // Set the information result message
+}
+
+static void remove_notification_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ bool is_success = delete_notification_items();
+ ...
+ // Set the information result message
+
+ badge_remove(PACKAGE);
+}
+</pre>
+</li>
+
+<li>Manage notifications using the application control.
+<p>If the user clicks the list item related to the creation of the notification by the application control, the <span style="font-family: Courier New,Courier,monospace">notify_by_app_control_cb()</span> function is called to create the notification by the application control. The function sets extra data to the appcontrol, so the data can be used after passing the control to the application.</p>
+<p>If the user clicks the list item related to the removal of a notification by the application control, the <span style="font-family: Courier New,Courier,monospace">remove_notification_cb()</span> function is called to remove the appcontrol notification.</p>
+<pre class="prettyprint">
+static void notify_by_app_control_cb(notification_data *notify_data)
+{
+ ...
+ // Remove all notifications before creating a new one
+
+ notify_data->notification = create_notification(ICON2_PATH, notification_app,
+ app_control, NULL);
+ if (notify_data->notification)
+ {
+ notification_status_message_post(app_message_text);
+ const char *array_result[] = { result_1_text, result_2_text, NULL };
+ const char *array_key[] = { SERVICE_DATA_TEXT, SERVICE_DATA_TO, NULL };
+ ...
+ // Set extra data to app control
+ notification_post(notify_data->notification);
+ }
+
+ ...
+ // Set the information result message
+}
+
+static void remove_notification_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ bool is_success = delete_notification_items();
+ ...
+ // Set the information result message
+
+ badge_remove(PACKAGE);
+}
+
+void launch_arguments_set(notification_h notification, const char *argument,...)
+{
+ app_control_h service = NULL;
+ int err = app_control_create(&service);
+ RETM_IF(err != SERVICE_ERROR_NONE, "service_create failure ");
+
+ ...
+ if (argument)
+ {
+ app_control_add_extra_data(service, MESSAGE_POST, argument);
+ }
+
+ ...
+}
+</pre>
+</li>
+
+<li>Manage notifications using the application ID.
+<p>If the user clicks the list item related to the creation of the notification by the application ID, the <span style="font-family: Courier New,Courier,monospace">set_badge_number_by_app_id_cb()</span> function is called to create the notification by the application ID.</p>
+<p>If the user clicks the list item related to the removal of a notification by the application ID, the <span style="font-family: Courier New,Courier,monospace">remove_badge_number_by_app_id_cb()</span> function is called to remove the notification by the application ID.</p>
+<pre class="prettyprint">
+static void notify_by_app_id_cb(notification_data *notify_data)
+{
+ ...
+ // Remove all notifications before creating a new one
+
+ notify_data->notification = create_notification(ICON2_PATH, title_text,
+ notify_with_request, NULL);
+ if (notify_data->notification)
+ {
+ notification_status_message_post(app_message_text);
+ ...
+ // Set App package to app control
+
+ notification_post(notify_data->notification);
+ }
+
+ ...
+ // Set the information result message
+}
+static void remove_notification_by_app_id_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ bool is_success = delete_notification_by_app_id();
+
+ ...
+ // Set the information result message
+}
+
+void launch_arguments_set(notification_h notification, const char * pkgname
+,...)
+{
+ app_control_h service = NULL;
+ int err = app_control_create(&service);
+ RETM_IF(err != SERVICE_ERROR_NONE, "service_create failure ");
+
+ ...
+ if (pkgname)
+ {
+ app_control_set_app_id(service, pkgname);
+ }
+
+ ...
+}
+</pre>
+</li>
+
+<li>Manage badge numbers using the application ID.
+<p>If the user clicks the list item related to increases in the badge number, the <span style="font-family: Courier New,Courier,monospace">set_badge_number_by_app_id_cb()</span> function is called to increase the badge number.</p>
+<p>To remove the badge number using the application ID, decrease the badge number or remove it if the badge count equals to 0.</p>
+<pre class="prettyprint">
+static void set_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+
+ unsigned int count = 0;
+ bool is_success = increase_badge(&count);
+
+ ...
+ // Set the information result message
+}
+static void remove_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+
+ unsigned int count = 0;
+ int err = BADGE_ERROR_NONE;
+ err = badge_get_count(PACKAGE, &count);
+ if (count == 0)
+ {
+ err = badge_remove(PACKAGE);
+ }
+ else
+ {
+ err = badge_set_count(PACKAGE, --count);
+ }
+
+ ...
+ // Set the information result message
+}
+</pre>
+</li>
+</ul>
+
+<h2 id="ongoing" name="ongoing">Managing On-going Notifications</h2>
+<p>The on-going notification management is implemented in the <span style="font-family: Courier New,Courier,monospace"><ongoing-notifications.c></span> file.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_ongoing_notification()</span> function creates an on-going notification. This function sets the notification property and image and title text.</p>
+<pre class="prettyprint">
+static notification_h create_ongoing_notification( const char *image_path, const char
+ *title_text)
+{
+ notification_h ongoing_notification = notification_create(NOTIFICATION_TYPE_ONGOING);
+ RETVM_IF(!ongoing_notification, NULL, "notify is NULL");
+
+ notification_set_property(ongoing_notification, NOTIFICATION_PROP_DISABLE_TICKERNOTI);
+ notification_set_image(ongoing_notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
+ notification_set_text(ongoing_notification, NOTIFICATION_TEXT_TYPE_TITLE, title_text,
+ NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+
+ return ongoing_notification;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">delete_ongoing_notification()</span> function removes the on-going notification, resets the press count and progress value of this notification.</p>
+<pre class="prettyprint">
+static int delete_ongoing_notification(notification_data *data)
+{
+ int err = NOTIFICATION_ERROR_NONE;
+ if (data)
+ {
+ if (data->notification)
+ {
+ err = notification_delete(data->notification);
+ data->notification = NULL;
+ }
+ data->press_count = 0;
+ data->progress_value = 0;
+ }
+ return err;
+}
+</pre>
+<p>When the user clicks the list item related to the creation of an on-going notification, the <span style="font-family: Courier New,Courier,monospace">_tab_view_layout_fill_cb()</span> smart callback is invoked. This smart callback calls an on-going notification function and creates the result layout with request message information. The on-going notification function sets the result information which is used in the result layout.</p>
+<p>You can:</p>
+<ul>
+<li>Manage different types of on-going notifications.
+<p>If the user clicks the list item related to the creation of an on-going notification, the proper function is called according to the on-going activity type, such as percentage, byte, or text.</p>
+<p>If the user clicks the list item related to the removing of an on-going notification, the <span style="font-family: Courier New,Courier,monospace">remove_ongoing_notification_cb()</span> function is called to remove the percentage, byte, and text of on-going notifications.</p>
+<pre class="prettyprint">
+static void ongoing_notification_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ ...
+
+ notify_data->press_count++;
+ if (!notify_data->notification)
+ {
+ ...
+ notify_data->notification = create_ongoing_notification(ICON2_PATH,
+ notify_data->name);
+
+ }
+ RETM_IF(!notify_data->notification, "ongoing_notification is NULL");
+
+ // Set progress to notification
+ notify_data->progress_value += percentage_increment;
+ if (notify_data->progress_value > percentage_max)
+ {
+ notify_data->progress_value = 0;
+ }
+ notification_set_progress(notify_data->notification, notify_data->progress_value);
+
+ notification_content_text_set(notify_data->notification, percentage_content_text,
+ notify_data->press_count);
+
+ // Set the information result
+
+ // If a notification of such type is already created then just update it, if not, post it
+ ...
+}
+
+// The ongoing_notification_byte_cb and ongoing_notification_text_cb functions are
+// similar to the above ongoing_notification_cb function
+
+static void remove_ongoing_notification_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+
+ ...
+ notification_data *data = ongoing_notification_data_get(ONGOING_NOTIFICATION_PERCENT);
+ int err = delete_ongoing_notification(data);
+ ...
+ data = ongoing_notification_data_get(ONGOING_NOTIFICATION_BYTE);
+ err = delete_ongoing_notification(data);
+ ...
+ data = ongoing_notification_data_get(ONGOING_NOTIFICATION_TEXT);
+ err = delete_ongoing_notification(data);
+ ...
+
+ // Set information result
+ ...
+}
+</pre>
+</li>
+
+<li>Manage on-going notifications using the application control.
+<p>To manage on-going notifications that use implicit appcontrol resolution, use the <span style="font-family: Courier New,Courier,monospace">ongoing_notification_by_app_control_cb()</span> function. It sets the extra data to appcontrol, so the data can be used after passing the control to the application.</p>
+<p>To remove on-going notifications that use implicit appcontrol resolution, use the <span style="font-family: Courier New,Courier,monospace">remove_notification_by_app_control_cb()</span> function.</p>
+<pre class="prettyprint">
+static void ongoing_notification_by_app_control_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ ...
+
+ notify_data->press_count++;
+ if (!notify_data->notification)
+ {
+ ...
+ notify_data->notification = create_ongoing_notification(ICON1_PATH,
+ notify_data->name);
+ }
+ RETM_IF(!notify_data->notification, "ongoing_notification is NULL");
+
+ // Set progress to notification
+ ...
+
+ notification_content_text_set(notify_data->notification, percentage_content_text,
+ notify_data->press_count);
+
+ // Increase badge
+ ...
+
+ // Set the information result
+ ...
+
+ // Set extra data to appcontrol
+ ...
+
+ // If a notification of such type is already created then just update it, if not, post it
+ ...
+}
+
+void launch_arguments_set(
+ ...
+ const char *argument,
+ ...
+ )
+{
+ app_control_h service = NULL;
+ int err = app_control_create(&service);
+ RETM_IF(err != SERVICE_ERROR_NONE, "service_create failure ");
+
+ ...
+ // Set extra data to appcontrol
+ if (argument)
+ {
+ app_control_add_extra_data(service, MESSAGE_POST, argument);
+ }
+ ...
+}
+
+static void remove_notification_by_app_control_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+
+ notification_data *data = ongoing_notification_data_get(
+ ONGOING_NOTIFICATION_BY_APP_CONTROL);
+ int err = delete_ongoing_notification(data);
+ // Remove badge
+ ...
+
+ // Set the information result
+ ...
+}
+</pre>
+</li>
+
+<li>Manage on-going notifications using the application ID.
+<p>To notify a specified user using the application ID of the on-going activity, the <span style="font-family: Courier New,Courier,monospace">ongoing_notification_by_app_id_cb()</span> function is called. It sets the application ID to the appcontrol, so the proper application is called.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">remove_ongoing_notification_by_app_id_cb()</span> function is used to remove the notification for the specified application ID.</p>
+<pre class="prettyprint">
+static void ongoing_notification_by_app_id_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+ // ...
+
+ notify_data->press_count++;
+ if (!notify_data->notification)
+ {
+ // ...
+ notify_data->notification = create_ongoing_notification(ICON1_PATH,
+ notify_data->name);
+ }
+ RETM_IF(!notify_data->notification, "ongoing_notification_byte is NULL");
+
+ // Sets the initial size for the ongoing type
+ // ...
+
+ notification_content_text_set(notify_data->notification, byte_content_text,
+ notify_data->press_count);
+
+ // Sets information result
+ // ...
+
+ // Sets application id to appcontrol
+ // ...
+
+ // If a notification of such type is already created then just update it, if not - post it
+ // ...
+}
+
+void launch_arguments_set(
+ // ...
+ const char *argument,
+ // ...
+ )
+{
+ app_control_h service = NULL;
+ int err = app_control_create(&service);
+ RETM_IF(err != SERVICE_ERROR_NONE, "service_create failure ");
+
+ // ...
+ // Sets application id to appcontrol
+ if (pkgname)
+ {
+ app_control_set_app_id(service, pkgname);
+ }
+ // ...
+}
+
+static void remove_ongoing_notification_by_app_id_cb(notification_data *notify_data)
+{
+ RETM_IF(!notify_data, "notify_data is NULL");
+
+ notification_data *data = ongoing_notification_data_get(ONGOING_NOTIFICATION_BY_APP_ID);
+ int err = delete_ongoing_notification(data);
+
+ // Sets information result
+ // ...
+}
+</pre>
+</li>
+</ul>
+
+<h2 id="disp" name="disp">Displaying Results</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">_tab_view_layout_fill_cb()</span> function calls the appropriate notification function where the result information is set. Then the <span style="font-family: Courier New,Courier,monospace">layout_view_add()</span> function is invoked.</p>
+<p>In the <span style="font-family: Courier New,Courier,monospace">layout_view_add()</span> function, the result information is used to create the result layout.</p>
+<pre class="prettyprint">
+static void _tab_view_layout_fill_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ ...
+
+ notification_data *notification_info = (notification_data *)data;
+ notification_info->callback(notification_info);
+ layout_view_add(navi, notification_info);
+}
+
+static void notify_cb(notification_data *notify_data)
+{
+ ...
+ // Set the result information
+ snprintf(notify_data->result_text, TEXT_MAX_LEN, "%s%s<br><br>%s<br>%s<br><br>%s<br>%s<br>",
+ result_message, (notify_data->notification) ? result_message_success_text :
+ result_message_failure_text, notify_message_text, _text,launch_argument_text,
+ app_message_text);
+}
+
+Evas_Object *layout_view_add(Evas_Object *parent, notification_data *notify_info)
+{
+ ...
+ // create result layout
+ _layout_view_fill(data->layout, notify_info);
+ data->navi_item = elm_naviframe_item_push(data->navi, data->name, NULL, NULL, data->layout,
+ NULL);
+ return data->layout;
+}
+</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
--- /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>Paint Sample Overview</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"/></p>
+ </div>
+
+ <h1>Paint Sample Overview</h1>
+
+<p>The Paint sample application demonstrates how you can use the EFL Evas API to draw the following rectangle, polygon, and line shapes.</p>
+
+ <p>The following figure illustrates the application main view.</p>
+ <p class="figure">Figure: Paint screen</p>
+ <p align="center"><img alt="Paint screen" src="../images/paint_app_layout.png" /> <img alt="Paint screen with a drawing" src="../images/paint_app_layout_drawing.png" /></p>
+
+<p>You can:</p>
+
+<ul>
+ <li>Clear the drawing area</li>
+ <li>Select an object already in the drawing area</li>
+ <li>Draw using the freehand, rectangle, circle, or line tool</li>
+ <li>Remove the selected object</li>
+ <li>Show and hide the colorselector panel</li>
+</ul>
+
+<p>The following figure illustrates the structure of the user interface.</p>
+
+<p class="figure" id="ui-struct">Figure: Paint UI layout structure</p>
+ <p align="center"><img alt="Paint UI layout structure" src="../images/paint_gui_edc.png" /> <img alt="Paint UI widget structure" src="../images/paint_gui_layout.png" /></p>
+
+<p>The application workflow can be divided into 2 logical blocks - startup and drawing - described in the following figure.</p>
+
+<p class="figure">Figure: Application workflow</p>
+ <p align="center"><img alt="Application workflow" src="../images/paint_workflow.png" /></p>
+
+<h2>Implementation</h2>
+
+<h3 id="type-defs">Type Definitions</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">appdata_s</span> is the main data structure used as a container for the application data:</p>
+<pre class="prettyprint">
+typedef struct
+{
+ Evas_Object *win; // Application main window
+ Evas_Object *layout; // Application layout
+ Evas_Object *conform; // Application conformant
+ Evas_Object *draw_area; // Drawing area
+ Evas_Object *color_selector_panel; // Colorselector box
+ icon_data_s icon_data[IMAGE_POOL_SIZE]; // Icon data used in the toolbar widget
+} appdata_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">s_info</span> structure contains the data necessary for drawing the shapes:</p>
+<pre class="prettyprint">
+static struct
+{
+ Evas_Object *win; // Application main window
+ Evas_Object *layout; // Application layout
+ Evas_Object *draw_area; // Drawing area rectangle
+ object_t *current_object; // Currently drawn object
+ object_t *selected; // Currently selected object
+ Evas_Object *selection_frame; // Frame surrounding the selected object
+ Evas *evas; // Application's Evas canvas
+ int r1; // Red component of the color from the MAIN colorselector
+ int g1; // Green component of the color from the MAIN colorselector
+ int b1; // Blue component of the color from the MAIN colorselector
+ int a1; // Alpha component of the color from the MAIN colorselector
+ int r2; // Red component of the color from the FILL colorselector
+ int g2; // Green component of the color from the FILL colorselector
+ int b2; // Blue component of the color from the FILL colorselector
+ int a2; // Alpha component of the color from the FILL colorselector
+ Evas_Coord_Point start; // Position in which the cursor was pressed
+ Evas_Coord_Point curr; // Current cursor position
+ Evas_Coord_Point prev; // Previous cursor position
+ mode_type_t mode; // Application mode (such as rectangle drawing)
+ mode_type_t prev_mode; // Previous mode the application was in
+ bool mouse_pressed; // Flag indicating whether the mouse button is pressed
+ Eina_List *objects; // List of drawn objects
+ int win_layer; // Evas_Layer of the main window
+} s_info
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">object_t</span> structure contains the type of the drawn object and an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> pointer list of objects it is built with:</p>
+<pre class="prettyprint">
+typedef struct
+{
+ mode_type_t type; // Object type (such as LINE or CIRCLE)
+ Eina_List *parts; // List containing the object parts
+} object_t;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">icon_data_s</span> structure contains the data used by the toolbar icons:</p>
+<pre class="prettyprint">
+typedef struct
+{
+ const char *file_path; // Path to the icon image file
+ const char *tooltip; // Icon tooltip text
+ mode_type_t mode; // Application mode associated with the toolbar item
+ Elm_Object_Item *item; // Object added to the toolbar
+} icon_data_s;
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">mode_type_t</span> enum contains the modes used by the application. The enum values are also used as indexes of the toolbar items.</p>
+<pre class="prettyprint">
+typedef enum
+{
+ CLEAN = 0, // Clear all (application never uses this mode)
+ SELECT, // Object selection
+ FREEHAND, // Freehand drawing
+ RECTANGLE, // Rectangle drawing
+ CIRCLE, // Circle drawing
+ LINE, // Line drawing
+ COLOR_SELECTOR, // Show and hide the colorselector panel (application never uses this mode)
+ REMOVE, // Remove the selected object (application never uses this mode)
+} mode_type_t;
+</pre>
+
+<h3 id="app-init">Application Initialization</h3>
+<p>The entire application life-cycle is implemented in the <span style="font-family: Courier New,Courier,monospace">paint.c</span> file, using the common Tizen application structure:</p>
+
+<pre class="prettyprint">
+int
+main(int argc, char *argv[])
+{
+ appdata_s ad = {{0,},};
+ // Variable declaration and initialization
+
+ 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;
+
+ // Event handler assignment
+
+ ret = ui_app_main(argc, argv, &event_callback, &ad);
+ // Error handling
+
+ return ret;
+}
+</pre>
+
+<p>The Paint sample application is implemented using the MVC design pattern. Its initialization is done within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> callback function where the user interface creation and application data initialization is triggered using the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function.</p>
+
+<pre class="prettyprint">
+static bool
+app_create(void *data)
+{
+ // Hook to take necessary actions before main event loop starts
+ // Initialize UI resources and application data
+ // If this function returns true, the main loop of application starts
+ // If this function returns false, the application is terminated
+ appdata_s *ad = (appdata_s *)data;
+ // Error handling
+
+ return create_base_gui(ad);
+}
+</pre>
+
+<p>When the application terminates, the <span style="font-family: Courier New,Courier,monospace">app_terminate()</span> callback function frees the allocated resources. The deletion of the main window also deletes all of its children.</p>
+
+<pre class="prettyprint">
+static void
+app_terminate(void *data)
+{
+ // Release all resources
+ appdata_s *ad = (appdata_s *)data;
+ // Error handling
+
+ evas_object_del(ad->win);
+}
+</pre>
+
+<h3 id="view">View</h3>
+
+<p>The entire application layout is implemented using EDJE scripts. All the top level swallows are designed for EFL Elementary UI component embedding. The following EDJE swallow - EFL Elementary UI component relations and assigned functionalities are used (for more information, see the <a href="#ui-struct">Paint UI layout structure</a> figure):</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> (application toolbar):
+ <ul>
+ <li>Sets the drawing mode the application is in</li>
+ <li>Selects an object</li>
+ <li>Removes the selected object</li>
+ <li>Shows and hides the colorselector panel</li>
+ <li>Clears the drawing area</li>
+ </ul></li>
+ <li><span style="font-family: Courier New,Courier,monospace">Evas_Object</span> (drawing area rectangle): Area where the user can perform the drawing</li>
+</ul>
+
+<p>The following table defines the code snippets that create the UI layout.</p>
+<table>
+ <caption>
+ Table: UI layout code snippets and figures
+ </caption>
+ <tr>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+
+ <tr>
+ <td colspan = "2">
+ <strong>The main layout is defined in the <span style="font-family: Courier New,Courier,monospace">paint.edc</span> file:</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ parts
+ {
+ // Toolbar part
+ part
+ {
+ name: PART_TOOLBAR;
+ type: SWALLOW;
+ // PART_TOOLBAR height equals 10% of total window height
+ // The toolbar created with toolbar_create() function is here
+ }
+ // Drawing area part
+ part
+ {
+ name: PART_DRAW_AREA;
+ // PART_DRAW_AREA is under the PART_TOOLBAR and covers the rest of the window
+ // Rectangle created with draw_area_create() is here
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Main layout" src="../images/paint_gui_layout_main.png" /></p>
+ </td>
+ </tr>
+</table>
+
+
+<p>Based on the layout defined with the EDJE scripts, the <a href="#app-init">application interface is created</a> with the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function. The function takes 1 parameter: a pointer to the <a href="#type-defs">structure containing the application data</a> (<span style="font-family: Courier New,Courier,monospace">appdata_s</span>). The functions responsible for creating the GUI are invoked in this function.</p>
+
+<pre class="prettyprint">
+Eina_Bool
+create_base_gui(appdata_s *ad)
+{
+ ad->win = app_win_create();
+ // Error handling
+
+ ad->conform = conformant_create(ad->win);
+ // Error handling
+
+ ad->layout = layout_create(ad->conform, ad);
+ // Error handling
+
+ if (!toolbar_create(ad->layout, ad))
+ // Error handling
+
+ if (!color_selector_panel_create(ad->win, ad->color_selector))
+ // Error handling
+
+ if (!win_evas_get(ad->win))
+ // Error handling
+
+ if (!selection_frame_create(ad))
+ // Error handling
+
+ if (!draw_area_create(ad->layout))
+ // Error handling
+
+ return EINA_TRUE;
+}
+</pre>
+
+<p>The following table defines the base view creation details.</p>
+<table>
+ <caption>
+ Table: Base view creation code snippets and figures
+ </caption>
+ <col width="25%"/>
+ <col width="50%"/>
+ <col width="25%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app_win_create()</span>:
+ <p>Creates the application main window (<span style="font-family: Courier New,Courier,monospace">ad->win</span>).</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Evas_Object*
+app_win_create(void)
+{
+ Evas_Object *win = NULL;
+
+ win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ // Error handling
+
+ // Standard window setup
+
+ return win;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Win layout" src="../images/paint_win.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">conformant_create()</span>:
+ <p>Creates the conformant and inserts it into the main window (<span style="font-family: Courier New,Courier,monospace">ad->conform</span>).</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Evas_Object*
+conformant_create(Evas_Object *win)
+{
+ Evas_Object *conform = NULL;
+ // Error handling
+
+ conform = elm_conformant_add(win);
+ // Error handling
+
+ evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND,
+ EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(win, conform);
+ evas_object_show(conform);
+
+ return conform;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Conformant layout" src="../images/paint_conformant.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">layout_create()</span>:
+<p>Creates the main layout by loading the main group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">paint.edj</span> file), and embeds it into the <span style="font-family: Courier New,Courier,monospace">ad->layout</span> container. The newly created layout is then added as the content to the conformant.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Evas_Object*
+layout_create(Evas_Object *conform, appdata_s *ad)
+{
+ char path[PATH_MAX];
+ Evas_Object *layout = NULL;
+
+ // Error handling
+
+ app_get_resource(EDJ_FILE, path, (int)PATH_MAX);
+
+ layout = elm_layout_add(conform);
+
+ // Error handling
+
+ if (!elm_layout_file_set(layout, path, GRP_MAIN))
+ // Error handling
+
+ evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND,
+ EVAS_HINT_EXPAND);
+ ecore_event_handler_add(ECORE_EVENT_KEY_DOWN, key_press_cb, ad);
+ elm_object_content_set(conform, layout);
+ s_info.layout = ad->layout;
+
+ return layout;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Main layout" src="../images/paint_layout.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_create()</span>:
+<p>Creates an <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span> widget and adds it to the layout that was created earlier.</p>
+<p>The toolbar is then filled using the data from <span style="font-family: Courier New,Courier,monospace">ad->icon_data</span>.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Eina_Bool
+toolbar_create(Evas_Object *layout, appdata_s *ad)
+{
+ Evas_Object* toolbar = NULL;
+ int i = 0;
+
+ // Error handling
+
+ toolbar = elm_toolbar_add(layout);
+ // Error handling
+
+ // Toolbar items appending
+
+ elm_toolbar_homogeneous_set(toolbar, EINA_TRUE);
+
+ // Toolbar is expanded so that all of its items fit inside
+ elm_toolbar_shrink_mode_set(toolbar, ELM_TOOLBAR_SHRINK_EXPAND);
+
+ elm_layout_content_set(layout, PART_TOOLBAR, toolbar);
+
+ return EINA_TRUE;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Toolbar layout" src="../images/paint_toolbar.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">color_selector_create()</span>:
+<p>Creates 2 <span style="font-family: Courier New,Courier,monospace">elm_colorselector</span> instances. They are not used as content of a different UI component.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Evas_Object*
+color_selector_create(Evas_Object *win)
+{
+ Evas_Object *cs = elm_colorselector_add(win);
+ // Error handling
+
+ evas_object_layer_set(cs, EVAS_LAYER_MAX);
+ evas_object_smart_callback_add(cs, COLOR_SELECTOR_COLOR_SELECTED,
+ colorselector_color_set_cb, NULL);
+
+ return cs;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Colorselector layout" src="../images/paint_colorselector.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">win_evas_get()</span>:
+<p>Retrieves the <span style="font-family: Courier New,Courier,monospace">Evas</span> of the window (<span style="font-family: Courier New,Courier,monospace">ad->win</span>).</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Eina_Bool
+win_evas_get(Evas_Object *win)
+{
+ s_info.evas = evas_object_evas_get(win);
+ // Error handling
+
+ return EINA_TRUE;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Application Evas layout" src="../images/paint_evas.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">selection_frame_create()</span>:
+<p>Creates the selection frame image object. This object is later used to highlight the selected object.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Eina_Bool
+selection_frame_create(appdata_s *ad)
+{
+ char path[PATH_MAX] = {0,};
+
+ // Error handling
+
+ s_info.selection_frame = evas_object_image_filled_add(s_info.evas);
+ // Error handling
+
+ // Preparing the frame
+
+ return EINA_TRUE;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Selection frame layout" src="../images/paint_frame.png" /></p>
+ </td>
+
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">draw_area_create()</span>:
+<p>Creates the drawing area object. This is a rectangle which is used as the drawing background.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static Eina_Bool
+draw_area_create(Evas_Object *layout)
+{
+ // Error handling
+
+ s_info.draw_area = evas_object_rectangle_add(s_info.evas);
+ // Error handling
+
+ // Size setting
+
+ // Callback invoked when the mouse button is pressed
+ evas_object_event_callback_add(s_info.draw_area, EVAS_CALLBACK_MOUSE_DOWN,
+ mouse_down_cb, NULL);
+
+ // Callback invoked when the mouse button is released
+ evas_object_event_callback_add(s_info.draw_area, EVAS_CALLBACK_MOUSE_UP,
+ mouse_up_cb, NULL);
+
+ // Callback invoked when the mouse cursor is moved
+ // while the mouse button is pressed
+ evas_object_event_callback_add(s_info.draw_area, EVAS_CALLBACK_MOUSE_MOVE,
+ mouse_move_cb, NULL);
+
+ elm_layout_content_set(layout, PART_DRAW_AREA, s_info.draw_area);
+
+ return EINA_TRUE;
+}
+</pre>
+ </td>
+ <td><p align="center"><img alt="Drawing area layout" src="../images/paint_draw_area.png" /></p>
+ </td>
+ </tr>
+</table>
+
+<h3>Callbacks</h3>
+
+<p>The following figure illustrates how various callbacks are invoked when mouse action takes place.</p>
+ <p class="figure">Figure: Mouse callback order</p>
+<p align="center"><img alt="Mouse callback order" src="../images/paint_mouse_callback_call_order.png" /></p>
+
+<p>The mouse callbacks are added to the <span style="font-family: Courier New,Courier,monospace">ad->draw_area</span> component so that any action outside the drawing area (like a click on the toolbar) is ignored.</p>
+
+<p>The following table defines the mouse callback details.</p>
+<table>
+ <caption>
+ Table: Mouse callbacks
+ </caption>
+ <col width="30%"/>
+ <col width="70%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ </tr>
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">mouse_down_cb()</span>:
+<p>Called when the user taps the <span style="font-family: Courier New,Courier,monospace">ad->draw_area</span> element. The tap position is stored in the <span style="font-family: Courier New,Courier,monospace">s_info.start</span> structure and the <span style="font-family: Courier New,Courier,monospace">s_info.pressed</span> flag is set. The flag is required because of the callback call order (see the above image).</p>
+<p>The functions called by the callback are invoked based on the mode set by the <span style="font-family: Courier New,Courier,monospace">ad->toolbar</span> element.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ Evas_Event_Mouse_Down *eemd = (Evas_Event_Mouse_Down *)event_info;
+ // Error handling
+
+ s_info.mouse_pressed = true;
+
+ s_info.start.x = eemd->canvas.x;
+ s_info.start.y = eemd->canvas.y;
+
+ s_info.prev.x = eemd->canvas.x;
+ s_info.prev.y = eemd->canvas.y;
+
+ s_info.curr.x = eemd->canvas.x;
+ s_info.curr.y = eemd->canvas.y;
+
+ item_unselect();
+
+ if (s_info.mode == SELECT)
+ {
+ select_clicked_item();
+ }
+ else
+ {
+ item_unselect();
+ }
+}
+</pre>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span>:
+<p>Called whenever the user moves the cursor. Since the callback is connected to the <span style="font-family: Courier New,Courier,monospace">ad->draw_area</span> element, the function is not called if the cursor is moved outside its boundaries. The callback is not invoked when the mouse button is released.</p>
+<p>Based on the mode set using the <span style="font-family: Courier New,Courier,monospace">ad->toolbar</span> element, appropriate functions are called. The callback also sets the values of the current (<span style="font-family: Courier New,Courier,monospace">s_info.current</span>) and previous (<span style="font-family: Courier New,Courier,monospace">s_info.previous</span>) cursor positions.</p>
+
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+mouse_move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ int x = 0, y = 0, w = 0, h = 0;
+
+ Evas_Event_Mouse_Move *eemm = (Evas_Event_Mouse_Move *)event_info;
+ // Error handling
+
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+
+ s_info.prev.x = s_info.curr.x;
+ s_info.prev.y = s_info.curr.y;
+
+ if (eemm->cur.canvas.x < x)
+ {
+ s_info.curr.x = x;
+ }
+ else if (eemm->cur.canvas.x > x + w)
+ {
+ s_info.curr.x = x + w;
+ }
+ else
+ {
+ s_info.curr.x = eemm->cur.canvas.x;
+ }
+
+ if (eemm->cur.canvas.y < y)
+ {
+ s_info.curr.y = y;
+ }
+ else if (eemm->cur.canvas.y > y + h)
+ {
+ s_info.curr.y = y + h;
+ }
+ else
+ {
+ s_info.curr.y = eemm->cur.canvas.y;
+ }
+
+ switch (s_info.mode)
+ {
+ case FREEHAND:
+ freehand_update();
+ break;
+
+ case RECTANGLE:
+ rect_update();
+ break;
+
+ case CIRCLE:
+ circle_update();
+ break;
+
+ case LINE:
+ line_update();
+ break;
+
+ case SELECT:
+ object_move();
+ break;
+ }
+}
+</pre>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">mouse_up_cb()</span>:
+<p>Called when the mouse button is released. The <span style="font-family: Courier New,Courier,monospace">s_info.mouse_pressed</span> flag is unset, and the <span style="font-family: Courier New,Courier,monospace">s_info.current_object</span> (recently drawn) object is set as the selected object.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ s_info.mouse_pressed = false;
+ selected_item_set(s_info.current_object);
+ s_info.current_object = NULL;
+}
+</pre>
+ </td>
+ </tr>
+</table>
+
+<p>The following table defines the toolbar callback details.</p>
+<table>
+ <caption>
+ Table: Toolbar callbacks
+ </caption>
+ <col width="30%"/>
+ <col width="70%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_clear_clicked_cb()</span>:
+ <p>Called when the user wants to clear the drawing area. The area is cleared by deleting all the previously drawn objects and their parts (<span style="font-family: Courier New,Courier,monospace">evas_object_delete()</span>).</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+toolbar_clear_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ draw_area_clear();
+}
+
+static void
+draw_area_clear(void)
+{
+ Eina_List *l = NULL;
+ Evas_Object *obj = NULL;
+
+ EINA_LIST_FOREACH(s_info.objects, l, obj)
+ {
+ // Error handling
+ evas_object_del(obj);
+ }
+
+ s_info.objects = eina_list_free(s_info.objects);
+ evas_object_hide(s_info.selection_frame);
+}
+</pre>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_colorselector_show_cb()</span>:
+ <p>Called when the user wants to select a new color. The colorselectors are shown, but the toolbar's colorselector item is not set as selected.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+toolbar_colorselector_show_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = (appdata_s *)data;
+ // Error handling
+
+ elm_toolbar_item_selected_set(ad->icon_data[s_info.mode].item, EINA_TRUE);
+ color_selector_panel_visibility_set(ad, EINA_TRUE);
+}
+</pre>
+ </td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_selected_item_del_cb()</span>:
+ <p>Called when the user wants to deleted a selected item. The currently selected (<span style="font-family: Courier New,Courier,monospace">s_info.selected</span>) object and all of its parts are removed.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+toolbar_selected_item_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Eina_List *l = NULL;
+ Evas_Object *part = NULL;
+ // Error handling
+
+ elm_toolbar_item_selected_set(ad->icon_data[s_info.mode].item, EINA_TRUE);
+ // Error handling
+
+ EINA_LIST_FOREACH(s_info.selected->parts, l, part)
+ {
+ // Error handling
+
+ LOGI("Removing part of type: %s", evas_object_type_get(part));
+ evas_object_del(part);
+ }
+
+ s_info.objects = eina_list_remove(s_info.objects, s_info.selected);
+ free(s_info.selected);
+ item_unselect();
+}
+</pre>
+ </td>
+ </tr>
+</table>
+
+<p>The drawing and selection modes are described in <a href="#drawing">Drawing</a>.</p>
+
+<h3 id="drawing">Drawing</h3>
+
+<p>While the user is drawing, you must control the colorselectors, base shapes, and selections.</p>
+
+<h4>Colorselectors</h4>
+
+<p>The application uses 2 colorselectors:</p>
+
+<ul><li><span style="font-family: Courier New,Courier,monospace">MAIN</span>
+<p>Used to set the color of all the parts of the line and freehand shapes, and the boards of the rectangle and circle objects.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">MAIN</span> colorselector field is clicked, the <span style="font-family: Courier New,Courier,monospace">s_info.r1</span>, <span style="font-family: Courier New,Courier,monospace">s_info.g1</span>, <span style="font-family: Courier New,Courier,monospace">s_info.b1</span>, and <span style="font-family: Courier New,Courier,monospace">s_info.a1</span> values are set.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">FILL</span>
+<p>Used to control the color of the fill part of the rectangle and circle objects.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">FILL</span> colorselector field is clicked, the <span style="font-family: Courier New,Courier,monospace">s_info.r2</span>, <span style="font-family: Courier New,Courier,monospace">s_info.g2</span>, <span style="font-family: Courier New,Courier,monospace">s_info.b2</span>, and <span style="font-family: Courier New,Courier,monospace">s_info.a2</span> values are set.</p></li></ul>
+
+<p>The values set with the colorselectors are used to set the color of the created or selected objects.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">color_set()</span> function is called when the user changes the active color of one of the colorselectors. If an object is selected (<span style="font-family: Courier New,Courier,monospace">s_info.selected != NULL</span>), the color of its parts is also updated.</p>
+
+ <pre class="prettyprint">
+static void
+color_set(color_selector_t cs_num, int r, int g, int b, int a)
+{
+ Eina_List *l = NULL;
+ Evas_Object *part = NULL;
+
+ if (cs_num == COLOR_SELECTOR_MAIN)
+ {
+ s_info.r1 = r;
+ s_info.g1 = g;
+ s_info.b1 = b;
+ s_info.a1 = a;
+ }
+ else
+ {
+ s_info.r2 = r;
+ s_info.g2 = g;
+ s_info.b2 = b;
+ s_info.a2 = a;
+ }
+
+ // Error handling
+
+ if (s_info.selected->type == LINE || s_info.selected->type == FREEHAND)
+ {
+ EINA_LIST_FOREACH(s_info.selected->parts, l, part)
+ {
+ // Error handling
+ evas_object_color_set(part, s_info.r1, s_info.g1, s_info.b1, s_info.a1);
+ }
+ }
+ else
+ {
+ if (cs_num == COLOR_SELECTOR_MAIN)
+ {
+ part = eina_list_nth(s_info.selected->parts, 0);
+ }
+ else
+ {
+ part = eina_list_nth(s_info.selected->parts, 1);
+ }
+
+ evas_object_color_set(part, r, g, b, a);
+ }
+}
+</pre>
+
+
+<h4>Base Shapes</h4>
+
+<p>Every object that appears on the canvas is made from 1 or more rectangle, polygon, or line parts.</p>
+<p>The drawing is performed inside the <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> function. If the <span style="font-family: Courier New,Courier,monospace">s_info.current_object</span> value is equal to <span style="font-family: Courier New,Courier,monospace">NULL</span>, a new <span style="font-family: Courier New,Courier,monospace">object_t</span> variable is created and added to the <span style="font-family: Courier New,Courier,monospace">s_info.objects</span> list. Usually, this happens in the first <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> call after the <span style="font-family: Courier New,Courier,monospace">mouse_down_cb()</span> call.</p>
+<p>Depending on the drawing mode, new <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> are created or modified (with every <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> call) and added to the <span style="font-family: Courier New,Courier,monospace">s_info.current_object</span> structure as drawn object's parts. The object is modified (parts are added or resized) until the user releases the mouse button. When it happens, the newly created object is marked as selected (<span style="font-family: Courier New,Courier,monospace">s_info.selected = s_info.current_object</span>).</p>
+
+<p>The following table defines the update functions for different base shapes.</p>
+<table>
+ <caption>
+ Table: Base shape updates
+ </caption>
+ <col width="30%"/>
+ <col width="70%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">freehand_update()</span>:
+<p>Called by the <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> callback. With every <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> call (except the one before <span style="font-family: Courier New,Courier,monospace">mouse_down_cb()</span>), an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> line is created and added to the <span style="font-family: Courier New,Courier,monospace">object_t</span> object as a part.</p>
+<p>When the new part is created, the <span style="font-family: Courier New,Courier,monospace">s_info.prev</span> and <span style="font-family: Courier New,Courier,monospace">s_info.curr</span> values are used as its start and end points. The start point's vertical position value has to be lower than the end point's vertical position value.</p>
+ </td>
+
+ <td>
+<pre class="prettyprint">
+static void
+freehand_update(void)
+{
+ Evas_Object *part = NULL;
+ int x1 = 0, y1 = 0, x2 = 0, y2 = 0;
+ // Error handling
+
+ if (!s_info.current_object)
+ {
+ s_info.current_object = object_create(FREEHAND);
+ s_info.objects = eina_list_append(s_info.objects,
+ s_info.current_object);
+ }
+
+ part = evas_object_line_add(s_info.evas);
+ // Error handling
+
+ object_part_add(s_info.current_object, part);
+
+ if (s_info.prev.y <= s_info.curr.y)
+ {
+ x1 = s_info.prev.x;
+ x2 = s_info.curr.x;
+ y1 = s_info.prev.y;
+ y2 = s_info.curr.y;
+ }
+ else
+ {
+ x2 = s_info.prev.x;
+ x1 = s_info.curr.x;
+ y2 = s_info.prev.y;
+ y1 = s_info.curr.y;
+ }
+
+ evas_object_color_set(part, s_info.r1, s_info.g1,
+ s_info.b1, s_info.a1);
+ evas_object_line_xy_set(part, x1, y1, x2, y2);
+
+ LOGI("Updating line at: [%d, %d] - [%d, %d]", x1, y1, x2, y2);
+
+ evas_object_repeat_events_set(part, true);
+ evas_object_show(part);
+ evas_object_layer_set(part, s_info.win_layer + 1);
+}
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">rect_update()</span>:
+<p>Creates a rectangle object.</p>
+<p>Rectangle is made with 2 parts: a frame and the fill. After the parts are created, the frame part is moved to the appropriate position.</p>
+<p>The fill part's initial position is translated (from the frame part's initial position) by <span style="font-family: Courier New,Courier,monospace">OBJECT_BORDER</span> in both horizontal and vertical directions. Each time the <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> callback is called, the frame and fill parts are resized accordingly. To calculate the width and the height of the frame part, substract the mouse cursor coordinates (<span style="font-family: Courier New,Courier,monospace">x2 = s_info.start.x < s_info.curr.x; y2 = s_info.start.y < s_info.curr.y;</span>) from the start point coordinates. In case of the fill part, the size is further reduced by <span style="font-family: Courier New,Courier,monospace">2 * OBJECT_BORDER</span>.</p>
+
+ <p align="center"><img alt="Rectangle drawing" src="../images/paint_rectangle.png" /></p>
+ </td>
+
+ <td>
+<pre class="prettyprint">
+static void
+rect_update(void)
+{
+ int x1 = 0, y1 = 0, x2 = 0, y2 = 0;
+ Evas_Object *part = NULL;
+
+ // Error handling
+
+ if (s_info.start.x < s_info.curr.x)
+ {
+ x1 = s_info.start.x;
+ x2 = s_info.curr.x - s_info.start.x;
+ }
+ else
+ {
+ x1 = s_info.curr.x;
+ x2 = s_info.start.x - s_info.curr.x;
+ }
+
+ if (s_info.start.y < s_info.curr.y)
+ {
+ y1 = s_info.start.y;
+ y2 = s_info.curr.y - s_info.start.y;
+ }
+ else
+ {
+ y1 = s_info.curr.y;
+ y2 = s_info.start.y - s_info.curr.y;
+ }
+
+ part = eina_list_nth(s_info.current_object->parts, 0);
+ evas_object_move(part, x1, y1);
+ evas_object_resize(part, x2, y2);
+
+ part = eina_list_nth(s_info.current_object->parts, 1);
+ evas_object_move(part, x1 + OBJECT_BORDER,
+ y1 + OBJECT_BORDER);
+ evas_object_resize(part, x2 - (OBJECT_BORDER*2),
+ y2 - (OBJECT_BORDER*2));
+}
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">circle_update()</span>:
+<p>Creates and resizes a circle object based on user actions.</p>
+<p>The circle object is created from 2 parts: border and fill. Since the Evas API does not provide a circle, the <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> polygon is used instead.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">s_info.start</span> value is used as the center of the circle (ellipse). Based on the difference between the <span style="font-family: Courier New,Courier,monospace">s_info.start</span> and the <span style="font-family: Courier New,Courier,monospace">s_info.curr</span> coordinates, the horizontal and vertical radius is calculated. The polygon is made out of 360 points placed on the canvas in appropriate positions calculated with the <span style="font-family: Courier New,Courier,monospace">sin()</span> and <span style="font-family: Courier New,Courier,monospace">cos()</span> functions.</p>
+<p>To update the size of the circle (at every <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> call), all of its points are removed and created again in new positions. The fill parts are added the same way, but the fill radius is smaller by <span style="font-family: Courier New,Courier,monospace">OBJECT_BORDER</span>.</p>
+ </td>
+
+ <td>
+<pre class="prettyprint">
+static void
+circle_update(void)
+{
+ Evas_Object *part = NULL;
+ int radius_x = 0;
+ int radius_y = 0;
+ int center_x = 0;
+ int center_y = 0;
+
+ // Error handling
+
+ if (!s_info.current_object)
+ {
+ s_info.current_object = object_create(CIRCLE);
+ circle_part_create(s_info.current_object, s_info.r1,
+ s_info.g1, s_info.b1, s_info.a1);
+ circle_part_create(s_info.current_object, s_info.r2,
+ s_info.g2, s_info.b2, s_info.a2);
+ s_info.objects = eina_list_append(s_info.objects,
+ s_info.current_object);
+ }
+
+ radius_x = (s_info.curr.x - s_info.start.x) / 2;
+ radius_y = (s_info.curr.y - s_info.start.y) / 2;
+
+ center_x = s_info.start.x + radius_x;
+ center_y = s_info.start.y + radius_y;
+
+ radius_x = abs(radius_x);
+ radius_y = abs(radius_y);
+
+ part = eina_list_nth(s_info.current_object->parts, 0);
+ circle_part_update(part, radius_x, radius_y, center_x, center_y);
+
+ part = eina_list_nth(s_info.current_object->parts, 1);
+ circle_part_update(part, radius_x - OBJECT_BORDER,
+ radius_y - OBJECT_BORDER, center_x, center_y);
+}
+</pre>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">line_update()</span>:
+ <p>Created from 2 points, where the beginning point's vertical position value has to be the smaller. Based on that, the <span style="font-family: Courier New,Courier,monospace">s_info.start</span> and <span style="font-family: Courier New,Courier,monospace">s_info.curr</span> structures are used. The points are updated at every <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> callback call.</p>
+ </td>
+ <td>
+<pre class="prettyprint">
+static void
+line_update(void)
+{
+ int x1 = 0, y1 = 0, x2 = 0, y2 = 0;
+
+ // Error handling
+
+ if (!s_info.current_object)
+ {
+ line_create();
+
+ return;
+ }
+
+ if (s_info.start.y <= s_info.curr.y)
+ {
+ x1 = s_info.start.x;
+ x2 = s_info.curr.x;
+ y1 = s_info.start.y;
+ y2 = s_info.curr.y;
+ }
+ else
+ {
+ x2 = s_info.start.x;
+ x1 = s_info.curr.x;
+ y2 = s_info.start.y;
+ y1 = s_info.curr.y;
+ }
+ evas_object_line_xy_set(current_object_first_part_get(),
+ x1, y1, x2, y2);
+}
+</pre>
+ </td>
+ </tr>
+</table>
+
+<h4>Selections</h4>
+
+<p>Objects are selected on 2 occasions:</p>
+<ul>
+ <li>When the user finishes drawing a new object.</li>
+ <li>When the user taps a part of an already drawn object when the application mode is set to <span style="font-family: Courier New,Courier,monospace">SELECT</span>.</li>
+</ul>
+
+<p>When an object is selected, the <span style="font-family: Courier New,Courier,monospace">s_info.selection_frame</span> (<span style="font-family: Courier New,Courier,monospace">Evas_Object</span> image) is shown and its size and position are adjusted so that the frame surrounds all of the object parts. The <span style="font-family: Courier New,Courier,monospace">object_move()</span> function is called by the <span style="font-family: Courier New,Courier,monospace">mouse_move_cb()</span> callback. The function calculates the offset of the mouse position and translates all the object parts by that same distance.</p>
+<p>When the user clicks the <span style="font-family: Courier New,Courier,monospace">_info.selection_frame</span> and there is no other object in that position, the current selection remains active.</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>Pedometer Sample Overview</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"/></p>
+ </div>
+
+<h1>Pedometer Sample Overview</h1>
+
+<p>The Pedometer sample demonstrates how to implement a simple pedometer (step counting) application using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SENSOR__MODULE.html">Sensor</a> and <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a> APIs. The data from the acceleration sensor is used
+to detect when the user takes a step, whereas the location position data is used to track the user movement and measure the walked distance as well as the average step length. If the feature is supported by the device, the application also uses the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__ACTIVITY__MODULE.html">Activity Recognition</a> API to detect when the user walks or runs and displays the activity type.</p>
+
+<p>The following figure illustrates the application view.</p>
+ <p class="figure">Figure: Pedometer view</p>
+ <p align="center"><img alt="Pedometer view" src="../images/pedometer.png" /></p>
+
+<p>The main window consists of the following areas:</p>
+ <ul>
+ <li>GPS status area
+<p>A label in the top left corner of the screen where the current GPS status is displayed.</p></li>
+ <li>Activity type area
+ <p>Displays the name of detected activity, which can be:</p>
+ <ul>
+ <li>STATIONARY: when the user is not moving</li>
+ <li>WALK: when the user is walking</li>
+ <li>RUN: when the user is running</li>
+ <li>N/A: when such information is not available</li></ul></li>
+ <li>Steps count area
+<p>Displays the number of steps detected in the current session.</p></li>
+ <li>Steps length area
+<p>Displays the average step length calculated based on the total walked distance and step count, in meters.</p></li>
+ <li>Total distance area
+<p>Displays the total walked distance acquired from the GPS data, in meters.</p></li>
+ <li>Buttons area
+<p>Consists of 2 buttons used to start and stop (pause) the application features.</p></li>
+ </ul>
+
+
+<p>If GPS is not enabled, the total distance and average step length are not calculated.</p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/location</span> privilege
+must be set, and the following features must be enabled:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location</span>;</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/location.gps</span>;</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.accelerometer</span>;</li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.activity_recognition</span>.</li>
+ </ul>
+
+
+<h2>Implementation</h2>
+<h3>Activity Recognition Module</h3>
+
+<p>To check whether the activity recognition feature is supported on the current device, the <span style="font-family: Courier New,Courier,monospace">activity_is_supported()</span> function is invoked. If support is available, an <span style="font-family: Courier New,Courier,monospace">activity_h</span> handle is initialized and a callback function is registered by calling the <span style="font-family: Courier New,Courier,monospace">activity_start_recognition()</span> function. The function takes the <span style="font-family: Courier New,Courier,monospace">activity_type_e</span> enumerator as an argument (the <span style="font-family: Courier New,Courier,monospace">STATIONARY</span>,
+<span style="font-family: Courier New,Courier,monospace">WALK</span> and <span style="font-family: Courier New,Courier,monospace">RUN</span> values are supported). A new handle has to be created for each of them.</p>
+
+<p>The registered callback function is invoked when a given activity type is detected.</p>
+<pre class="prettyprint">
+activity_h *handle = NULL;
+bool supported = false;
+
+if (activity_is_supported(type, &supported) != ACTIVITY_ERROR_NONE || !supported)
+{
+ // Error handling
+}
+
+if (activity_create(handle) != ACTIVITY_ERROR_NONE)
+{
+ // Error handling
+}
+
+if (activity_start_recognition(*handle, type, activity_cb, NULL) != ACTIVITY_ERROR_NONE)
+{
+ // Error handling
+}
+</pre>
+
+<p>The same function is registered as a callback for each activity. It sets the activity type label based on the given type.</p>
+<pre class="prettyprint">
+static void
+activity_cb(activity_type_e type, const activity_data_h data, double timestamp, activity_error_e error, void *user_data)
+{
+ s_pedometer_info.activity_type = type;
+
+ if (type == ACTIVITY_WALK)
+ {
+ view_activity_type_set(WALK_STR);
+ }
+ else if (type == ACTIVITY_RUN)
+ {
+ view_activity_type_set(RUN_STR);
+ }
+ else if (type == ACTIVITY_STATIONARY)
+ {
+ view_activity_type_set(STATIONARY_STR);
+ }
+}
+</pre>
+
+<p>When the activity handles are no longer needed, they have to be stopped using the <span style="font-family: Courier New,Courier,monospace">activity_stop_recognition()</span> function and released using the <span style="font-family: Courier New,Courier,monospace">activity_release()</span> function.</p>
+<pre class="prettyprint">
+if (s_pedometer_info.stationary_handle)
+{
+ activity_stop_recognition(*s_pedometer_info.stationary_handle);
+ activity_release(*s_pedometer_info.stationary_handle);
+}
+
+if (s_pedometer_info.walk_handle)
+{
+ activity_stop_recognition(*s_pedometer_info.walk_handle);
+ activity_release(*s_pedometer_info.walk_handle);
+}
+
+if (s_pedometer_info.run_handle)
+{
+ activity_stop_recognition(*s_pedometer_info.run_handle);
+ activity_release(*s_pedometer_info.run_handle);
+}
+</pre>
+
+<h3>Step Detection Module</h3>
+<p>The acceleration data from the accelerometer sensor is used in the step detection method. The method uses the average value of the accelerations on all 3 axes so that it does not matter how the device is oriented during the measurement.</p>
+
+<p>When the application is launched, the acceleration sensor and listener are initialized:</p>
+<ol><li>The <span style="font-family: Courier New,Courier,monospace">sensor_is_supported()</span> function is called to check whether the specified sensor is available on the currently used device.</li>
+<li>The default specific sensor handle is acquired using the <span style="font-family: Courier New,Courier,monospace">sensor_get_default_sensor()</span> function with <span style="font-family: Courier New,Courier,monospace">SENSOR_ACCELEROMETER</span>
+as the sensor type.</li>
+<li>A sensor listener is created with the acquired handle. Using the listener, a callback function is registered to be invoked when an acceleration sensor event occurs. The callback function is invoked every 200 milliseconds.</li>
+<li>To ensure that steps are detected and counted even if the screen is off or the power save mode is on, the <span style="font-family: Courier New,Courier,monospace">sensor_listener_set_option()</span> function is called to set the <span style="font-family: Courier New,Courier,monospace">SENSOR_OPTION_ALWAYS_ON</span> option for the created sensor listener.</li></ol>
+<pre class="prettyprint">
+bool
+acceleration_sensor_handle_init(void)
+{
+ sensor_h sensor;
+ bool supported = false;
+
+ if (sensor_is_supported(SENSOR_ACCELEROMETER, &supported) != SENSOR_ERROR_NONE || !supported)
+ {
+ // Error handling
+ }
+
+ if (sensor_get_default_sensor(SENSOR_ACCELEROMETER, &sensor) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (sensor_create_listener(sensor, &s_acc_data.acceleration_listener) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (sensor_listener_set_event_cb(s_acc_data.acceleration_listener, 200, accel_cb, NULL) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (sensor_listener_set_option(s_acc_data.acceleration_listener, SENSOR_OPTION_ALWAYS_ON) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ return true;
+}
+</pre>
+
+
+<p>The acceleration sensor listener starts receiving acceleration events after the application start button is clicked and the <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> function is invoked.</p>
+<p>When the stop button is clicked, step detection must be paused with the <span style="font-family: Courier New,Courier,monospace">sensor_listener_stop()</span> function. It stops the sensor server for the acceleration listener so that acceleration sensor events no longer occur. To restart the service, the <span style="font-family: Courier New,Courier,monospace">sensor_listener_start()</span> function must be called again.</p>
+<pre class="prettyprint">
+if (s_acc_data.acceleration_listener)
+{
+ if (sensor_listener_start(s_acc_data.acceleration_listener) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+}
+
+if (s_acc_data.acceleration_listener)
+{
+ if (sensor_listener_stop(s_acc_data.acceleration_listener) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>The actual step detection takes place in the <span style="font-family: Courier New,Courier,monospace">accel_cb()</span> callback function. To simplify the step detection regardless of the device orientation, the average acceleration value of the accelerations in all 3 dimensions is used.</p>
+
+<p>When the service is started, the application registers the initial average acceleration value, which is used as a baseline for later measurements. This method is based on the assumption that the user is relatively stationary when starting the pedometer.</p>
+
+<p>A step is registered when a significant change in the average acceleration value is detected, including sign inversion. The following figure shows a sample of average acceleration data together with the initial average acceleration value for reference. This data was acquired during a 10-step walk.</p>
+<p class="figure">Figure: Average acceleration values during a 10-step walk</p>
+ <p align="center"><img alt="Average acceleration values during a 10-step walk" src="../images/pedometer_accel_data.png" /></p>
+
+<p>A step is registered when the average acceleration value "drop" occurs. In order to detect these drops, the initial average acceleration value is preserved together with the average acceleration value registered when the function was previously called. The initial value is reset every time the service is stopped.</p>
+<p>A drop occurs when the previous value was greater than the initial value and the current value is smaller than the initial value by at least <span style="font-family: Courier New,Courier,monospace">THRESHOLD m/s²</span>. When a step is detected, the step count is incremented and the GUI is updated.</p>
+
+<pre class="prettyprint">
+static void
+accel_cb(sensor_h sensor, sensor_event_s *event, void *data)
+{
+ // Get current average value of acceleration on 3 axes
+ double current_acc_av = (event->values[1] + event->values[2] + event->values[3])/3;
+
+ // If initial average acceleration value is not set, do it now
+ if (s_acc_data.init_acc_av == MAX_ACCEL_INIT_VALUE)
+ {
+ s_acc_data.init_acc_av = s_acc_data.prev_acc_av = current_acc_av;
+
+ return;
+ }
+
+ // Register a drop of acceleration average value
+ if ((s_acc_data.prev_acc_av > s_acc_data.init_acc_av && s_acc_data.init_acc_av - current_acc_av > THRESHOLD))
+ view_steps_count_set(++s_acc_data.steps_count);
+
+ s_acc_data.prev_acc_av = current_acc_av;
+}
+</pre>
+
+<p>When the acceleration sensor listener is no longer needed, the <span style="font-family: Courier New,Courier,monospace">sensor_destroy_listener()</span> function is called to
+destroy the sensor handle and release all its resources.</p>
+
+<pre class="prettyprint">
+if (s_acc_data.acceleration_listener)
+{
+ if (sensor_destroy_listener(s_acc_data.acceleration_listener) != SENSOR_ERROR_NONE)
+ {
+ // Error handling
+ }
+</pre>
+
+<h3>Distance Tracker Module</h3>
+
+<p>The distance tracker is initialized when the application is launched. It uses the location manager to receive position updates. In order to do so, a location manager is created
+using the <span style="font-family: Courier New,Courier,monospace">location_manager_create()</span> function with <span style="font-family: Courier New,Courier,monospace">LOCATION_METHOD_GPS</span> specified. The newly created location manager handle is then used to set a callback function for position updates. The <span style="font-family: Courier New,Courier,monospace">pos_updated_cb()</span> callback is invoked every 4 seconds.</p>
+
+<pre class="prettyprint">
+// Create location manager and set callback for position updates
+if (location_manager_create(LOCATIONS_METHOD_GPS, &s_tracker_data.location_manager) != LOCATIONS_ERROR_NONE)
+{
+ // Error handling
+}
+
+if (location_manager_set_position_updated_cb(s_tracker_data.location_manager, pos_updated_cb, 4, NULL) != LOCATIONS_ERROR_NONE)
+{
+ // Error handling
+}
+</pre>
+
+<p>To start the location manager, the <span style="font-family: Courier New,Courier,monospace">location_manager_start()</span> function is used. It takes the location manager handle as an argument.</p>
+<p>Similarly, to stop the location manager, the <span style="font-family: Courier New,Courier,monospace">location_manager_stop()</span> function is called.</p>
+
+<pre class="prettyprint">
+void
+distance_tracker_start(void)
+{
+ if (!s_tracker_data.location_manager && !distance_tracker_init())
+ {
+ // Error handling
+ }
+
+ if (location_manager_start(s_tracker_data.location_manager) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+}
+
+void
+distance_tracker_stop(void)
+{
+ if (s_tracker_data.location_manager)
+ {
+ if (location_manager_stop(s_tracker_data.location_manager) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+ }
+}
+</pre>
+
+<p>Before the location manager handle is initialized, the GPS status must be checked using the <span style="font-family: Courier New,Courier,monospace">location_manager_is_enabled_method()</span> function with <span style="font-family: Courier New,Courier,monospace">LOCATION_METHOD_GPS</span> as the first argument. A callback function is also set for GPS status changes so that the distance tracker can react properly and stop or start the service when necessary.</p>
+
+<pre class="prettyprint">
+bool
+distance_tracker_gps_check(void)
+{
+ bool gps_enabled = false;
+
+ // Check whether GPS is enabled and set callback for GPS status updates
+ if (location_manager_is_enabled_method(LOCATIONS_METHOD_GPS, &gps_enabled) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (location_manager_set_setting_changed_cb(LOCATIONS_METHOD_GPS, gps_status_changed_cb, NULL) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (!gps_enabled)
+ {
+ // Error handling
+ }
+
+ view_gps_ok_text_set(gps_enabled);
+
+ return true;
+}
+</pre>
+
+<p>The total distance is calculated by comparing the newly received coordinates with the previously received ones. When the <span style="font-family: Courier New,Courier,monospace">pos_updated_cb()</span> function is called for the first time, the initial latitude and longitude are preserved so that the next time it is invoked, the distance can be calculated based on former and current location coordinates.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">location_manager_get_distance()</span> function is used to calculate the distance between 2 sets of coordinates. The total distance is then incremented by the obtained value. After that, the current coordinates are saved as the previous values so the next time the callback function is invoked, only the distance between previous and currently registered position is added to the total distance. Also, the average step length is calculated based on the total distance value and steps count - a simple division to get the average value.</p>
+
+<pre class="prettyprint">
+static void
+pos_updated_cb(double latitude, double longitude, double altitude, time_t timestamp, void *data)
+{
+ int steps_count;
+ double distance = 0;
+
+ // If callback is called for the first time, set prev values
+ if (s_tracker_data.prev_latitude == LAT_UNINITIATED && s_tracker_data.prev_longitude == LONG_UNINITIATED)
+ {
+ s_tracker_data.prev_latitude = latitude;
+ s_tracker_data.prev_longitude = longitude;
+
+ return;
+ }
+
+ // Calculate distance between previous and current location data and update view
+ if (location_manager_get_distance(latitude, longitude, s_tracker_data.prev_latitude,
+ s_tracker_data.prev_longitude, &distance) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ s_tracker_data.total_distance += distance;
+ view_total_distance_set(s_tracker_data.total_distance);
+
+ // Set new prev values
+ s_tracker_data.prev_latitude = latitude;
+ s_tracker_data.prev_longitude = longitude;
+
+ // Calculate and set step length if number of steps is greater than 0
+ steps_count = acceleration_sensor_steps_count_get();
+
+ if (steps_count)
+ view_step_length_set(s_tracker_data.total_distance/steps_count);
+}
+</pre>
+
+<p>When the location manager is no longer needed, it has to be released using the <span style="font-family: Courier New,Courier,monospace">location_manager_destroy()</span> function.</p>
+
+<pre class="prettyprint">
+if (s_tracker_data.location_manager)
+{
+ if (location_manager_destroy(s_tracker_data.location_manager) != LOCATIONS_ERROR_NONE)
+ {
+ // Error handling
+ }
+}
+</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
--- /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>Piano Sample Overview</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"/></p>
+ </div>
+
+<h1>Piano Sample Overview</h1>
+<p>The Piano sample demonstrates how to implement a complex view using EFL UI components with different EDC styles.</p>
+
+<p>The purpose of this sample application is to demonstrate how to make a complex view by recursive composition of standard EFL UI components and provide possibility to support gestures and multitouch functionality. Additionally, this application provides source code to play sounds using Tizen built-in player.</p>
+
+<p>The sample 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_layout</span> for the view management and <span style="font-family: Courier New,Courier,monospace;">elm_button</span> components for the content inside view.</p>
+<p>The following figure illustrates the main view of the Piano application and the UI component tree.</p>
+
+<p class="figure">Figure: Piano main view</p>
+<p align="center"><img alt="Piano main view" src="../images/piano_main.png" /></p>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace;">piano_createview()</span> function creates the window which consists of a layout with a series of <span style="font-family: Courier New,Courier,monospace;">elm_button</span> components that represent real piano notes.</p>
+
+<pre class="prettyprint">
+void piano_createview(void *data)
+{
+ _applyTheme(data);
+ _createlayout(data);
+ _createnotes(data);
+ _registerKeyDown(data);
+ _createNoteTimer(data);
+}
+…
+static void _createnotes(void *data)
+{
+ _createWhiteNotes(data);
+ _createBlackNotes(data);
+
+ _noteButton_fill_rect(data);
+}
+…
+static void _createBlackNotes(void *data)
+{
+ RETM_IF(!data, "data is NULL");
+
+ app_data *ad = (app_data *)data;
+
+ note_struct *prev_note = NULL;
+
+ const int black_buttons_count = 6;
+
+ for (int i = 0 ; i < black_buttons_count ; i++)
+ {
+ note_struct *note = (note_struct*) calloc(1, sizeof(note_struct));
+ RETM_IF(!note, "note is NULL");
+
+ note->button = elm_button_add(ad->win->win);
+ note->type = PIANO_NOTE_BLACK;
+ note->ad = ad;
+ note->prev = prev_note;
+
+ if ( prev_note)
+ {
+ prev_note->next = note;
+ }
+
+ _noteButton_fill( note, i );
+ prev_note = note;
+ }
+}
+</pre>
+
+<p>For each newly created button, the application registers different callbacks to provide multitouch and gesture support:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MULTI_DOWN</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MULTI_UP</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MOUSE_DOWN</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MOUSE_UP</span></li>
+<li><span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MOUSE_OUT</span></li>
+</ul>
+<p>To optimize the application performance, each player must be initialized and prepared before playing a sound corresponding to the linked note.</p>
+
+<pre class="prettyprint">
+static void _noteButton_fill(void* data, int index)
+{
+ RETM_IF(!data, "data is NULL");
+
+ note_struct *note = (note_struct *)data;
+
+ if (note->type == PIANO_NOTE_BLACK)
+ {
+ snprintf(note->sound_name, MAXNAMLEN, "black_%d.wav", index + 1 );
+
+ char part_name[MAXNAMLEN] = { 0 };
+ snprintf( part_name, MAXNAMLEN, "note_black_%d", index + 1 );
+ elm_object_part_content_set(note->ad->win->layout, part_name, note->button);
+
+ elm_object_theme_set(note->button, note->ad->win->theme);
+ elm_object_style_set(note->button, "circle/button_black");
+ }
+ if (note->type == PIANO_NOTE_WHITE)
+ {
+ snprintf(note->sound_name, MAXNAMLEN, "white_%d.wav", index + 1 );
+
+ char part_name[MAXNAMLEN] = { 0 };
+ snprintf( part_name, MAXNAMLEN, "note_white_%d", index + 1 );
+ elm_object_part_content_set(note->ad->win->layout, part_name, note->button);
+
+ elm_object_theme_set(note->button, note->ad->win->theme);
+ elm_object_style_set(note->button, "circle/button_white");
+ }
+
+ evas_object_show(note->button);
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MULTI_DOWN, piano_note_touch_down_cb, note);
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MULTI_UP, piano_note_touch_up_cb, note);
+
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MOUSE_DOWN, piano_note_mouse_down_cb, note);
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MOUSE_UP, piano_note_mouse_up_cb, note);
+
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MOUSE_OUT, piano_note_mouse_out_cb, note);
+
+ evas_object_event_callback_add(note->button, EVAS_CALLBACK_MOUSE_MOVE, piano_note_mouse_move_cb, note);
+
+ piano_note_player_init(note);
+
+ piano_note_player_prepare(note);
+
+ evas_object_data_set(note->button, NOTE_BUTTON_DATA_KEY_NAME, note);
+
+ note->ad->buttonList = eina_list_append(note->ad->buttonList, note);
+}
+</pre>
+
+<p>Responding to different types of mouse events, the application extracts the target note, changes its style to indicate the pressed or unpressed note view, and plays the associated sound file.</p>
+
+<pre class="prettyprint">
+void piano_note_touch_down(void *data, Evas_Point coord_on_main_win, Eina_Bool check_collision)
+{
+ RETM_IF(!data, "data is NULL");
+ note_struct *note = (note_struct*) data;
+
+ Evas_Coord button_left = 0, button_top = 0, button_width = 0, button_height = 0;
+ evas_object_geometry_get(note->button, &button_left, &button_top, &button_width, &button_height );
+
+ if ( PIANO_NOTE_WHITE == note->type )
+ {
+ if ( check_collision && (coord_on_main_win.y - button_top) < PIANO_NOTE_BORDER_OFFSET )
+ {
+ piano_note_touch_down(note->prev, coord_on_main_win, EINA_FALSE);
+ }
+ else if ( check_collision && button_height - (coord_on_main_win.y - button_top) < PIANO_NOTE_BORDER_OFFSET )
+ {
+ piano_note_touch_down(note->next, coord_on_main_win, EINA_FALSE);
+ }
+ }
+
+ switch (note->type)
+ {
+ case PIANO_NOTE_WHITE:
+ elm_object_style_set((Evas_Object*)note->button, "circle/button_white_pressed");
+ break;
+ case PIANO_NOTE_BLACK:
+ elm_object_style_set((Evas_Object*)note->button, "circle/button_black_pressed");
+ break;
+ }
+
+ piano_player_play(note);
+}
+</pre>
+
+<p>Finally, to play sounds, the application checks the current status of the selected note and starts playing the associated sound file:</p>
+
+<pre class="prettyprint">
+void piano_player_play(void *data)
+{
+ RETM_IF(!data, "data is NULL");
+ note_struct *note = (note_struct*) data;
+
+ piano_player_stop(note);
+
+ int ret = player_start(note->player);
+ _print_player_state(note->player);
+ RETM_IF( ret != PLAYER_ERROR_NONE, "ret=%d, note->player=%p", ret, note->player);
+}
+</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
--- /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>Preference Sample Overview</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"/></p>
+ </div>
+
+ <h1>Preference Sample Overview</h1>
+
+ <p>The Preference sample application demonstrates how to work with custom preferences stored in an underlying database. The preferences are stored as key-value pairs with a defined value type (integer, double, boolean, or string). You can use the preferences as an application configuration storage, where the key-value pairs remain valid for subsequent launches of the related application. </p>
+ <p>The following figure illustrates the application view.</p>
+ <p class="figure">Figure: Preference screen</p>
+ <p align="center"><img alt="Preference screen" src="../images/preference_main_view_sd.png" /></p>
+
+ <p>You can:</p>
+ <ul>
+ <li>Create a new preference (key, value, type)
+<p>You must provide a custom key name and value type to be stored (integer, double, boolean, or string), and assign a value corresponding to the defined type.</p></li>
+ <li>List and browse all available preferences
+<p>All defined preferences are displayed using the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component. The related value and its type are displayed in a text format.</p></li>
+ <li>Remove all available preferences
+<p>You can remove all defined preferences with a single batch operation.</p></li>
+ <li>Remove selected preferences
+<p>Once the available preferences are displayed in a list, you can remove selected preferences using the remove button attached to the list item.</p></li>
+ </ul>
+
+<p>The following figure illustrates the structure of the user interface (EDJE layout scripts are used).</p>
+ <p class="figure">Figure: Preference UI layout and component structure</p>
+ <p align="center"><img alt="Preference UI layout structure" src="../images/preference_ui_structure_edje_sd.png" /></p>
+ <p align="center"><img alt="Preference UI components structure" src="../images/preference_ui_structure_elementary_sd.png" /></p>
+ <p>The application workflow can be divided into 4 logical blocks:</p>
+ <ul>
+ <li>Startup</li>
+ <li>Key-value input</li>
+ <li>Preference deletion</li>
+ <li>Removal of all preferences</li>
+ </ul>
+
+ <p>Due to the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__PREFERENCE__MODULE.html">Preference</a> API constraints, the application defines 1 additional preference (<span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span>), which is used internally. Its purpose is to bind a value type to the key name, as the Preference API does not provide information on the type of the key value.</p>
+ <p>In order to identify the type of the value assigned to a specified key, the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> preference is used as a lookup table. The structure of the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> preference is:</p>
+ <p><span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY = key_name_1:value_type;key_name_2:value_type; ... ;key_name_N:value_type;</span></p>
+ <p>Where</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">key_name_X</span> is the name of the X<sup>th</sup> preference defined by the user</li>
+ <li><span style="font-family: Courier New,Courier,monospace">value_type</span> is the type of the value assigned to the preference:
+ <ul>
+ <li>Integer: 0</li>
+ <li>Double: 1</li>
+ <li>Boolean: 2</li>
+ <li>String: 3</li>
+ </ul>
+ </li>
+ </ul>
+
+ <p>The following figure illustrates the application workflow with the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> constraints. </p>
+ <p class="figure" id="app_workflow" name="app_workflow">Figure: Application workflow</p>
+ <p align="center"><img alt="Application workflow" src="../images/preference_workflow_sd.png" /></p>
+ <h2>Requirements</h2>
+ <p>The following privilege must be set:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/systemsettings</span></li>
+ </ul>
+
+
+<h2>Implementation</h2>
+<h3 id="types" name="types">Type Definitions</h3>
+<pre class="prettyprint">
+typedef struct _viewdata
+{
+ Evas_Object* win;
+ Evas_Object* conform;
+ Evas_Object* main_layout;
+ Evas_Object* pref_edit_panel_layout;
+ Evas_Object* pref_edit_panel_key_entry;
+ Evas_Object* pref_edit_panel_value_entry;
+ Evas_Object* pref_edit_panel_type_selector;
+ Evas_Object* pref_buttons_panel_layout;
+ Evas_Object* pref_buttons_panel_left_button;
+ Evas_Object* pref_buttons_panel_right_button;
+ Evas_Object* pref_list_panel_list;
+ Eina_List* genlist_items;
+} viewdata_s;
+</pre>
+<pre class="prettyprint">
+typedef struct _modeldata
+{
+ pref_value_type_t selected_pref_value_type;
+} modeldata_s;
+</pre>
+<pre class="prettyprint">
+typedef enum {PREF_INTEGER = 0, PREF_DOUBLE, PREF_BOOL, PREF_STRING, PREF_MAX} pref_value_type_t;
+
+typedef struct _key_value
+{
+ char *key;
+ void *value;
+ pref_value_type_t value_type;
+} key_value_t;
+</pre>
+<pre class="prettyprint">
+typedef void (*preference_read_cb)(key_value_t *key_value);
+</pre>
+
+<h3>Application Initialization</h3>
+<p>The entire application life-cycle is implemented in the <span style="font-family: Courier New,Courier,monospace">preferences.c</span> file, using a common Tizen application structure:</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,};
+
+ 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);
+ if (ret != APP_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "ui_app_main() is failed. err = %d", ret);
+ }
+
+ return ret;
+}
+</pre>
+<p>The Preference sample application is implemented using an MVC design pattern. Its initialization is done within the <span style="font-family: Courier New,Courier,monospace">app_create()</span> callback function:</p>
+<pre class="prettyprint">
+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
+ appdata_s *ad = data;
+
+ return controller_initialize(&ad->vd, &ad->md);
+}
+</pre>
+<p>In the initialization step, the <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_get()</span> function is used to obtains the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> preference in the form of an <span style="font-family: Courier New,Courier,monospace">Eina_List</span> list. It contains all the preferences defined by the user together with the value types. Once the list of defined preferences types is known, the user interface is created using the <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function. Finally, the application model is created with the <span style="font-family: Courier New,Courier,monospace">model_create()</span> function and the defined preference type list is disposed of using the <span style="font-family: Courier New,Courier,monospace">controller_key_value_list_remove()</span> function.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_initialize()</span> function takes 2 parameters (for details, see <a href="#types">Type Definitions</a>):</p>
+<ul>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">viewdata_s *vd</span> is a pointer to a static structure whose members are referencing UI components.
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">modeldata_s *md</span> is a pointer to a static structure, referencing the preference type selected through the UI selector.</li>
+</ul>
+
+<pre class="prettyprint">
+bool
+controller_initialize(viewdata_s *vd, modeldata_s *md)
+{
+ Eina_List *pref_types = NULL;
+
+ if (!controller_property_items_enum_item_get(&pref_types))
+ {
+ return false;
+ }
+
+ if (!view_create_base_gui(vd))
+ {
+ return false;
+ }
+
+ model_create(md, pref_types, preference_read_valid_cb);
+
+ controller_key_value_list_remove(pref_types);
+
+ return true;
+}
+</pre>
+
+<p>Inside the <span style="font-family: Courier New,Courier,monospace">controller_initialize()</span> function, the list of user-defined preferences and related types (stored in the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> internal preference) are retrieved with the <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_get()</span> function.</p>
+
+<p>At the entry point, you check whether the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> preference has already been defined (<span style="font-family: Courier New,Courier,monospace">model_preference_exists_check()</span>). If yes, its value is retrieved with the <span style="font-family: Courier New,Courier,monospace">model_preference_string_get()</span> function. On success, the string composed of
+<span style="font-family: Courier New,Courier,monospace">key_name:value_type</span> pairs is returned:</p>
+
+<p><span style="font-family: Courier New,Courier,monospace">key_name_1:value_type;key_name_2:value_type; ... ;key_name_N:value_type;</span></p>
+
+<p>The string of property types is then decomposed into a list of <span style="font-family: Courier New,Courier,monospace">key_name:value_type</span> pairs using the <span style="font-family: Courier New,Courier,monospace">property_items_enum_key_type_decompose()</span> function (this function listing is not provided as it is a simple string decomposition that uses the tokenized property of the string). The decomposition result is stored in the
+<span style="font-family: Courier New,Courier,monospace">properties_enum</span> variable of the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> type.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">properties_enum</span> list consists of a number of structures of the <span style="font-family: Courier New,Courier,monospace">key_value_t</span> type (for details, see <a href="#types">Type Definitions</a>).</p>
+<pre class="prettyprint">
+bool
+controller_property_items_enum_item_get(Eina_List **properties_enum)
+{
+ bool key_exists = model_preference_exists_check(PROPERTY_ITEMS_ENUM_KEY);
+
+ char *items_enum_value = NULL;
+ if (key_exists)
+ {
+ if (!model_preference_string_get(PROPERTY_ITEMS_ENUM_KEY, &items_enum_value))
+ {
+ return false;
+ }
+ }
+
+ bool ret = property_items_enum_key_type_decompose(items_enum_value, properties_enum);
+
+ if (items_enum_value)
+ {
+ free(items_enum_value);
+ }
+
+ if (!ret)
+ {
+ return false;
+ }
+
+ return true;
+}
+</pre>
+<p>The user interface is created with the <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function (for more details, see <a href="#view_imp">View Implementation</a>). Once the user interface is created successfully,
+the application model is created using the <span style="font-family: Courier New,Courier,monospace">model_create()</span> function. This function is responsible for enumerating all the user-defined preferences only using the Preference API's <span style="font-family: Courier New,Courier,monospace">preference_foreach_item()</span> function.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model_create()</span> function takes 3 parameters:</p>
+<ul>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">modeldata_s *md</span> is a pointer to the static structure, referencing the preference type selected through the UI selector (for details, see <a href="#types">Type Definitions</a>).
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">Eina_List *pref_types</span> is a list of the <span style="font-family: Courier New,Courier,monospace">key_value_t</span> type structures (for details, see <a href="#types">Type Definitions</a>).
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">preference_read_cb func_cb</span> is a callback function called for each preference read from the underlying database for which the key name matches the key name stored in the <span style="font-family: Courier New,Courier,monospace">pref_types</span> list. At this point, the preference key-value with type matching is performed (basically, this is the startup workflow, as shown in the <a href="#app_workflow">Application workflow</a> figure).
+ </li>
+</ul>
+<pre class="prettyprint">
+void
+model_create(modeldata_s *md, Eina_List *pref_types, preference_read_cb func_cb)
+{
+ pref_foreach_data_s pref_foreach_data =
+ {
+ .pref_types = pref_types,
+ .func_cb = func_cb,
+ };
+
+ modeldata = md;
+
+ int ret = preference_foreach_item(preference_item_enum_cb, (void*)&pref_foreach_data);
+ if (ret != PREFERENCE_ERROR_NONE)
+ {
+ controller_log(DLOG_ERROR, "Function preference_foreach_item() failed with error %d", ret);
+ }
+}
+</pre>
+<p>Note that the mechanism of doubled callback functions is used. It means that the <span style="font-family: Courier New,Courier,monospace">preference_foreach_item()</span> function calls the <span style="font-family: Courier New,Courier,monospace">preference_item_enum_cb()</span> function for each preference found in the underlying database. The <span style="font-family: Courier New,Courier,monospace">preference_item_enum_cb()</span> callback function is called from the application model.</p>
+<p>Within the <span style="font-family: Courier New,Courier,monospace">preference_item_enum_cb()</span> function, the additional callback function (<span style="font-family: Courier New,Courier,monospace">func_cb()</span> of the <span style="font-family: Courier New,Courier,monospace">preference_read_cb</span> type) is called whenever a key-value is successfully matched with the preference type. The <span style="font-family: Courier New,Courier,monospace">func_cb()</span> callback function is called in the application controller.</p>
+
+<p>This doubled approach is used to deliver only those preferences whose key values are successfully matched with the related data type to the controller. The following code snippet illustrates the matching procedure in the <span style="font-family: Courier New,Courier,monospace">preference_item_enum_cb()</span> function:</p>
+<pre class="prettyprint">
+static bool
+preference_item_enum_cb(const char *key, void *user_data)
+{
+ // Extracting data passed to the preference_foreach_item() function
+ pref_foreach_data_s *data = (pref_foreach_data_s*)user_data;
+ Eina_List *it = NULL;
+ key_value_t *key_val = NULL;
+ int val_type = -1;
+
+ // Iteration over key_value_t structures decoded from the PROPERTY_ITEMS_ENUM_KEY
+ // to find a matching preference type for the key name passed to the preference_item_enum_cb
+ EINA_LIST_FOREACH(data->pref_types, it, key_val)
+ {
+ if (!controller_same_string_check((char*)key, key_val->key))
+ {
+ continue;
+ }
+
+ val_type = (int)key_val->value_type;
+ break;
+ }
+
+ // If the matching preference type is found, the additional callback function func_cb
+ // is called in the application controller. func_cb gets full information about the preference
+ // defined by the user (key-name, value, value-type).
+ if (data->func_cb)
+ {
+ key_value_t *kv = (key_value_t*)malloc(sizeof(key_value_t));
+ kv->key = strdup(key_val->key);
+ kv->value = NULL;
+ kv->value_type = key_val->value_type;
+
+ // Obtain the preference value with respect to its data type
+ if (controller_preference_get(key_val->key, key_val->value_type, &kv->value))
+ {
+ data->func_cb(kv);
+ }
+ }
+
+ // Finally, the callback function for the preference value change is bonded to the key,
+ // which was successfully matched with related data type
+ int ret = preference_set_changed_cb(key, preference_item_changed_cb, NULL);
+
+ return true;
+}
+</pre>
+<p>If the above callback function is called successfully, as a result, the <span style="font-family: Courier New,Courier,monospace">preference_read_valid_cb</span> callback function is invoked through the <span style="font-family: Courier New,Courier,monospace">data->func_cb(kv)</span>. The second callback function invocation is responsible for updating the view and the list of preferences.</p>
+<pre class="prettyprint">
+void
+preference_read_valid_cb(key_value_t *key_value)
+{
+ view_genlist_item_update(key_value);
+}
+</pre>
+<p>As a final step within the <span style="font-family: Courier New,Courier,monospace">controller_initialize()</span> function, the list of items obtained using the <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_get()</span> function is freed with the <span style="font-family: Courier New,Courier,monospace">controller_key_value_list_remove()</span> function:</p>
+<pre class="prettyprint">
+void
+controller_key_value_list_remove(Eina_List *list)
+{
+ if (!list)
+ {
+ return;
+ }
+
+ key_value_t *key_val = NULL;
+
+ EINA_LIST_FREE(list, key_val)
+ {
+ controller_key_value_remove(key_val);
+ }
+}
+
+void
+controller_key_value_remove(key_value_t *key_value)
+{
+ if (!key_value)
+ {
+ return;
+ }
+
+ if (key_value->key)
+ {
+ free(key_value->key);
+ }
+
+ free(key_value);
+}
+</pre>
+
+<h3 id="view_imp" name="view_imp">View Implementation</h3>
+<p>The entire application layout is implemented using EDJE scripts. All the top level swallows are designed for EFL Elementary UI component embedding. The following EDJE swallow - EFL Elementary UI component relations and assigned functionalities are used:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">pref_buttons_panel_left_button</span>: <span style="font-family: Courier New,Courier,monospace">elm_button</span> used to remove all defined preferences</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pref_buttons_panel_right_button</span>: <span style="font-family: Courier New,Courier,monospace">elm_button</span> used to update (add or alter) a preference with a provided key name, value, and value type</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pref_edit_panel_key_panel_entry</span>: <span style="font-family: Courier New,Courier,monospace">elm_entry</span> used as a preference key name input field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pref_edit_panel_value_panel_entry</span>: <span style="font-family: Courier New,Courier,monospace">elm_entry</span> used as a preference value input field</li>
+ <li><span style="font-family: Courier New,Courier,monospace">pref_edit_panel_type_panel_entry</span>: <span style="font-family: Courier New,Courier,monospace">elm_hoversel</span> used as a preference value type selector (integer, double, boolean, or string);</li>
+ <li><span style="font-family: Courier New,Courier,monospace">main_panel_pref_list_panel</span>: <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> used as a list of all defined preferences, whose list items consist of:
+ <ul>
+ <li>Key name, value, and value type</li>
+ <li><strong>X</strong> button for deleting a specific preference</li>
+ </ul>
+ </li>
+</ul>
+
+<p>The following table defines the code snippets that create the UI layout.</p>
+<table>
+ <caption>
+ Table: UI layout code snippets and figures
+ </caption>
+ <tr>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+
+ <tr>
+ <td colspan = "2">
+ <strong>The main layout is defined in the <span style="font-family: Courier New,Courier,monospace">preference.edc</span> file:</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_MAIN;
+
+ parts
+ {
+ // The part occupies the entire window
+ part
+ {
+ name: PART_MAIN_BACKGROUND; // "background"
+ type: RECT;
+ description
+ {
+ color: 0 0 0 255;
+ }
+ }
+
+ // The part is positioned in relation to PART_MAIN_BACKGROUND
+ // The spacer occupies the entire PART_MAIN_BACKGROUND area with small margin all around
+ part
+ {
+ name: PART_MAIN_MAIN_PANEL; // "main_panel"
+ type: SPACER;
+ }
+
+ // The part is positioned in relation to PART_MAIN_MAIN_PANEL
+ // The swallow occupies 10% of PART_MAIN_MAIN_PANEL height
+ part
+ {
+ name: PART_MAIN_PREF_BUTTONS_PANEL; // "main_panel_pref_buttons_panel"
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to PART_MAIN_MAIN_PANEL
+ // The swallow occupies 40% of PART_MAIN_MAIN_PANEL height
+ part
+ {
+ name: PART_MAIN_PREF_EDIT_PANEL; // "main_panel_pref_edit_panel"
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to PART_MAIN_MAIN_PANEL
+ // The swallow has flexible height which depends on the height of swallows placed above
+ // At this configuration, the swallow occupies 50% of PART_MAIN_MAIN_PANEL height
+ part
+ {
+ name: PART_MAIN_PREF_LIST_PANEL; // "main_panel_pref_list_panel"
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Main layout" src="../images/preference_ui_structure_edje_main_sd.png" /></p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan = "2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">PART_MAIN_PREF_BUTTONS_PANEL</span> swallow is used as a container for the button layout defined in the <span style="font-family: Courier New,Courier,monospace">pref_buttons_panel.edc</span> file:</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_PREF_BUTTONS_PANEL;
+
+ parts
+ {
+ // The part is positioned in relation to PART_MAIN_PREF_BUTTONS_PANEL from preference.edc file
+ // The rect plays a role of a background for buttons panel and occupies the entire area
+ // of the PART_MAIN_PREF_BUTTONS_PANEL swallow
+ part
+ {
+ name: PART_PREF_BUTTONS_PANEL_BACKGROUND; // "pref_buttons_panel_background"
+ type: RECT;
+ description
+ {
+ color: 0 0 0 255;
+ }
+ }
+
+ // The part is positioned in relation to PART_PREF_BUTTONS_PANEL_BACKGROUND
+ // The swallow occupies the entire height of the PART_PREF_BUTTONS_PANEL_BACKGROUND with
+ // a small margin at the top and the bottom. The swallow width is 50% of the
+ // PART_PREF_BUTTONS_PANEL_BACKGROUND width with a small margin at the left and right
+ // sides. It is located in the top half of the PART_PREF_BUTTONS_PANEL_BACKGROUND swallow
+ part
+ {
+ name: PART_PREF_BUTTONS_PANEL_LEFT_BUTTON; // "pref_buttons_panel_left_button"
+ type: SWALLOW;
+ }
+
+ // The part is positioned in relation to PART_PREF_BUTTONS_PANEL_BACKGROUND
+ // The swallow sizing specification is exactly the same as for
+ // the PART_PREF_BUTTONS_PANEL_BACKGROUND swallow
+ // It is located in the bottom half of the PART_PREF_BUTTONS_PANEL_BACKGROUND swallow
+ part
+ {
+ name: PART_PREF_BUTTONS_PANEL_RIGHT_BUTTON; // "pref_buttons_panel_right_button"
+ type: SWALLOW;
+ }
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Button layout" src="../images/preference_ui_structure_edje_buttons_sd.png" /></p>
+ </td>
+ </tr>
+ <tr>
+ <td colspan = "2">
+ <strong>The <span style="font-family: Courier New,Courier,monospace">main_panel_pref_edit_panel</span> swallow (defined in the main layout) is used to embed the input panel layout defined in the <span style="font-family: Courier New,Courier,monospace">pref_edit_panel.edc</span> file:</strong>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: GROUP_PREF_EDIT_PANEL;
+
+ parts
+ {
+ // The part is positioned in relation to main_panel_pref_edit_panel from preference.edc file
+ // The rect plays a role of the background for the input panel and occupies the entire area
+ // of the PART_MAIN_PREF_EDIT_PANEL
+ part
+ {
+ name: PART_PREF_EDIT_PANEL_BACKGROUND; // "pref_edit_panel_background"
+ type: RECT;
+ description
+ {
+ color: 0 0 0 255;
+ }
+ }
+
+ // ----------=============== KEY INPUT PANEL ===============----------
+
+ // The part is positioned in relation to PART_PREF_EDIT_PANEL_BACKGROUND
+ // The spacer occupies 33% of the PART_PREF_EDIT_PANEL_BACKGROUND height
+ // It is located at the top of the PART_PREF_EDIT_PANEL_BACKGROUND
+ // part
+ part
+ {
+ name: PART_PREF_EDIT_PANEL_KEY_PANEL; // "pref_edit_panel_key_panel"
+ type: SPACER;
+ }
+
+ // The part is positioned in relation to PART_PREF_EDIT_PANEL_KEY_PANEL
+ // The text part occupies the entire height and 30% width of the PART_PREF_EDIT_PANEL_KEY_PANEL
+ // This part is responsible for static text label display only
+ // (LABEL_KEY_CAPTION == "Key name").
+ part
+ {
+ name: "pref_edit_panel_key_panel_label";
+ type: TEXT;
+ description
+ {
+ text
+ {
+ align: 0.5 0.5;
+ text: LABEL_KEY_CAPTION;
+ size: 27;
+ }
+ }
+ }
+
+ // The part is positioned in relation to PART_PREF_EDIT_PANEL_KEY_PANEL
+ // The rect plays a role of a background for the elm_entry component. Its width is flexible
+ // and occupies all the area remaining from pref_edit_panel_key_panel_label part positioning.
+ // The height is set to 70% of the PART_PREF_EDIT_PANEL_KEY_PANEL height and it is
+ // vertically centered
+ part
+ { // "pref_edit_panel_key_panel_entry_background"
+ name: PART_PREF_EDIT_PANEL_KEY_PANEL_ENTRY_BACKGROUND;
+ type: RECT;
+ }
+
+ // The part is positioned in relation to PART_PREF_EDIT_PANEL_KEY_PANEL
+ // The swallow occupies entire height of the PART_PREF_EDIT_PANEL_KEY_PANEL part
+ // and 70% of its width. The swallow is located just to the right from the
+ // pref_edit_panel_key_panel_label text part
+ part
+ {
+ name: PART_PREF_EDIT_PANEL_KEY_PANEL_ENTRY; // "pref_edit_panel_key_panel_entry"
+ type: SWALLOW;
+ }
+
+ // ----------=============== VALUE INPUT PANEL ===============----------
+
+ // The layout of the PART_PREF_EDIT_PANEL_VALUE_PANEL part is exactly the same
+ // as the layout of the PART_PREF_EDIT_PANEL_KEY_PANEL part. The only exception
+ // is that its vertical location is set to the 33% of PART_PREF_EDIT_PANEL_BACKGROUND height
+ // For this reason, the source code is not listed here
+
+ // ----------=============== TYPE INPUT PANEL ===============----------
+
+ // The layout of the PART_PREF_EDIT_PANEL_TYPE_PANEL part is exactly the same
+ // as the layout of the PART_PREF_EDIT_PANEL_KEY_PANEL part. There are only 2 exceptions:
+ // 1. Its height is set to 34% of the PART_PREF_EDIT_PANEL_BACKGROUND height
+ // 2. Its vertical location is set to the 66% of PART_PREF_EDIT_PANEL_BACKGROUND height
+ // For this reason, the source code is not listed here
+ }
+ }
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Input layouts" src="../images/preference_ui_structure_edje_input_sd.png" /></p>
+ </td>
+ </tr>
+</table>
+
+
+<p>Based on the layout defined with EDJE scripts, the application interface is created with the <span style="font-family: Courier New,Courier,monospace">view_create_base_gui()</span> function, which takes 1 parameter (a pointer to the structure containing the view data). In succeeding calls to the <span style="font-family: Courier New,Courier,monospace">*_layout_create()</span> functions, the user interface is created.</p>
+<pre class="prettyprint">
+bool
+view_create_base_gui(viewdata_s *vd)
+{
+ viewdata = vd;
+
+ if (!main_layout_create(vd))
+ {
+ return false;
+ }
+
+ if (!pref_edit_panel_layout_create(vd))
+ {
+ return false;
+ }
+
+ if (!pref_buttons_panel_layout_create(vd))
+ {
+ return false;
+ }
+
+ if (!pref_list_panel_layout_create(vd))
+ {
+ return false;
+ }
+
+ eext_object_event_callback_add(vd->main_layout, EEXT_CALLBACK_BACK, layout_back_cb, vd);
+
+ evas_object_show(vd->win);
+
+ return true;
+}
+</pre>
+
+<p>The following table defines the base view creation details.</p>
+<table>
+ <caption>
+ Table: Base view creation code snippets and figures
+ </caption>
+ <col width="25%"/>
+ <col width="50%"/>
+ <col width="25%"/>
+ <tr>
+ <th>Description</th>
+ <th>Code snippet</th>
+ <th>Figure</th>
+ </tr>
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">main_layout_create()</span>:
+<p>The main view is created by loading the <span style="font-family: Courier New,Courier,monospace">main</span> group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">preference.edj</span> file). The group is embedded to the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> container, which is inserted into the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> component.</p>
+ </td>
+ <td>
+ <pre class="prettyprint">
+static bool
+main_layout_create(viewdata_s *vd)
+{
+ vd->win = window_create();
+
+ vd->conform = conformant_create(vd->win);
+
+ vd->main_layout = layout_create(vd->conform, EDJ_FILE_NAME_MAIN, GROUP_MAIN, NULL);
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Main view" src="../images/preference_ui_view_main_sd.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">pref_edit_panel_layout_create()</span>:
+<p>The edit subview is created by loading the <span style="font-family: Courier New,Courier,monospace">pref_edit_panel</span> group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">pref_edit_panel.edc</span> file). It is embedded to the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> container, which is inserted into the <span style="font-family: Courier New,Courier,monospace">main_panel_pref_edit_panel</span> swallow of the <span style="font-family: Courier New,Courier,monospace">main</span> layout.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">preference_type_selected_cb()</span> callback function is assigned to each of the selector items. This function is invoked on the <span style="font-family: Courier New,Courier,monospace">selected</span> event of the <span style="font-family: Courier New,Courier,monospace">elm_hoversel</span> item.</p>
+ </td>
+ <td>
+ <pre class="prettyprint">
+static bool
+pref_edit_panel_layout_create(viewdata_s *vd)
+{
+ vd->pref_edit_panel_layout = layout_create(vd->main_layout,
+ EDJ_FILE_NAME_PREF_EDIT_PANEL,
+ GROUP_PREF_EDIT_PANEL,
+ PART_MAIN_PREF_EDIT_PANEL);
+
+ vd->pref_edit_panel_key_entry = entry_create(vd->pref_edit_panel_layout,
+ PART_PREF_EDIT_PANEL_KEY_PANEL_ENTRY);
+
+ vd->pref_edit_panel_value_entry = entry_create(vd->pref_edit_panel_layout,
+ PART_PREF_EDIT_PANEL_VALUE_PANEL_ENTRY);
+
+ vd->pref_edit_panel_type_selector = hoversel_create(vd->pref_edit_panel_layout,
+ PART_PREF_EDIT_PANEL_TYPE_PANEL_ENTRY);
+
+ // Type names are added to the elm_hoversel component. On item selection,
+ // the preference_type_selected_cb callback function will be invoked with
+ // the pointer to the item of the statically defined array of type names.
+ for (int i = 0; i < PREF_MAX; i++)
+ {
+ elm_hoversel_item_add(vd->pref_edit_panel_type_selector,
+ preftypes[i].caption,
+ NULL,
+ ELM_ICON_NONE,
+ preference_type_selected_cb,
+ (void*)&preftypes[i]);
+ }
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Edit panel view" src="../images/preference_ui_view_input_sd.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">pref_buttons_panel_layout_create()</span>:
+<p>The button subview is created by loading the <span style="font-family: Courier New,Courier,monospace">pref_buttons_panel</span> group from the EDJE layout (<span style="font-family: Courier New,Courier,monospace">pref_buttons_panel.edc</span> file). It is embedded to the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> container, which is inserted into the <span style="font-family: Courier New,Courier,monospace">main_panel_pref_buttons_panel</span> swallow of the <span style="font-family: Courier New,Courier,monospace">main</span> layout.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">remove_all_click_cb()</span> callback function is assigned to the left button. This function is invoked on the left button <span style="font-family: Courier New,Courier,monospace">clicked</span> event. The <span style="font-family: Courier New,Courier,monospace">update_click_cb()</span> callback function is assigned to the right button. This function is invoked on the right button <span style="font-family: Courier New,Courier,monospace">clicked</span> event. For the implementation details, see <a href="#add_remove">Adding and Removing Properties</a>.</p>
+ </td>
+ <td>
+ <pre class="prettyprint">
+static bool
+pref_buttons_panel_layout_create(viewdata_s *vd)
+{
+ vd->pref_buttons_panel_layout = layout_create(vd->main_layout,
+ EDJ_FILE_NAME_PREF_BUTTONS_PANEL,
+ GROUP_PREF_BUTTONS_PANEL,
+ PART_MAIN_PREF_BUTTONS_PANEL);
+
+ vd->pref_buttons_panel_left_button = button_create(vd->pref_buttons_panel_layout,
+ PART_PREF_BUTTONS_PANEL_LEFT_BUTTON,
+ REMOVE_ALL_PREFS_CAPTION,
+ remove_all_click_cb,
+ NULL);
+
+ vd->pref_buttons_panel_right_button = button_create(vd->pref_buttons_panel_layout,
+ PART_PREF_BUTTONS_PANEL_RIGHT_BUTTON,
+ UPDATE_PREF_CAPTION,
+ update_click_cb,
+ (void*)vd);
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="Button view" src="../images/preference_ui_view_buttons_sd.png" /></p>
+ </td>
+ </tr>
+
+ <tr>
+ <td>
+ <span style="font-family: Courier New,Courier,monospace">pref_list_panel_layout_create()</span>:
+<p>The list subview does not have any EDJE layout. Simply, the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component is embedded into the <span style="font-family: Courier New,Courier,monospace">main_panel_pref_list_panel</span> swallow of the <span style="font-family: Courier New,Courier,monospace">main</span> layout.</p>
+
+<p>Items are added to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component on the application model creation. For this purpose, the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_update()</span> function is used.</p>
+ </td>
+ <td>
+ <pre class="prettyprint">
+static bool
+pref_list_panel_layout_create(viewdata_s *vd)
+{
+ vd->pref_list_panel_list = genlist_create(vd->main_layout,
+ PART_MAIN_PREF_LIST_PANEL,
+ (void*)vd);
+
+ return true;
+}
+</pre>
+ </td>
+ <td>
+ <p align="center"><img alt="List view" src="../images/preference_ui_view_list_sd.png" /></p>
+ </td>
+ </tr>
+</table>
+
+<p>To add items to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> component, the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_update()</span> function takes 1 pointer parameter to the
+<span style="font-family: Courier New,Courier,monospace">key_value_t</span> structure type (for details, see <a href="#types">Type Definitions</a>). It contains the name of the preference key, and its value together with its type.</p>
+<p>Based on the key name, the <span style="font-family: Courier New,Courier,monospace">genlist_item_find()</span> function looks for an item in the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> utilizing a temporary list that references the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> items (see <span style="font-family: Courier New,Courier,monospace">viewdata_s.genlist_items</span> in <a href="#types">Type Definitions</a>). If the item is found successfully:</p>
+<ol>
+ <li>The data pointer bound to the item is obtained with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> function and disposed with the <span style="font-family: Courier New,Courier,monospace">controller_key_value_remove()</span> function.</li>
+ <li>In place of the disposed data, a new data is bound (<span style="font-family: Courier New,Courier,monospace">elm_object_item_data_set()</span>) to the item.</li>
+ <li>The entire <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> is finally updated with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_updated()</span> function.</li>
+</ol>
+
+<p>If the item is not found, a new preference is created by adding it to the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> using the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_add()</span> function.</p>
+
+<pre class="prettyprint">
+bool
+view_genlist_item_update(key_value_t *key_value)
+{
+ Elm_Object_Item *item = NULL;
+
+ // If an item with given key name already exists in the elm_genlist
+ if (genlist_item_find(key_value->key, &item))
+ {
+ // Data pointer assigned to the item is retrieved
+ key_value_t *item_key_value = elm_object_item_data_get(item);
+
+ // and removed
+ controller_key_value_remove(item_key_value);
+ // New data pointer is assigned to the elm_genlist item
+ // This data describes the preference (key name, value, and value type)
+ elm_object_item_data_set(item, (void*)key_value);
+ // Updating the list view
+ elm_genlist_item_update(item);
+
+ return true;
+ }
+
+ // If an item with given key name does not exist in the elm_genlist,
+ // a new item is added together with the data describing related
+ // preference (key name, value, and value type)
+ return view_genlist_item_add(key_value);
+}
+</pre>
+<pre class="prettyprint">
+static bool
+genlist_item_find(const char *key, Elm_Object_Item **item)
+{
+ key_value_t *kv = NULL;
+ Eina_List *l;
+
+ // Itemization of all items and looking for an item with
+ // matching preference key name
+ EINA_LIST_FOREACH(viewdata->genlist_items, l, *item)
+ {
+ // Obtain the pointer to the data bound to the item
+ kv = elm_object_item_data_get(*item);
+
+ // Check whether item key name matches the key being searched
+ // The function below performs case-insensitive strings comparison
+ if (controller_same_string_check(kv->key, (char*)key))
+ {
+ return true;
+ }
+ }
+
+ return false;
+}
+</pre>
+<pre class="prettyprint">
+bool
+view_genlist_item_add(key_value_t *key_value)
+{
+ // Creating new elm_genlist item
+ Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+ itc->item_style = "double_label";// Item style (2 text labels and content swallow)
+ itc->func.text_get = genlist_item_label_get; // Function setting the item text
+ itc->func.content_get = genlist_item_content_get; // Function setting the item swallow content
+ itc->func.state_get = NULL;
+ itc->func.del = genlist_item_del; // Function disposing an item
+
+ // Item is appended to the elm_genlist
+ Elm_Object_Item *item = elm_genlist_item_append(viewdata->pref_list_panel_list, itc,
+ (void *)key_value, NULL,
+ ELM_GENLIST_ITEM_NONE, NULL, NULL);
+
+ // Created item is stored in temporary list for easier access
+ viewdata->genlist_items = eina_list_append(viewdata->genlist_items, item);
+
+ return true;
+}
+</pre>
+
+<p>The following code snippet shows the procedure for setting the item text labels and swallow content:</p>
+<pre class="prettyprint">
+static char*
+genlist_item_label_get(void *data, Evas_Object *obj, const char *part)
+{
+ key_value_t *key_val = (key_value_t*)data;
+
+ // Populating 2 buffers (buff_main and buff_sub) with string content
+ // based on key_val:
+ // - buff_main - preference key name and its value is assigned in the form
+ // of "key_name = value" string. The value is obtained from key_val->value
+ // of void* type by typecasting using key_val->value_type for types
+ // distinguishing
+ // - buff_sub - preference value type is assigned in the string format:
+ // "type: INTEGER || DOUBLE || BOOLEAN || STRING" based on key_val->value_type
+
+ if (controller_same_string_check((char*)part, "elm.text"))
+ {
+ return strdup(buff_main);
+ }
+ else if (controller_same_string_check((char*)part, "elm.text.sub"))
+ {
+ return strdup(buff_sub);
+ }
+
+ return NULL;
+}
+
+static Evas_Object*
+genlist_item_content_get(void *data, Evas_Object *obj, const char *part)
+{
+ // This function creates an elm_image component with predefined visual content
+ if (!strcmp(part, "elm.swallow.icon"))
+ {
+ Evas_Object *image = elm_image_add(obj);
+
+ char *file_path = image_file_path_get(ICON_DELETE_FILE_NAME);
+ if (!elm_image_file_set(image, file_path, NULL))
+ {
+ }
+
+ // The callback function is assigned to the elm_image component and is fired
+ // for "clicked" event
+ evas_object_smart_callback_add(image, "clicked", genlist_item_image_clicked_cb, data);
+
+ return image;
+ }
+
+ return NULL;
+}
+</pre>
+
+<p>Each item added to the elm_genlist has a delete button assigned in the form of the <span style="font-family: Courier New,Courier,monospace">elm_image</span> component with a predefined <strong>X</strong> image. In the code snippet above, the <span style="font-family: Courier New,Courier,monospace">genlist_item_image_clicked_cb()</span> callback function is assigned to each created <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> item. This function is responsible for the chosen item and related preference deletion. Form more details, see the following code snippet and <a href="#controller">Controller Implementation</a>.</p>
+<pre class="prettyprint">
+static void
+genlist_item_image_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ key_value_t *key_val = (key_value_t*)data;
+
+ // Preference removal from the database
+ if (controller_preference_remove(key_val->key))
+ {
+
+ Elm_Object_Item *item = NULL;
+
+ // If an item with given key name exists on the genlist,
+ // it is removed
+ if (genlist_item_find(key_val->key, &item))
+ {
+ elm_object_item_del(item);
+ }
+ }
+}
+</pre>
+
+<h3 id="add_remove" name="add_remove">Adding and Removing Properties</h3>
+<p>The procedure for adding and removing properties is <a href="#view_imp">triggered from the UI</a> as a result of invoking a callback function for the button "clicked" event:</p>
+
+<ul>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">update_click_cb()</span>
+<p>If all the data (key name, value, and value type) is provided correctly and the key name does not exist in the preference database, a new preference is created. Otherwise, the preference with the existing key name is updated. Finally, all the changes are reflected in the UI.</p>
+ <pre class="prettyprint">
+static void
+update_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ // Preference key name, value, and value type is obtained from the UI components
+
+ // Newly defined preference is added to the list of user-defined preferences (PROPERTY_ITEMS_ENUM_KEY).
+ // If the preference already exists in the PROPERTY_ITEMS_ENUM_KEY, only the value and data type
+ // are updated
+ controller_property_items_enum_item_add(key, type);
+
+ // The defined preference is stored in preferences database. The "value"
+ // parameter is passed to the controller_preference_set() function
+ // as a char pointer (string from the elm_entry component)
+ if (controller_preference_set(key, value, type))
+ {
+
+ // If the preference was successfully added, its value is obtained again
+ // to convert the value to the proper data type
+ if (controller_preference_get(key, type, &key_value))
+ {
+
+ // Updating the elm_genlist component
+ view_genlist_item_update(kv);
+ }
+ }
+ else
+ {
+ // Error handling
+ }
+
+ free(key);
+}
+</pre>
+<p>For the implementation details of the <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_add()</span>, <span style="font-family: Courier New,Courier,monospace">controller_preference_set()</span>, and <span style="font-family: Courier New,Courier,monospace">controller_preference_get()</span> functions, see <a href="#controller">Controller Implementation</a>. For the implementation details of the <span style="font-family: Courier New,Courier,monospace">view_genlist_item_update()</span> function, see <a href="#view_imp">View Implementation</a>.</p>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">remove_all_click_cb()</span>
+<p>All the preferences are removed with 1 operation.</p>
+ <pre class="prettyprint">
+static void
+remove_all_click_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ if (!model_preferences_remove())
+ {
+ return;
+ }
+
+ elm_genlist_clear(viewdata->pref_list_panel_list);
+}
+</pre>
+ </li>
+</ul>
+
+<h3>Model Implementation</h3>
+
+<p>The responsibility of the application model module is to operate directly on the Preference API and related data. The additional benefit of this module is the simplification of the API function calling: the error checking and message logging is performed here.</p>
+
+<p>There are several functions with a general signature in the form of a setter and a getter:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">bool model_preference_<strong>#type#</strong>_set(const char *key, <strong>#type#</strong> value)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bool model_preference_<strong>#type#</strong>_get(const char *key, <strong>#type#</strong> *value)</span></li>
+</ul>
+<p>Where <strong>#type#</strong> is 1 of the following data types: int, double, bool, or char*. The generalized implementation of these functions is shown below.</p>
+<pre class="prettyprint">
+bool
+model_preference_<strong>#type#</strong>_set(const char *key, <strong>#type#</strong> value)
+{
+ int ret = preference_set_<strong>#type#</strong>(key, value);
+ if (ret != PREFERENCE_ERROR_NONE)
+ {
+ controller_log(DLOG_ERROR, "Function preference_set_<strong>#type#</strong>() failed with error %d", ret);
+
+ return false;
+ }
+
+ return true;
+}
+
+bool
+model_preference_<strong>#type#</strong>_get(const char *key, <strong>#type#</strong> *value)
+{
+ int ret = preference_get_<strong>#type#</strong>(key, value);
+ if (ret != PREFERENCE_ERROR_NONE)
+ {
+ controller_log(DLOG_ERROR, "Function preference_get_<strong>#type#</strong>() failed with error %d", ret);
+
+ return false;
+ }
+
+ return true;
+}
+</pre>
+
+<p>The preferences deletion can be performed as a single or batch operation using the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">bool model_preference_remove(const char *key)</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">bool model_preferences_remove(void)</span></li>
+</ul>
+
+<p>The implementation of the 2 functions is very similar and differs only by the API function used. In the first case, the
+<span style="font-family: Courier New,Courier,monospace">preference_remove()</span> function is used, while the second one is based on the <span style="font-family: Courier New,Courier,monospace">preference_remove_all()</span> function call. The implementation structure is the same as listed above except for the API function used.</p>
+
+<p>The last feature provided by the application model is the validation of the preference existence. This can be performed with
+the <span style="font-family: Courier New,Courier,monospace">model_preference_exists_check()</span> function. The implementation structure is the same as listed above except for the API function used.</p>
+
+<h3 id="controller" name="controller">Controller Implementation</h3>
+
+<p>The Controller module is responsible for sharing the functionality of the Model with the View module. Some additional logic is executed within the Controller to perform model-related operations and deliver the results to the application view.</p>
+
+<p>During the application initialization and preference adding and updating procedure, the <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_add()</span> and <span style="font-family: Courier New,Courier,monospace">controller_property_items_enum_item_get()</span> functions are used. They are used to control the process of the <span style="font-family: Courier New,Courier,monospace">key_name:value_type</span> tuple storage and retrieval.</p>
+<pre class="prettyprint">
+bool
+controller_property_items_enum_item_add(const char *key_name, pref_value_type_t value_type)
+{
+ bool key_exists = model_preference_exists_check(PROPERTY_ITEMS_ENUM_KEY);
+ char *items_enum_value = NULL;
+
+ if (key_exists)
+ {
+ if (!model_preference_string_get(PROPERTY_ITEMS_ENUM_KEY, &items_enum_value))
+ {
+ return false;
+ }
+ }
+
+ char *items_enum_new = NULL;
+ bool ret = property_items_enum_key_type_compose(items_enum_value, key_name, value_type, &items_enum_new);
+
+ if (!model_preference_string_set(PROPERTY_ITEMS_ENUM_KEY, items_enum_new))
+ {
+ free(items_enum_new);
+
+ return false;
+ }
+
+ free(items_enum_new);
+
+ return true;
+}
+</pre>
+
+<p>First of all, the existence of the <span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span> property is verified and its value is obtained, if it exists. The <span style="font-family: Courier New,Courier,monospace">property_items_enum_key_type_compose()</span> function call performs the merge operation with the <span style="font-family: Courier New,Courier,monospace">key_name:value_type</span> tuple (function parameters) to the obtained value of
+<span style="font-family: Courier New,Courier,monospace">PROPERTY_ITEMS_ENUM_KEY</span>. The implementation of the <span style="font-family: Courier New,Courier,monospace">property_items_enum_key_type_compose()</span> function is simple, so it is not listed here. The final string is stored using the <span style="font-family: Courier New,Courier,monospace">model_preference_string_set()</span> function.</p>
+
+<p>There are also 2 helper functions used in the Controller module:</p>
+<ul>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">controller_preference_set()</span> sets the preference in the database with respect to its datatype:
+ <pre class="prettyprint">
+bool
+controller_preference_set(const char *key, const char *value, pref_value_type_t type)
+{
+ int int_value = 0;
+
+ switch (type)
+ {
+ case PREF_INTEGER:
+ // Conversion from string value to the data type specified
+ // by the "type" and setting the preference
+ if (string_to_int(value, &int_value))
+ {
+ ret = model_preference_int_set(key, int_value);
+ }
+ break;
+ case PREF_DOUBLE:
+ // The same approach as for PREF_INTEGER is used
+ case PREF_BOOL:
+ // The same approach as for PREF_INTEGER is used
+ case PREF_STRING:
+ // The same approach as for PREF_INTEGER is used
+ default:
+ // Error handling
+ }
+
+ // Error handling
+
+ return true;
+}
+</pre>
+ </li>
+ <li>
+ <span style="font-family: Courier New,Courier,monospace">controller_preference_get()</span> gets the preference with a given key from the database:
+ <pre class="prettyprint">
+bool
+controller_preference_get(const char *key, pref_value_type_t type, void **value)
+{
+ int int_value = 0, size_val = 0;
+
+ void *ptr_val = NULL;
+
+ switch (type)
+ {
+ case PREF_INTEGER:
+ // Obtain the preference value for the given key name. Returned value
+ // is typecasted to the void pointer for unification. Get the
+ // size of the variable required for the storage in a memory
+ ret = model_preference_int_get(key, &int_value);
+ ptr_val = (void*)&int_value;
+ size_val = sizeof(int);
+ break;
+ case PREF_DOUBLE:
+ // The same approach as for PREF_INTEGER is used
+ case PREF_BOOL:
+ // The same approach as for PREF_INTEGER is used
+ case PREF_STRING:
+ // The same approach as for PREF_INTEGER is used
+ default:
+ // Error handling
+ }
+
+ // Error handling
+
+ if (size_val > 0)
+ {
+ // Obtained value of the preference is returned as a void pointer
+ // stored in designated memory area for further usage
+ *value = (void*)malloc(size_val);
+ memcpy(*value, ptr_val, size_val);
+ }
+
+ return 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>
\ 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>Scheduler Sample Overview</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"/></p>
+ </div>
+
+<h1>Scheduler Sample Overview</h1>
+<p>The Scheduler sample demonstrates how to schedule calendar events, change and configure their status, and set reminders. Additionally, the Scheduler sample shows daily and monthly calendar views and navigates between them to display lists of scheduled events. </p>
+<p>The following figure illustrates the main views of the Scheduler application and the Details event view.
+</p>
+
+<p class="figure">Figure : Scheduler main views</p>
+<p align="center"><img alt="Scheduler main views" src="../images/scheduler_main.png" /></p>
+
+<p>Each form contains appropriate UI components to enter required data, such as the event title, date and time, time zone, location, recurrence, priority, and sensitivity and buttons to create or save events.</p>
+
+<h2>Implementation</h2>
+<p>To manage events:</p>
+<ol>
+<li>Navigate between lists of events in a daily or monthly order, navigate between lists of events, display event details, and access editing options. When the application starts, it enumerates events and displays them in a selected order.
+
+<pre class="prettyprint">
+static void tabbar_daily_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ main_view_data *ad = (main_view_data *)data;
+ if (data && ad->gl_allday)
+ {
+ ad->added_rec_pos = 0;
+ get_daily_events(data, ad->gl_allday, EINA_FALSE, EINA_TRUE);
+ get_daily_events(data, ad->gl_events, EINA_TRUE, EINA_TRUE);
+ }
+ ad->current_view = DAILY;
+}
+</pre>
+
+<p>The lists of events can be retrieved from the calendar database:</p>
+
+<pre class="prettyprint">
+static void get_daily_events(void *data, Evas_Object *gen_list, Eina_Bool no_all_day, Eina_Bool daily)
+{
+ calendar_error_e error = CALENDAR_ERROR_NONE;
+
+ error = calendar_connect();
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+
+ // remove all events from genlist
+ main_view_data *ad = (main_view_data *)data;
+ elm_genlist_clear(gen_list);
+
+ // create new genlist
+ if (!ad->itc)
+ {
+ ad->itc = elm_genlist_item_class_new();
+ ad->itc->item_style = "default";
+ ad->itc->func.text_get = _item_label_get;
+ ad->itc->func.content_get = NULL;
+ ad->itc->func.state_get = NULL;
+ ad->itc->func.del = NULL;
+ }
+
+ // add new events
+ calendar_list_h list = NULL;
+ error = calendar_db_get_all_records(_calendar_event._uri, 0, 0, &list);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_get_all_records() is failed(%x)", error);
+
+ int count = 0;
+ error = calendar_list_get_count(list, &count);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_list_get_count() is failed(%x)", error);
+
+ calendar_record_h record = NULL;
+ int index = 0;
+ Eina_List *index_list = NULL;
+
+ if (ad->added_rec_pos == 0 && ad->index_array)
+ {
+ free(ad->index_array);
+ ad->index_array = calloc(count, sizeof(int));
+ }
+ else if (!ad->index_array)
+ {
+ ad->index_array = calloc(count, sizeof(int));
+ }
+
+ ad->max_records = count;
+
+ for (int i = 0; i < count; i++)
+ {
+ ...
+ // fill in list here
+ ad->added_rec_pos++;
+ }
+
+ eina_list_free(index_list);
+ calendar_list_destroy(list, true);
+
+ calendar_disconnect();
+ elm_genlist_item_class_free(ad->itc);
+ ad->itc = NULL;
+}
+</pre>
+</li>
+
+<li>View event details.
+<p>When an event is clicked on the list, the <span style="font-family: Courier New,Courier,monospace;">_item_sel_cb</span> callback is called and the <span style="font-family: Courier New,Courier,monospace;">details_view_add()</span> function is executed:</p>
+
+<pre class="prettyprint">
+void details_view_add(window_obj *win, Evas_Object *parent, int index)
+{
+ RETM_IF(!win || !parent, "Passed NULL input data");
+
+ details_view_data *data = calloc(1, sizeof(details_view_data));
+ RETM_IF(!data, "Cannot allocate memory");
+
+ data->win = win;
+ data->navi = parent;
+ data->event_record_index = index;
+ calendar_connect();
+
+ if (CALENDAR_ERROR_NONE != calendar_db_get_record(_calendar_event._uri, index, &data->event_record))
+ {
+ calendar_disconnect();
+ free(data);
+ return;
+ }
+
+ calendar_db_get_record(_calendar_alarm._uri, index, &data->alarm_record);
+
+ data->layout = ui_utils_layout_add(data->navi, details_view_destroy_cb, data);
+ evas_object_size_hint_weight_set(data->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(data->layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_layout_file_set(data->layout, GET_PATH(EDJ_CREATEVIEW), "create_view_layout");
+
+ // Header for naviframe
+ data->navi_item = elm_naviframe_item_push(data->navi, "Details", NULL, NULL, data->layout, NULL);
+ elm_naviframe_item_pop_cb_set(data->navi_item, _details_view_navi_pop_cb, data);
+ evas_object_show(data->layout);
+
+ // Footer for naviframe
+ Evas_Object * toolbar = ui_utils_toolbar_add(data->navi, data->navi_item);
+ elm_toolbar_item_append(toolbar, NULL, button_edit, edit_button_cb, data);
+ elm_toolbar_item_append(toolbar, NULL, button_delete, _delete_button_cb, data);
+
+ // Create genlist for Events control
+ _genlist_add(data);
+
+ _genlist_items_append(data);
+ calendar_disconnect();
+}
+</pre>
+</li>
+
+<li>Create new events.
+<p>When all the fields are filled, and the user has clicked the <strong>Save</strong> button, the <span style="font-family: Courier New,Courier,monospace;">_save_btn_clicked_cb</span> callback is called and the new event is created:</p>
+
+<p class="figure">Figure: Adding events and modifying event details</p>
+<p align="center"><img alt="Adding events and modifying event details" src="../images/scheduler_add_event.png" /></p>
+
+<pre class="prettyprint">
+static void save_btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ create_view_data *ad = (create_view_data *)data;
+ RETM_IF(!ad, "Passed NULL input data");
+
+ const char *title = elm_entry_entry_get(ad->title_entry);
+ RETM_IF(!title, "title string NULL");
+
+ if (strlen(title) == 0)
+ {
+ create_warning_popup(ad, WARNING_POPUP_TEXT);
+ return;
+ }
+
+ calendar_error_e error = CALENDAR_ERROR_NONE;
+
+ error = calendar_connect();
+ RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+
+ calendar_record_h record = create_record_with_presets();
+
+ set_record_title(record, ad->record_title);
+
+ set_record_time(&ad->stm, &ad->etm, record, ad->is_all_day);
+
+ set_record_timezone_city(record);
+
+ set_record_location(record, ad->record_location, CALENDAR_RECORD_NO_COORDINATE, CALENDAR_RECORD_NO_COORDINATE);
+
+ set_record_note(record, ad->record_description);
+
+ set_record_priority(record, ad->priority);
+
+ set_record_sensitivity(record, ad->sensitivity);
+
+ set_record_status(record, ad->status);
+
+ set_record_reminder(record, ad->reminder, ad->reminder_type);
+
+ set_record_recurrence(record, ad->recurrence_data.id);
+
+ if (ad->recurrence_data.id != REPEAT_NONE)
+ {
+ set_record_repeat_count(record, ad->recurrence_data.count);
+ set_record_repeat_until_time(record, &ad->recurrence_data.tm);
+ }
+
+ int record_index = 0;
+ error = calendar_db_insert_record(record, &record_index);
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_db_insert_record() is failed(%x)", error);
+
+ if (record)
+ {
+ calendar_record_destroy(record, EINA_FALSE);
+ }
+
+ error = calendar_disconnect();
+ WARN_IF(error != CALENDAR_ERROR_NONE, "calendar_disconnect() is failed(%x)", error);
+ elm_naviframe_item_pop(ad->navi);
+}
+</pre>
+</li>
+
+<li>Modify the extended options of adding an event.
+<p>There is a series of popup windows with options to choose from.</p>
+
+<pre class="prettyprint">
+static void _show_btn_context_popup(void *data, Evas_Smart_Cb func, int n_labels, char **label, EVENT_PARAM_TYPE type)
+{
+ RETM_IF(!data, "Passed NULL input data");
+ create_view_data *ad = (create_view_data *)data;
+
+ Evas_Object *popup = elm_ctxpopup_add(ad->layout);
+ evas_object_data_set(popup, KEY_PRIORITY_DATA, ad);
+
+ Evas_Object *btn = NULL;
+
+ int param = 0;
+ switch (type)
+ {
+ case PARAM_REMINDER:
+ param = REMINDER_MINUTES;
+ btn = ad->reminder_btn;
+ ad->reminder_ctxpopup = popup;
+ break;
+ case PARAM_PRIORITY:
+ param = PRIORITY_LOW;
+ btn = ad->priority_btn;
+ ad->priority_ctxpopup = popup;
+ break;
+ case PARAM_SENSITIVITY:
+ param = SENSITIVITY_PUBLIC;
+ btn = ad->sensitivity_btn;
+ ad->sensitivity_ctxpopup = popup;
+ break;
+ case PARAM_STATUS:
+ param = STATUS_NONE;
+ btn = ad->status_btn;
+ ad->status_ctxpopup = popup;
+ break;
+ default:
+ break;
+ }
+
+ for (int i = 0; i < n_labels; i++, param++)
+ {
+ elm_ctxpopup_item_append(popup, label[i], NULL, func, (void *)param);
+ }
+
+ evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ int x = 0;
+ int y = 0;
+ evas_object_geometry_get(btn, &x, &y, NULL, NULL);
+ evas_object_move(popup, x, y);
+ evas_object_smart_callback_add(popup, "dismissed", func, NULL);
+
+ evas_object_show(popup);
+}
+</pre>
+
+<p class="figure">Figure: Customizing options</p>
+<p align="center"><img alt="Customizing options" src="../images/scheduler_customize.png" /></p>
+
+</li>
+
+<li>Edit a previously created event.
+<p>When all the fields are filled or edited, and the <strong>Save</strong> button is pressed, the <span style="font-family: Courier New,Courier,monospace;">save_button_clicked_cb</span> callback is called:</p>
+
+<p class="figure">Figure: Customizing editing and recurrence</p>
+<p align="center"><img alt="Customizing editing and recurrence" src="../images/scheduler_edit.png" /></p>
+
+<pre class="prettyprint">
+void save_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ RETM_IF(!data, "Passed NULL input data");
+ edit_view_data *view_data = (edit_view_data *)data;
+
+ int error = calendar_connect();
+ RETM_IF(error != CALENDAR_ERROR_NONE, "calendar_connect() is failed(%x)", error);
+
+ const char *title = elm_entry_entry_get(view_data->title_entry);
+ set_record_title(view_data->event_record, title);
+
+ struct tm *start_time = NULL;
+ elm_datetime_value_get(view_data->start_datetime, start_time);
+
+ struct tm *end_time = NULL;
+ elm_datetime_value_get(view_data->end_datetime, end_time);
+
+ bool is_all_day = elm_check_state_get(view_data->check_object);
+ set_record_time(start_time, end_time, view_data->event_record, is_all_day);
+
+ set_record_timezone_city(view_data->event_record);
+
+ const char *location = elm_entry_entry_get(view_data->location_entry);
+ set_record_location(view_data->event_record, location, CALENDAR_RECORD_NO_COORDINATE, CALENDAR_RECORD_NO_COORDINATE);
+
+ const char *description = elm_entry_entry_get(view_data->description_entry);
+ set_record_note(view_data->event_record, description);
+
+ set_record_priority(view_data->event_record, view_data->priority);
+
+ set_record_sensitivity(view_data->event_record, view_data->sensitivity);
+
+ set_record_status(view_data->event_record, view_data->status);
+
+ set_record_recurrence(view_data->event_record, view_data->recurrence_data.id);
+
+ set_record_repeat_count(view_data->event_record, view_data->recurrence_data.count);
+
+ set_record_repeat_until_time(view_data->event_record, &view_data->recurrence_data.tm);
+
+ calendar_db_update_record(view_data->event_record);
+
+ calendar_disconnect();
+
+ elm_naviframe_item_pop(view_data->navi_frame);
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+ <title>Scroller Index Sample Overview</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"/></p>
+ </div>
+ <h1>Scroller Index Sample Overview</h1>
+
+<p>The Scroller Index sample application demonstrates how to implement an animated current page indicator for the page scroller component. The sample shows how to rotate <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span> using <span style="font-family: Courier New,Courier,monospace">Evas_Maps</span> and how to handle the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> smart callbacks.</p>
+ <p>The following figure illustrates the application views.</p>
+ <p class="figure">Figure: Scroller Index screens</p>
+ <p align="center">
+ <img alt="Scroller Index screen" src="../images/scroller_index_1.png" />
+ <img alt="Scroller Index screen" src="../images/scroller_index_2.png" />
+ <img alt="Scroller Index screen" src="../images/scroller_index_3.png" />
+ </p>
+
+<p>The application provides a user interface divided into 2 sections:</p>
+<ul>
+ <li>Page scroller: an <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component at the top of the screen</li>
+ <li>Index: a current page indicator at the bottom of the screen</li>
+</ul>
+<p>You can switch pages using the page scroller. The current page is indicated by the index under the scroller.</p>
+
+
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table>
+ <caption>Table: Source files</caption>
+ <tbody>
+ <tr>
+ <th>Category</th>
+ <th>File name</th>
+ <th>Description</th>
+</tr>
+<tr>
+ <td>General</td>
+ <td><span style="font-family: Courier New,Courier,monospace">(app_name).c</span></td>
+ <td>Provides an entry point in the application. Initializes the application main data and provides the implementation of the main callbacks.</td>
+</tr>
+<tr>
+ <td rowspan="3">View</td>
+ <td><span style="font-family: Courier New,Courier,monospace">view.c</span></td>
+ <td>Creates the window, background, conformant, and main layout.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">page_scroller.c</span></td>
+ <td>Provides functions to create the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component. The file contains the code for creating the page scroller component and filling it with proper content.</td>
+</tr>
+<tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.c</span></td>
+ <td>Provides functions to create the index component. The file contains code for creating the <span style="font-family: Courier New,Courier,monospace">elm_box</span> component and the current page indices. It connects the scroller logic to the index animations.</td>
+</tr>
+</tbody>
+</table>
+
+<h2>Implementation</h2>
+
+<h3>Page Scroller Implementation</h3>
+
+<p>The page scroller is based on the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component. It allows the user to drag the viewable region around, moving through a much larger object that is contained in the scroller. Typically, the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component contains an <span style="font-family: Courier New,Courier,monospace">elm_box</span> as its content. The box component is larger than the scroller and holds the layouts of multiple pages. This approach allows you to implement interfaces for obtaining the page and its number as well as removing the page. It is a good practice to use an <span style="font-family: Courier New,Courier,monospace">elm_box</span> object as the content of the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span>.</p>
+
+<p>To create the scroller:</p>
+
+<pre class="prettyprint">
+Evas_Object *page_scroller_create(Evas_Object *parent, int p_width, int p_height)
+{
+ // Create the page scroller component and set its parent
+ Evas_Object *page_scroller = NULL;
+ page_scroller = elm_scroller_add(parent);
+
+ // Set the page size of the scroller. In this case, the page width is equal to the screen width
+ elm_scroller_page_size_set(page_scroller, p_width, p_height);
+
+ // Switch off limiting the scroller's minimum size to the minimum size of its content
+ elm_scroller_content_min_limit(page_scroller, EINA_FALSE, EINA_FALSE);
+
+ // Set the bouncing behaviour. The bounce effect is shown when the scroller reaches the last page
+ // In this case, it must be switched off
+ elm_scroller_bounce_set(page_scroller, EINA_FALSE, EINA_TRUE);
+
+ // Set the scroller visibility
+ elm_scroller_policy_set(page_scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+
+ // Disable the scroll bars
+ elm_scroller_page_scroll_limit_set(page_scroller, 1, 1);
+
+ // Enable scroller looping
+ elm_scroller_loop_set(page_scroller, EINA_TRUE, EINA_FALSE);
+
+ // Fill the scroller with the content
+ scroller_fill(page_scroller, p_width, p_height);
+
+ return page_scroller;
+}
+</pre>
+
+<p>To fill the scroller with content using the <span style="font-family: Courier New,Courier,monospace">scroller_fill()</span> function:</p>
+
+<pre class="prettyprint">
+static void
+scroller_fill(Evas_Object *page_scroller, int p_w, int p_h)
+{
+ // Create the box object
+ Evas_Object *box = NULL;
+ box = scroller_box_create(page_scroller);
+
+ // Set the created box as a part of the elm_scroller component
+ elm_object_part_content_set(page_scroller, "default", box);
+
+ // Append new pages to the box
+ scroller_page_add(box, p_w, p_h, 255, 0, 0);
+ scroller_page_add(box, p_w, p_h, 0, 255, 0);
+ scroller_page_add(box, p_w, p_h, 0, 0, 255);
+ scroller_page_add(box, p_w, p_h, 0, 255, 255);
+}
+</pre>
+
+<p>To create the <span style="font-family: Courier New,Courier,monospace">elm_box</span> component:</p>
+
+<pre class="prettyprint">
+static Evas_Object *scroller_box_create(Evas_Object *page_scroller)
+{
+ // Create the box object and set its parent
+ Evas_Object *box = NULL;
+ box = elm_box_add(page_scroller);
+
+ // Set the horizontal parameter of the box component. It means that the new elements are added horizontally
+ elm_box_horizontal_set(box, EINA_TRUE);
+
+ // Set the center alignment of the box parameters
+ elm_box_align_set(box, 0.5, 0.5);
+
+ return box;
+}
+</pre>
+
+<p>To create the scroller pages:</p>
+
+<pre class="prettyprint">
+static void scroller_page_add(Evas_Object *pages_container_box, int p_w, int p_h, int r, int g, int b)
+{
+ Evas_Object *page = NULL;
+ Evas_Object *page_bg = NULL;
+ static int page_no = 0;
+
+ char edj_path[PATH_MAX] = {0,};
+ char page_name[PATH_MAX] = {0,};
+
+ // Create the Evas_Object rectangle. This is the background of each page
+ // It also sets the minimum size of the page (elm_layout object)
+ page_bg = evas_object_rectangle_add(evas_object_evas_get(pages_container_box));
+
+ // Set the color of the background
+ evas_object_color_set(page_bg, r, g, b, 255);
+
+ // Resize the page
+ evas_object_resize(page_bg, p_w, p_h);
+ evas_object_size_hint_min_set(page_bg, p_w, p_h);
+
+ // Create the page (elm_layout component) and load the valid edje file
+ page = elm_layout_add(pages_container_box);
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ if (!elm_layout_file_set(page, edj_path, GROUP_PAGE))
+ {
+ LOGE("failed to set page!");
+ evas_object_del(page_bg);
+ evas_object_del(page);
+
+ return;
+ }
+
+ // Set the page title
+ snprintf(page_name, sizeof(page_name), "PAGE %d", page_no++);
+ elm_object_part_text_set(page, PART_TEXT_PAGE_NAME, page_name);
+
+ // Set the page background and append it to the box component
+ elm_object_part_content_set(page, PART_SWALLOW_PAGE_BG, page_bg);
+ elm_box_pack_end(pages_container_box, page);
+ evas_object_show(page);
+}
+</pre>
+
+<h3>Index Implementation</h3>
+
+<p>The index component is based on the <span style="font-family: Courier New,Courier,monospace">elm_box</span> object. The box automatically places each index on the screen. The following example shows how the implement the index:</p>
+
+<ol><li>Add the index to the box:
+
+<pre class="prettyprint">
+Evas_Object *box = NULL;
+cb_data_t *init_data = NULL;
+int page_count = -1;
+int i = 0;
+
+// Obtain the number of page scroller pages
+page_count = page_scroller_page_count_get(page_scroller);
+
+// Create the elm_box component
+box = box_create(page_scroller);
+
+// Create and append the indexes to the box component
+for (i = 0 ; i < page_count; i++)
+{
+ elm_box_pack_end(box, indice_create(box));
+}
+
+// Connect the elm_scroller smart callbacks with valid functions which are used later for index animation
+evas_object_smart_callback_add(page_scroller, "scroll", page_area_changed_cb, init_data);
+evas_object_smart_callback_add(page_scroller, "scroll,drag,start", page_current_changed_start_cb, init_data);
+evas_object_smart_callback_add(page_scroller, "scroll,anim,stop", page_current_changed_stop_cb, init_data);
+
+return box;
+</pre></li>
+
+<li>Create the box component:
+
+<pre class="prettyprint">
+static Evas_Object *box_create(Evas_Object *parent)
+{
+ // Create the elm_box component
+ Evas_Object *box = NULL;
+ box = elm_box_add(parent);
+
+ // Set the default box parameters. When the homogeneous parameter is set to EINA_TRUE,
+ // every object in the elm_box has the same size
+ elm_box_horizontal_set(box, EINA_TRUE);
+ elm_box_homogeneous_set(box, EINA_TRUE);
+ elm_box_align_set(box, 0.5, 0.5);
+
+ return box;
+}
+</pre></li>
+
+<li>Create the index:
+
+<pre class="prettyprint">
+static Evas_Object *indice_create(Evas_Object *parent)
+{
+ // Create index's elm_layout component
+ Evas_Object *indice = NULL;
+ char edje_path[PATH_MAX] = {0, };
+ indice = elm_layout_add(parent);
+
+ // Obtain the path to the edje file
+ app_get_resource(EDJ_FILE, edje_path, PATH_MAX);
+
+ // Set edje file for the layout object
+ if (!elm_layout_file_set(indice, edje_path, GROUP_INDICE))
+ {
+ LOGE("failed to set edje file");
+ evas_object_del(indice);
+
+ return NULL;
+ }
+}
+</pre></li>
+
+<li>After creating the index elements, set their initial position:
+
+<pre class="prettyprint">
+static Eina_Bool init_position_set_cb(void *data)
+{
+ cb_data_t *init_data = (cb_data_t *) data;
+ Evas_Object *page_scroller = NULL;
+ Evas_Object *index = NULL;
+
+ int c_page = -1;
+ int i = 0;
+
+ // Obtain the pointer to the used objects
+ page_scroller = init_data->scroller;
+ index = init_data->box;
+
+ // Obtain active page in page scroller component
+ c_page = page_scroller_current_page_number_get(page_scroller);
+
+ // Set valid angles for the indices. The current page angle is equal to 90 degrees
+ for (i = 0; i < SCROLLER_PAGES; i++)
+ {
+ if (i == c_page)
+ indice_rotate(index, i, CUR_ANGLE);
+ else
+ indice_rotate(index, i, DEF_ANGLE);
+ }
+
+ return EINA_FALSE;
+}
+</pre></li></ol>
+
+
+<h3>Index Animations</h3>
+
+<p>To animate the index position, <span style="font-family: Courier New,Courier,monospace">Evas_Map</span> is used. The Evas library allows different transformations to be applied to all kinds of <span style="font-family: Courier New,Courier,monospace">Evas_Objects</span>. With Evas mapping, you can map the source object's points to the target's 3D positioning. This allows for effects, such as rotating, scaling, and changing the perspective.</p>
+
+<p>To implement index rotation:</p>
+
+<pre class="prettyprint">
+static void indice_rotate(Evas_Object *box, int n, double angle)
+{
+ Evas_Object *indice = NULL;
+ Evas_Map *indice_map = NULL;
+ int x = -1;
+ int y = -1;
+ int w = -1;
+ int h = -1;
+
+ // Get the index from the index object
+ indice = indice_get(box, n);
+
+ // Get the geometry of the index. It is used later for setting the center of the animation
+ evas_object_geometry_get(indice, &x, &y, &w, &h);
+
+ // Create a new Evas_Map object and set the number of transformation points
+ indice_map = evas_map_new(4);
+
+ // Get the transformation point map from the animated object
+ // In this case, each point corresponds to a corner of the index's Evas_Object
+ evas_map_util_points_populate_from_object(indice_map, indice);
+
+ // Rotate the object. The angle value is calculated in a callback function connected to "scroll" event
+ // cx and cy correspond to the center of the index
+ evas_map_util_rotate(indice_map, angle, x + w / 2, y + w / 2);
+
+ // Connect the transformation map to the object
+ evas_object_map_set(indice, indice_map);
+
+ // Apply the transformation effect on the index
+ evas_object_map_enable_set(indice, EINA_TRUE);
+}
+</pre>
+
+<p>After this function is executed, the operation index is rotated.</p>
+
+<p>The following callback handlers are used in the box constructor:</p>
+<pre class="prettyprint">
+// Invoked when a drag event starts
+evas_object_smart_callback_add(page_scroller, "scroll,drag,start", page_current_changed_start_cb, init_data);
+// Invoked repeatedly during the drag event
+evas_object_smart_callback_add(page_scroller, "scroll", page_area_changed_cb, init_data);
+// Invoked when the drag event stops
+evas_object_smart_callback_add(page_scroller, "scroll,anim,stop", page_current_changed_stop_cb, init_data);
+</pre>
+
+<ul><li>
+<p>The <span style="font-family: Courier New,Courier,monospace">page_current_changed_start_cb()</span> callback is invoked when the user starts to drag the <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> component:</p>
+
+<pre class="prettyprint">
+static void page_current_changed_start_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ current_page = page_scroller_current_page_number_get(obj);
+ elm_scroller_region_get(obj, &current_region, NULL, NULL, NULL);
+}
+</pre>
+
+<p>The callback is only used to obtain the current page number and the current region in the horizontal position. The <span style="font-family: Courier New,Courier,monospace">current_region</span> global variable is used to calculate the progress and is depicted in the following figure.</p>
+<p class="figure">Figure: Current region in the Scroller Index</p>
+<p align="center">
+ <img alt="Current region in the Scroller Index" src="../images/scroller_index_current_region.png"/>
+</p></li>
+
+<li><p>After the drag is started, the <span style="font-family: Courier New,Courier,monospace">page_area_changed_cb()</span> callback is invoked repeatedly. </p>
+<pre class="prettyprint">
+static void page_area_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ int x = 0;
+ int w = 0;
+ double angle = 0.0;
+ int next_page = -1;
+ cb_data_t *cb_data = (cb_data_t *) data;
+
+ // Get the actual region of the elm_scroller component
+ elm_scroller_region_get(obj, &x, NULL, &w, NULL);
+
+ // Calculate the angle. The current region is the initial position set in the drag start callback
+ // The difference between x and current_region is the progress of the scroll
+ // It is multiplied by 90.0 degrees (if progress equals 1.0, the rotation angle is equal to 90.0 degrees)
+ angle = (double) (x - current_region)/w * 90.0;
+
+ // Calculate the next page number. It is used to get the next index which is also animated
+ if (fabs(x - current_region) <= w)
+ {
+ next_page = x > current_region ? (current_page + 1) % SCROLLER_PAGES : current_page - 1;
+ }
+ else
+ {
+ if (x > current_region)
+ {
+ next_page = current_page - 1;
+ }
+ else
+ {
+ next_page = 0;
+ }
+ }
+
+ // Because the loop property of the page scroller is enabled,
+ // the user is able to scroll pages from first to last directly
+ // In that case, the next_page calculated before is lower than 0, but can be used to set its valid value
+ if (next_page < 0)
+ next_page = SCROLLER_MAX_IDX;
+
+ // Set the rotation angles of the indexes
+ // The next page rotation angle is increased by 360 degrees because the rotate
+ // function does not work if the angle is lower than 0 and the scroller is moved from right to left
+ indice_rotate(cb_data->box, current_page, 90 + angle);
+ indice_rotate(cb_data->box, next_page, 360 + angle);
+}
+</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>
\ 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>Mobile Native Sample Descriptions</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"/></p>
+ </div>
+
+ <h1>Mobile Native Sample Descriptions</h1>
+
+ <p>To access general information about the native sample functionality and the content of the sample source files, click the sample name in the following tables.</p>
+
+
+ <table border="1">
+ <caption>
+ Table: Mobile native samples in the Tizen SDK
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="bundle_sd_mn.htm">Bundle</a></td>
+ <td>Demonstrates how you can manipulate bundle objects.</td>
+ </tr>
+ <tr>
+ <td><a href="calculator_sd_mn.htm">Calculator</a></td>
+ <td>Demonstrates how you can implement an advanced calculator application.</td>
+ </tr>
+ <tr>
+ <td><a href="contacts_sd_mn.htm">Contacts</a></td>
+ <td>Demonstrates how you can manage contacts.</td>
+ </tr>
+ <tr>
+ <td><a href="evas_gl_sd_mn.htm">Evas_GL</a></td>
+ <td>Demonstrates how you can implement a cube that can be rotated on the screen through Evas GL.</td>
+ </tr>
+ <tr>
+ <td><a href="file_manager_sd_mn.htm">File Manager</a></td>
+ <td>Demonstrates how you can implement a complex view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="glview11_cube_sd_mn.htm">GLView11Cube</a></td>
+ <td>Demonstrates how you can use ElmGLView to create a 3D cube on the screen.</td>
+ </tr>
+ <tr>
+ <td><a href="glview_cube_sd_mn.htm">GLViewCube</a></td>
+ <td>Demonstrates how you can implement a simple UI and draw a rotating cube using simple vertex and fragment shaders.</td>
+ </tr>
+ <tr>
+ <td><a href="glview_shader_sd_mn.htm">GLViewShader</a></td>
+ <td>Demonstrates how you can render more complex geometric shapes with OepnGL® ES and use Elementary GLView helper macros to port existing code.</td>
+ </tr>
+ <!--
+ <tr>
+ <td><a href="gps_consumer_sd_mn.htm">GPS Consumer</a></td>
+ <td>Demonstrates how you can implement a location-based application using the geolocation data provided by an external service (<a href="gps_service_sd_mn.htm">GPS Service</a>).</td>
+ </tr>
+ <tr>
+ <td><a href="gps_service_sd_mn.htm">GPS Service</a></td>
+ <td>Demonstrates how you can implement a Tizen service providing geolocation data using the IPC mechanism from the Tizen API.</td>
+ </tr>
+ -->
+ <tr>
+ <td><a href="hybridservice_sd_mn.htm">HybridServiceApp</a></td>
+ <td>Demonstrates how you can communicate with a Tizen Web application (<a href="../mobile_w/hybridwebapp_mw.htm">HybridWebApp</a>) to manage the timer for the Web application.</td>
+ </tr>
+ <tr>
+ <td><a href="mediaapp_sd_mn.htm">Media App</a></td>
+ <td>Demonstrates how you can develop media handling applications with the ability to manage different media sources.</td>
+ </tr>
+ <tr>
+ <td><a href="notificationmanager_sd_mn.htm">Notification Manager</a></td>
+ <td>Demonstrates how you can present a notification to the user.</td>
+ </tr>
+ <tr>
+ <td><a href="paint_sd_mn.htm">Paint</a></td>
+ <td>Demonstrates how you can draw on an Evas canvas.</td>
+ </tr>
+ <tr>
+ <td><a href="pedometer_sd_mn.htm">Pedometer</a></td>
+ <td>Demonstrates how you can implement a simple pedometer.</td>
+ </tr>
+ <tr>
+ <td><a href="piano_sd_mn.htm">Piano</a></td>
+ <td>Demonstrates how you can implement a complex view using EFL UI components with different EDC styles.</td>
+ </tr>
+ <tr>
+ <td><a href="preference_sd_mn.htm">Preference</a></td>
+ <td>Demonstrates how you can work with custom preferences.</td>
+ </tr>
+ <tr>
+ <td><a href="scheduler_sd_mn.htm">Scheduler</a></td>
+ <td>Demonstrates how you can manage scheduling of calendar events and other calendar options.</td>
+ </tr>
+ <tr>
+ <td><a href="scroller_index_sd_mn.htm">Scroller Index</a></td>
+ <td>Demonstrates how you can implement an animated index connected with an Elm scroller component.</td>
+ </tr>
+
+ <tr>
+ <td><a href="selfcamera_sd_mn.htm">SelfCamera</a></td>
+ <td>Demonstrates how you can use the front camera in your application.</td>
+ </tr>
+ <tr>
+ <td><a href="sensorapp_sd_mn.htm">SensorApp</a></td>
+ <td>Demonstrates how you can retrieve data from various Tizen sensor types.</td>
+ </tr>
+ <tr>
+ <td><a href="simple_home_sd_mn.htm">Simple Homescreen</a></td>
+ <td>Demonstrates how you can implement a simple Homescreen-like application.</td>
+ </tr>
+ <tr>
+ <td><a href="taskmanager_sd_mn.htm">Taskmanager</a></td>
+ <td>Demonstrates how you can manage running applications as well as acquire information about them.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_components_sd_mn.htm">UI Components</a></td>
+ <td>Demonstrates how you can implement an interactive application GUI with basic Elementary UI components.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_alignment_sd_mn.htm">[UI Sample] Alignment</a></td>
+ <td>Demonstrates how you can place objects on the layout.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_animation_sd_mn.htm">[UI Sample] Animation</a></td>
+ <td>Demonstrates how you can animate an object using EDC context.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_animator_sd_mn.htm">[UI Sample] Animator</a></td>
+ <td>Demonstrates how you can display rectangles with an animation effect using EFL animator and timer functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_app_store_sd_mn.htm">[UI Sample] ApplicationStore</a></td>
+ <td>Demonstrates how you can implement an application store view with several boxes and buttons.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_box_sd_mn.htm">[UI Sample] Box</a></td>
+ <td>Demonstrates how you can display a number of rectangles using the EFL smart object.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_calculator_sd_mn.htm">[UI Sample] Calculator</a></td>
+ <td>Demonstrates how you can implement a simple calculator application with complex views.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_clock_sd_mn.htm">[UI Sample] Clock</a></td>
+ <td>Demonstrates how you can implement a clock application with different views.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecore_thread_1_sd_mn.htm">[UI Sample] Ecore Thread 1</a></td>
+ <td>Demonstrates how you can move a button using EFL thread-related functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecore_thread_2_sd_mn.htm">[UI Sample] Ecore Thread 2</a></td>
+ <td>Demonstrates how you can design threads to work together with the Ecore main loop by considering synchronization and mutual exclusion.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecore_thread_3_sd_mn.htm">[UI Sample] Ecore Thread 3</a></td>
+ <td>Demonstrates how you can design threads to work together with the Ecore main loop by considering asynchronization and mutual exclusion. </td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecore_thread_4_sd_mn.htm">[UI Sample] Ecore Thread 4</a></td>
+ <td>Demonstrates how you can move a button using EFL thread feedback functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecore_thread_5_sd_mn.htm">[UI Sample] Ecore Thread 5</a></td>
+ <td>Demonstrates how you can use the multi-thread functionality by EAPI.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_ecoreevent_sd_mn.htm">[UI Sample] EcoreEvent</a></td>
+ <td>Demonstrates how you can create an event handler using EFL Ecore event functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_edc_map_sd_mn.htm">[UI Sample] EDC Map</a></td>
+ <td>Demonstrates how you can implement 3D effects using the EDC map.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_edc_format_sd_mn.htm">[UI Sample] EDCformat</a></td>
+ <td>Demonstrates how you can organize and use the EDC.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_elmtransit_sd_mn.htm">[UI Sample] Elm Transit</a></td>
+ <td>Demonstrates how you can add the translation and rotation effect on the Evas object.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_email_sd_mn.htm">[UI Sample] Email</a></td>
+ <td>Demonstrates how you can implement a complex email application view.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_evas_map_sd_mn.htm">[UI Sample] Evas Map</a></td>
+ <td>Demonstrates how you can display a rectangle and an image which are applied by the Evas map using EFL Evas map util functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_evas_map_mapping_sd_mn.htm">[UI Sample] Evas Map Mapping</a></td>
+ <td>Demonstrates how you can apply UV mapping to an Evas object (button) by using EFL Evas map util functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_evas_map_rotation_sd_mn.htm">[UI Sample] Evas Map Rotation</a></td>
+ <td>Demonstrates how you can rotate a button in 3D using EFL map functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_evasevent_sd_mn.htm">[UI Sample] Evas Event</a></td>
+ <td>Demonstrates how you can register a callback function on Evas or an Evas object for a specific event.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_gallery_sd_mn.htm">[UI Sample] Gallery</a></td>
+ <td>Demonstrates how you can implement a gallery view to display images.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_idler_sd_mn.htm">[UI Sample] Idler</a></td>
+ <td>Demonstrates how you can operate the idler functionality in Ecore.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_image_sd_mn.htm">[UI Sample] Image</a></td>
+ <td>Demonstrates how you can display an image on the canvas using EFL image object functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_inlist_sd_mn.htm">[UI Sample] InList</a></td>
+ <td>Demonstrates how you can manage inline lists using EFL InList functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_job_sd_mn.htm">[UI Sample] Job</a></td>
+ <td>Demonstrates how you can add and delete an <span style="font-family: Courier New,Courier,monospace">Ecore_Job</span>, and show how they always execute in the added order.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_language_change_sd_mn.htm">[UI Sample] LanguageChange</a></td>
+ <td>Demonstrates how you can implement an application that supports multiple languages and language change at runtime.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_layout_samples_sd_mn.htm">[UI Sample] LayoutSample</a></td>
+ <td>Demonstrates how you can implement a common layout for your application.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_layout_signal_sd_mn.htm">[UI Sample] LayoutSignal</a></td>
+ <td>Demonstrates how you can implement an instant messaging application through EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_list_sd_mn.htm">[UI Sample] List</a></td>
+ <td>Demonstrates how you can use double-linked list data structure using EFL list functions.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_message_bubble_sd_mn.htm">[UI Sample] MessageBubble</a></td>
+ <td>Demonstrates how you can manage communication between Edje code and C code through EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_proxy_object_sd_mn.htm">[UI Sample] Proxy Object</a></td>
+ <td>Demonstrates how you can make a proxy object for an Evas object.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_rectangle_sd_mn.htm">[UI Sample] Rectangle</a></td>
+ <td>Demonstrates how you can display a rectangle on the canvas using EFL Evas object functions and how to move and resize the rectangle. </td>
+ </tr>
+ <tr>
+ <td><a href="ui_relative_sd_mn.htm">[UI Sample] RelativePositioning</a></td>
+ <td>Demonstrates how you can place an object on the basis of another object.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_sns_sd_mn.htm">[UI Sample] SNS</a></td>
+ <td>Demonstrates how you can implement a scrollable view with tables and buttons through EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_setting_sd_mn.htm">[UI Sample] Setting</a></td>
+ <td>Demonstrates how you can implement a Settings application with pop-up menus and different views through EFL UI components and containers. </td>
+ </tr>
+ <tr>
+ <td><a href="ui_stringshare_sd_mn.htm">[UI Sample] StringShare</a></td>
+ <td>Demonstrates how you can store a string and use it in multiple places throughout a program.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_theme_extension_sd_mn.htm">[UI Sample] ThemeExtension</a></td>
+ <td>Demonstrates how you can modify the look and feel of your application with custom themes and styles.</td>
+ </tr>
+ <tr>
+ <td><a href="ui_timer_sd_mn.htm">[UI Sample] Timer</a></td>
+ <td>Demonstrates how you can use Ecore timer and adjust the specific timers in the timer list.</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>SelfCamera Sample Overview</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"/></p>
+ </div>
+
+<h1>SelfCamera Sample Overview</h1>
+
+<p>The SelfCamera sample application demonstrates how you can use the front camera in your application.</p>
+<p>The following figure illustrates the main view of the SelfCamera application in its normal state and the countdown state.</p>
+
+<p class="figure">Figure: SelfCamera main view</p>
+<p align="center"><img alt="SelfCamera main screen" src="../images/selfcamera_start.png" /></p>
+
+<h2>Implementation</h2>
+
+<p>To use the camera:</p>
+<ol>
+<li>Add required privileges.
+<p>To use the camera, the application has to request permission by adding the corresponding privileges to the <span style="font-family: Courier New,Courier,monospace;">tizen-manifest.xml</span> file. In this case, the <span style="font-family: Courier New,Courier,monospace;">appmanager.launch</span> privilege is also added to allow the launch of other applications, such as the gallery.</p>
+
+<pre class="prettyprint">
+<privileges>
+ <privilege>http://tizen.org/privilege/camera</privilege>
+ <privilege>http://tizen.org/privilege/appmanager.launch</privilege>
+</privileges>
+</pre>
+<p>This can also be done using the Tizen Manifest Editor.</p>
+</li>
+
+<li>Create the layout for the camera preview.
+<p>The <span style="font-family: Courier New,Courier,monospace;">main_view_add()</span> function creates the main layout of the SelfCamera application and adds the <span style="font-family: Courier New,Courier,monospace;">evas_object_image</span> for displaying the camera preview.</p>
+
+<pre class="prettyprint">
+Evas_Object * main_view_add(Evas_Object *navi)
+{
+ ...
+ // SELF_CAMERA_LAYOUT refers to "edje/self-camera.edj"
+ elm_layout_file_set(view->layout, get_resource_path(SELF_CAMERA_LAYOUT), "layout");
+ // Signal for default timer option to be selected
+ elm_object_signal_emit(view->layout, "mouse,clicked,1", "timer_2");
+ view->preview_canvas = evas_object_image_filled_add(evas_object_evas_get(view->layout));
+
+ ...
+ // view->preview_canvas is placed at "elm.swallow.content"
+ elm_object_part_content_set(view->layout, "elm.swallow.content", view->preview_canvas);
+ view->camera_enabled = _main_view_start_preview(view);
+
+ ...
+ _main_view_thumbnail_load(view);
+ _main_view_register_cbs(view);
+
+ ...
+ return view->layout;
+}
+</pre>
+</li>
+
+<li>Initialize the camera and start the preview.
+<p>The <span style="font-family: Courier New,Courier,monospace;">_main_view_start_preview()</span> function creates the camera handle and sets the parameters for the camera preview. It assigns a previously created image to be displayed in the camera preview and then starts the preview.</p>
+
+<pre class="prettyprint">
+static Eina_Bool _main_view_start_preview(main_view *view)
+{
+ // Create camera handle for front camera (CAMERA_DEVICE_CAMERA1)
+ int result = camera_create(CAMERA_DEVICE_CAMERA1, &view->camera);
+ if (CAMERA_ERROR_NONE == result)
+ {
+ if (view->preview_canvas)
+ {
+ // Set image to be used for displaying camera preview
+ result = camera_set_display(view->camera, CAMERA_DISPLAY_TYPE_EVAS, GET_DISPLAY(view->preview_canvas));
+ if (CAMERA_ERROR_NONE == result)
+ {
+ // Set preview display size
+ camera_set_display_mode(view->camera, CAMERA_DISPLAY_MODE_ORIGIN_SIZE);
+ // Set preview display rotation
+ camera_set_display_rotation(view->camera, CAMERA_ROTATION_180);
+ // Set preview display flip
+ camera_set_display_flip(view->camera, CAMERA_FLIP_VERTICAL);
+
+ // Start camera preview
+ result = camera_start_preview(view->camera);
+ if (CAMERA_ERROR_NONE == result)
+ {
+ // Show preview display
+ camera_set_display_visible(view->camera, true);
+ // Start camera auto-focusing
+ camera_start_focusing(view->camera, TRUE);
+ }
+ }
+ }
+ }
+ return !result;
+}
+</pre>
+</li>
+
+<li>Start the camera capture.
+<p>When the countdown reaches 0, the <span style="font-family: Courier New,Courier,monospace;">_main_view_timer_cb()</span> timer callback starts camera capture using a shot, which the <span style="font-family: Courier New,Courier,monospace;">camera_start_capture()</span> function called. This function changes the camera state from <span style="font-family: Courier New,Courier,monospace;">CAMERA_STATE_CAPTURING</span> to <span style="font-family: Courier New,Courier,monospace;">CAMERA_STATE_CAPTURED</span> automatically and the corresponding callback functions, <span style="font-family: Courier New,Courier,monospace;">_main_view_capture_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">_main_view_capture_completed_cb()</span> are invoked.</p>
+
+<pre class="prettyprint">
+static Eina_Bool _main_view_timer_cb(void *data)
+{
+ ...
+ view->timer_count = view->timer_count - 1;
+ if (view->timer_count > 0)
+ {
+ ...
+ return ECORE_CALLBACK_RENEW;
+ }
+ else
+ {
+ _main_view_stop_timer(view);
+ if (view->camera_enabled)
+ {
+ camera_start_capture(view->camera, _main_view_capture_cb, _main_view_capture_completed_cb, view);
+ }
+ ...
+ return ECORE_CALLBACK_CANCEL;
+ }
+}
+</pre>
+</li>
+
+<li>Save the captured image.
+<p>The captured image is delivered to the <span style="font-family: Courier New,Courier,monospace;">_main_view_capture_cb()</span> function, which saves it into the file.</p>
+
+<pre class="prettyprint">
+static void _main_view_capture_cb(camera_image_data_s *image, camera_image_data_s *postview, camera_image_data_s *thumbnail, void *user_data)
+{
+ ...
+ if (image->format == CAMERA_PIXEL_FORMAT_JPEG)
+ {
+ char filename[PATH_MAX] = { '\0' };
+ size_t size = _main_view_get_file_path(filename, sizeof(filename));
+ DBG("%s", filename);
+ RETM_IF(0 == size, "_main_view_get_filename() failed");
+
+ FILE *file = fopen(filename, "w+");
+ RETM_IF(!file, "fopen() failed");
+
+ size = fwrite(image->data, image->size, 1, file);
+ WARN_IF(size != 1, "fwrite() failed");
+
+ fclose(file);
+ _main_view_thumbnail_set(view, filename);
+ }
+}
+</pre>
+</li>
+
+<li>Restart the camera preview.
+<p>The <span style="font-family: Courier New,Courier,monospace;">_main_view_capture_completed_cb()</span> callback is called when camera capture is complete. It restarts the camera preview using the <span style="font-family: Courier New,Courier,monospace;">camera_start_preview()</span> function.</p>
+
+<pre class="prettyprint">
+static void _main_view_capture_completed_cb(void *data)
+{
+ ...
+ camera_start_preview(view->camera);
+}
+</pre>
+</li>
+
+<li>Stop the camera preview and destroy the handle.
+<p>The camera preview can be stopped using the <span style="font-family: Courier New,Courier,monospace;">camera_stop_preview()</span> function. The camera handle must be destroyed using the <span style="font-family: Courier New,Courier,monospace;">camera_destroy()</span> function.</p>
+
+<pre class="prettyprint">
+static void _main_view_destroy(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ main_view *view = data;
+ camera_stop_preview(view->camera);
+ camera_destroy(view->camera);
+ free(data);
+}
+</pre>
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>SensorApp Sample Overview</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"/></p>
+ </div>
+
+<h1>SensorApp Sample Overview</h1>
+
+<p>The SensorApp sample application demonstrates how you can retrieve data from various Tizen sensor types, such as acceleration, device orientation, and gravity sensors, using the Tizen Sensor API.</p>
+
+<p>The following figures illustrate the main screens of the SensorApp.</p>
+
+<p class="figure">Figure: SensorApp main screens</p>
+<p align="center"><img alt="Sensor List view" src="../images/sensorapp_list.png" /> <img alt="Sensor Data view with a vector chart" src="../images/sensorapp_vectorchart.png" /> <img alt="Sensor Data view with pie charts" src="../images/sensorapp_piecharts.png" /></p>
+
+
+<h2>Source Files</h2>
+
+<table>
+<caption>Table: Source Files</caption>
+ <colgroup>
+ <col width="25%" />
+ <col width="75%" />
+ </colgroup>
+<tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="2"> <p><strong>General</strong></p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">main.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p>Provides an entry point to SensorApp. Creates and launches the application instance.</p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">main-app.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Manages the application life-cycle. Creates the application main window, naviframe, and sensor list view. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="2"> <p><strong>Utils</strong></p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">logger.h</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Provides convenient macros for writing log messages. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">color-utils.h</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Provides convenient macros for colors stored in integer. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="2"> <p><strong>Model</strong></p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-info.h</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Defines data types describing various sensors. </p> </td>
+ </tr><tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-list.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Defines the sensor list provided by SensorApp. </p> </td>
+ </tr><tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-magnetic.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Defines the magnetic sensor strength calculation algorithm. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="2"> <p><strong>View</strong></p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">window.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Provides the application main window with a background and conformant. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-list-view.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Provides the sensor list view. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-data-view.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Provides the sensor data view for displaying data retrieved from sensors and their graphical representation. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-data-chart.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Defines basic chart drawing functionality. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-data-chart-private.h</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Defines data chart private members for use in vector and angle charts. </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-vector-chart.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Draws a vector chart for representing vector values using arrows (for X and Y and a circle (for Z). </p> </td>
+ </tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p><span style="font-family: Courier New,Courier,monospace;">sensor-angle-chart.c</span></p> </td>
+ <td rowspan="1" colspan="1"> <p> Draws pie charts for representing angle values. </p> </td>
+ </tr>
+
+</tbody>
+</table>
+
+<h2>Implementation</h2>
+<p>To implement the SensorApp:</p>
+<ol>
+<li>Include the Sensor API:
+
+<pre class="prettyprint">
+#include <sensor.h>
+</pre>
+</li>
+
+<li>Retrieve the sensor handle and hardware information.
+<p>The <span style="font-family: Courier New,Courier,monospace;">sensor_list_init()</span> function in the <span style="font-family: Courier New,Courier,monospace;">sensor-list.c</span> file retrieves the sensor handle and hardware information and stores them in the <span style="font-family: Courier New,Courier,monospace;">sensor_info</span> array. The retrieved information, such as sensor range and resolution, is later used to display the sensor data properly.</p>
+
+<pre class="prettyprint">
+void sensor_list_init()
+{
+ sensor_info *info = sensors;
+ sensor_info *end = info + sensor_count;
+ for (; info != end; ++info)
+ {
+ float resolution = 1.0;
+ // Retrieve sensor handle using sensor type
+ sensor_get_default_sensor(info->type, &info->sensor);
+ // Retrieve sensor minimal and maximal values
+ sensor_get_min_range(info->sensor, &info->value_min);
+ sensor_get_max_range(info->sensor, &info->value_max);
+ // Retrieve sensor resolution
+ sensor_get_resolution(info->sensor, &resolution);
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;"><sensor-info.h></span> header file defines a structure for storing information about the sensor that is used to display the sensor list and sensor data.</p>
+
+<pre class="prettyprint">
+struct _sensor_info
+{
+ sensor_h sensor; // Sensor handle
+ sensor_type_e type; // Sensor type
+ sensor_unit_e units; // Value measurement units
+
+ const char *name; // Sensor display name
+ const char **value_names; // Value names array of value_count size
+ int value_count; // Values count
+
+ float value_min; // Minimal value
+ float value_max; // Maximal value
+};
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">sensor-list.c</span> file defines the sensor list array for storing information about each sensor.</p>
+
+<pre class="prettyprint">
+static sensor_info sensors[] =
+{
+ {
+ .type = SENSOR_ACCELEROMETER,
+ .units = SENSOR_UNIT_METRE_PER_SECOND_SQUARED,
+ .name = "Acceleration",
+ .value_names = axes,
+ .value_count = 3,
+ .axes = { -1, 1, 1 }
+ },
+}
+</pre>
+</li>
+
+<li>Check sensor availability.
+<p>The <span style="font-family: Courier New,Courier,monospace;">sensor-list-view.c</span> file creates and fills <span style="font-family: Courier New,Courier,monospace;">elm_list</span> using the sensor list provided by the <span style="font-family: Courier New,Courier,monospace;">sensor-list.c</span> file. While filling the sensor list, the <span style="font-family: Courier New,Courier,monospace;">_list_view_fill()</span> function checks whether each sensor in the list is available on the device using the <span style="font-family: Courier New,Courier,monospace;">sensor_is_supported()</span> function.</p>
+
+<pre class="prettyprint">
+static void _list_view_fill(list_view *view)
+{
+ unsigned count = 0;
+ const sensor_info *item = sensor_list_get(&count);
+ const sensor_info *end = item + count;
+
+ RETM_IF(!item, "item is NULL");
+ for (; item != end; ++item)
+ {
+ bool is_supported = false;
+ // Check whether sensor is supported by device
+ sensor_is_supported(item->type, &is_supported);
+ if (is_supported)
+ {
+ elm_list_item_append(view->list, item->name, NULL, NULL, _list_view_sel_cb, item);
+ }
+ }
+}
+</pre>
+
+<p>When a sensor is selected, the <span style="font-family: Courier New,Courier,monospace;">_list_view_sel_cb()</span> function navigates to the sensor data view passing the selected sensor information.</p>
+
+<pre class="prettyprint">
+static void _list_view_sel_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ sensor_info *item = data;
+
+ sensor_data_view_create(view->navi, item);
+}
+</pre>
+</li>
+
+<li>Receive sensor data.
+<p>To start receiving sensor data, the <span style="font-family: Courier New,Courier,monospace;">_data_view_sensor_start()</span> function registers a sensor listener, sets the sensor event callback, and starts the sensor.</p>
+
+<pre class="prettyprint">
+static void _data_view_sensor_start(data_view *view)
+{
+ sensor_error_e err = SENSOR_ERROR_NONE;
+ err = sensor_create_listener(view->sensor_info->sensor, &view->sensor_listener);
+ RETM_IF(err != SENSOR_ERROR_NONE, "sensor_create_listener() failed(%d)", err);
+ sensor_listener_set_event_cb(view->sensor_listener, SENSOR_INTERVAL, _data_view_sensor_cb, view);
+ sensor_listener_start(view->sensor_listener);
+}
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace;">_data_view_sensor_cb()</span> sensor event callback is called, the <span style="font-family: Courier New,Courier,monospace;">_data_view_value_items_update()</span> function displays the received sensor data in genlist items and updates the chart, if necessary.</p>
+
+<pre class="prettyprint">
+static void _data_view_sensor_cb(sensor_h sensor, sensor_event_s *sensor_data, void *user_data)
+{
+ data_view *view = user_data;
+
+ _data_view_value_items_update(view, sensor_data->values);
+ _data_view_extra_items_update(view, sensor_data->values);
+}
+
+static void _data_view_value_items_update(data_view *view, float *values)
+{
+ bool update_chart = false;
+
+ // Update genlist items with values received from the sensor
+ for (; item != end; ++item, ++value)
+ {
+ if (item->value != *value)
+ {
+ // Chart MUST be updated if any value has changed
+ update_chart = true;
+ item->value = *value;
+ // Update genlist item part that displays value
+ elm_genlist_item_fields_update(item->obj_item, PART_VALUE, ELM_GENLIST_ITEM_FIELD_TEXT);
+ }
+ }
+
+ // Update chart if necessary
+ if (view->chart && update_chart)
+ {
+ sensor_data_chart_update(view->chart, view->sensor_info->value_range,
+ view->sensor_info->axes, values, data_view_item_colors,
+ view->sensor_info->value_count);
+ }
+}
+</pre>
+</li>
+
+<li>Stop the sensor.
+<p>To stop receiving sensor data when the sensor data view is destroyed, the <span style="font-family: Courier New,Courier,monospace;">_data_view_destroy_cb()</span> function calls the <span style="font-family: Courier New,Courier,monospace;">sensor_listener_stop()</span> function and then destroys the listener using the <span style="font-family: Courier New,Courier,monospace;">sensor_destroy_listener()</span> function.</p>
+
+<pre class="prettyprint">
+static void _data_view_destroy_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ sensor_listener_stop(view->sensor_listener);
+ sensor_destroy_listener(view->sensor_listener);
+}
+</pre>
+
+</li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>Simple Homescreen Sample Overview</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"/></p>
+ </div>
+
+ <h1>Simple Homescreen Sample Overview</h1>
+
+ <p>The Simple Homescreen sample application demonstrates how to implement a Homescreen-like application using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a> API.</p>
+ <p>The following figure illustrates the application views.</p>
+ <p class="figure">Figure: Simple Homescreen screens</p>
+ <p align="center"><img alt="Main view" src="../images/simple_home_main_view_sd.png" /> <img alt="App info displayed" src="../images/simple_home_app_info_view_sd.png" /> <img alt="Icon rearrangement" src="../images/simple_home_icons_rearrangement_sd.png" /></p>
+
+ <p>The application displays a list of all applications that are installed on the device and available for the end user
+ (the <span style="font-family: Courier New,Courier,monospace">nodisplay</span> flag is set to <span style="font-family: Courier New,Courier,monospace">false</span> in the applications' <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> files).</p>
+
+ <p>The main window contains an application grid, horizontally scrollable, where appropriate icons are displayed. The application scans all installed packages looking for displayable ones (those that can be displayed to the end user). </p>
+ <p>You can:</p>
+ <ul>
+ <li>Tap on application icon to see a pop-up window with the following information:</li>
+ <ul>
+ <li>Simplified application name (typically displayed below the icon on the home screen)</li>
+ <li>Full path to the application icon resource image</li>
+ <li>Package name of the application</li>
+ </ul>
+ <li>Drag and drop the application icon to rearrange the icon position within the Simple Homescreen application</li>
+ </ul>
+
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">_on_create_cb()</span> callback function initializes the application model and user interface:</p>
+
+<pre class="prettyprint">
+static bool _on_create_cb(void *user_data)
+{
+ app_data *ad = user_data;
+ RETVM_IF(!ad, false, "ad is NULL");
+
+ elm_app_base_scale_set(1.8);
+
+ ad->win = win_create();
+ RETVM_IF(!ad->win, false, "win is NULL");
+
+ Evas_Object *content = main_view_add(ad, ad->win->conform);
+ RETVM_IF(!content, false, "content is NULL");
+
+ win_set_content(ad->win, content);
+
+ return true;
+}
+</pre>
+
+<p>The following figure illustrates the structure of application base view.</p>
+<p class="figure">Figure: Simple Homescreen base view</p>
+<p align="center"><img alt="Simple Homescreen base view" src="../images/simple_home_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">win_create()</span> function creates a window which consists of an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>) and a background.</p>
+<pre class="prettyprint">
+window_obj *win_create()
+{
+ window_obj *obj = calloc(1, sizeof(window_obj));
+ if (!obj)
+ {
+ return NULL;
+ }
+
+ obj->win = elm_win_util_standard_add(APP_NAME, APP_NAME);
+ elm_win_autodel_set(obj->win, EINA_TRUE);
+ elm_win_conformant_set(obj->win, EINA_TRUE);
+ evas_object_size_hint_weight_set(obj->win, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_indicator_mode_set(obj->win, ELM_WIN_INDICATOR_SHOW);
+ evas_object_show(obj->win);
+
+ obj->conform = elm_conformant_add(obj->win);
+ evas_object_size_hint_weight_set(obj->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(obj->win, obj->conform);
+ evas_object_show(obj->conform);
+
+ obj->bg = elm_bg_add(obj->conform);
+ evas_object_size_hint_weight_set(obj->bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(obj->bg);
+
+ elm_object_part_content_set(obj->conform, "elm.swallow.bg", obj->bg);
+
+ return obj;
+}
+</pre>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">main_view_add()</span> function creates the main view gengrid, gets all applications from the model, and pushes the application icons into the gengrid. This function also registers a callback for the back key click.</p>
+<pre class="prettyprint">
+Evas_Object *main_view_add(app_data *app, Evas_Object *parent)
+{
+ RETVM_IF(!app || !parent, NULL, "Passed NULL input data");
+
+ main_view_data *data = calloc(1, sizeof(main_view_data));
+ data->win = app->win;
+ app->main_view_data = data;
+
+ data->gengrid = gengrid_create(data->win->win);
+
+ data->app_list = app_manager_all_apps_get();
+ Eina_List *it = NULL;
+ app_info_h *app_info = NULL;
+ EINA_LIST_FOREACH(data->app_list, it, app_info)
+ {
+ gengrid_item_append(data->gengrid, app_info);
+ }
+
+ eext_object_event_callback_add(data->gengrid, EEXT_CALLBACK_BACK, _main_view_hardware_buttons_cb, data);
+
+ return data->gengrid;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">app_manager_all_apps_get()</span> function iterates over all the installed applications using the <span style="font-family: Courier New,Courier,monospace">app_manager_foreach_app_info()</span> function. The <span style="font-family: Courier New,Courier,monospace">_app_manager_app_info_cb()</span> clones each application context handle and pushes them to the list.</p>
+<pre class="prettyprint">
+bool _app_manager_app_info_cb(app_info_h app_info, void *user_data)
+{
+ bool nodisplay;
+ _app_is_success(app_info_is_nodisplay(app_info, &nodisplay));
+ if (!nodisplay)
+ {
+ Eina_List **app_list = user_data;
+ app_info_h *clone = malloc(sizeof(app_info_h));
+ _app_is_success(app_info_clone(clone, app_info));
+ *app_list = eina_list_append(*app_list, clone);
+ }
+
+ return true;
+}
+
+Eina_List *app_manager_all_apps_get()
+{
+ Eina_List *app_list = NULL;
+ app_manager_foreach_app_info(_app_manager_app_info_cb, &app_list);
+
+ return app_list;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">gengrid_create()</span> function creates a gengrid using the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_add()</span> function.</p>
+<p>The gengrid item size is set to predefined values with the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_size_set()</span> function. In order to allow the item position rearrangement by drag and drop, the reorder mode is set using the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_reorder_mode_set()</span> function. </p>
+
+<pre class="prettyprint">
+Evas_Object *gengrid_create(Evas_Object *parent)
+{
+ RETVM_IF(!parent, NULL, "Passed NULL parent data");
+
+ if (!itc)
+ {
+ _gengrid_item_class_initialize();
+ }
+
+ Evas_Object *gengrid = elm_gengrid_add(parent);
+ elm_gengrid_item_size_set(gengrid, ELM_SCALE_SIZE(GENGRID_ITEM_WIDTH), ELM_SCALE_SIZE(GENGRID_ITEM_HEIGHT));
+ elm_gengrid_reorder_mode_set(gengrid, EINA_TRUE);
+ elm_gengrid_horizontal_set(gengrid, EINA_TRUE);
+
+ evas_object_size_hint_weight_set(gengrid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(gengrid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ return gengrid;
+}
+</pre>
+<p>Each item is appended using the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_append()</span> function. The function takes 5 parameters:</p>
+<ul>
+ <li>Gengrid object to which an item is appended</li>
+ <li>Item class</li>
+ <li>Item data</li>
+ <li>Function to be called when the item is selected</li>
+ <li>Additional data to be passed to the function</li>
+</ul>
+<pre class="prettyprint">
+Elm_Object_Item *gengrid_item_append(Evas_Object *gengrid, app_info_h *app_info)
+{
+ RETVM_IF(!gengrid || !app_info, NULL, "Passed NULL input data");
+
+ if (!itc)
+ {
+ _gengrid_item_class_initialize();
+ }
+
+ Elm_Object_Item *item = elm_gengrid_item_append(gengrid, itc, app_info, _gengrid_item_selected, app_info);
+
+ return item;
+}
+</pre>
+
+<p>The gengrid item class defines an item style as well as callbacks to be used at retrieving item attributes (text, content, or state). The class is used when an item is added to a gengrid. The gengrid item class used in this application is initialized in the <span style="font-family: Courier New,Courier,monospace">_gengrid_item_class_initialize()</span> function. The item style is set to default. Items in the gengrid consist only of an icon, so the <span style="font-family: Courier New,Courier,monospace">text_get</span> callback and <span style="font-family: Courier New,Courier,monospace">state_get</span> callbacks are set to <span style="font-family: Courier New,Courier,monospace">NULL</span> as they are not used.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">_grid_content_get()</span> function is the <span style="font-family: Courier New,Courier,monospace">content_get</span> callback invoked when an item is added, returning an icon of the given application. For the default gengrid item theme used in the application, each item has 2 content parts: "elm.swallow.icon" and "elm.swallow.end". Only "elm.swallow.icon" is used here, but the <span style="font-family: Courier New,Courier,monospace">content_get</span> callback is used to retrieve content for both parts. For that reason, a part name check is needed before the icon image is created and returned as the icon content.</p>
+<pre class="prettyprint">
+Evas_Object *_grid_content_get(void *data, Evas_Object *obj, const char *part)
+{
+ if (!strcmp(part, "elm.swallow.icon"))
+ {
+ Evas_Object *image = elm_image_add(obj);
+ app_info_h *app_info = (app_info_h*)data;
+ char *icon;
+ app_info_get_icon(*app_info, &icon);
+ if (!elm_image_file_set(image, icon, NULL))
+ {
+ evas_object_del(image);
+ Evas_Object *bg = elm_bg_add(obj);
+ elm_bg_color_set(bg, 255, 255, 0);
+
+ return bg;
+ }
+ return image;
+ }
+ return NULL;
+}
+
+void _gengrid_item_class_initialize()
+{
+ itc = elm_gengrid_item_class_new();
+ itc->item_style = "default";
+ itc->func.text_get = NULL;
+ itc->func.content_get = _grid_content_get;
+ itc->func.state_get = NULL;
+ itc->func.del = NULL;
+}
+</pre>
+
+<p>When an item is selected, a pop-up is created to display the selected application's data.</p>
+<pre class="prettyprint">
+void _gengrid_item_selected(void *data, Evas_Object *obj, void *event_info)
+{
+ popup_create(obj, (app_info_h*)data);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">popup_create()</span> function takes <span style="font-family: Courier New,Courier,monospace">app_info_h</span> as a parameter, which is then used to acquire the application label, icon, and package name. The label is set as the pop-up title (the <span style="font-family: Courier New,Courier,monospace">"title,text"</span> part) whereas the remaining data is set as its content (the <span style="font-family: Courier New,Courier,monospace">"default"</span> part). The <span style="font-family: Courier New,Courier,monospace">elm_popup_timeout_set()</span> function sets a timeout to hide the pop-up automatically after <span style="font-family: Courier New,Courier,monospace">POPUP_TIMEOUT</span> (5) seconds.</p>
+<p>A callback on the <span style="font-family: Courier New,Courier,monospace">"block,clicked"</span> event is set for the pop-up so that it is deleted after the user clicks outside its area.</p>
+<pre class="prettyprint">
+void popup_create(Evas_Object *parent, app_info_h *app_info)
+{
+ RETM_IF(!parent || !app_info, "Passed NULL input data");
+
+ Evas_Object *popup = elm_popup_add(parent);
+
+ char *label;
+ char *icon;
+ char *package;
+ app_label_get(app_info, &label);
+ app_icon_get(app_info, &icon);
+ app_package_get(app_info, &package);
+
+ elm_object_part_text_set(popup, "title,text", label);
+ char info[BUF_SIZE];
+ snprintf(info, BUF_SIZE, "Icon path:<br>%s<br><br>Package:<br>%s", icon, package);
+
+ elm_object_part_text_set(popup, "default", info);
+
+ free(label);
+ free(icon);
+ free(package);
+
+ evas_object_smart_callback_add(popup, "block,clicked", _block_clicked, NULL);
+ elm_popup_timeout_set(popup, 5.0);
+
+ evas_object_show(popup);
+}
+
+static void _block_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+ evas_object_del(obj);
+}
+</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
--- /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>Taskmanager Sample Overview</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"/></p>
+ </div>
+
+ <h1>Taskmanager Sample Overview</h1>
+<p>The Taskmanager sample demonstrates how to retrieve installed application information using the <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__MANAGER__MODULE.html">Application Manager</a> API. You can filter the information, and resume or terminate applications running in the background. The Taskmanager displays all running applications (except itself) in a genlist. You can tap an item to resume the application, or swipe left or right to terminate it and remove it from the genlist.</p>
+
+ <p class="figure">Figure: Taskmanager screen</p>
+ <p align="center"><img alt="Taskmanager default screen" src="../images/taskmanager_default.png" /> <img alt="Taskmanager swipe screen" src="../images/taskmanager_swipe.png" /> <img alt="Taskmanager after swipe screen" src="../images/taskmanager_after_swipe.png" /></p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privileges must be specified:</p>
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/packagemanager.info</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.kill.bgapp</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/appmanager.launch</span></li>
+ </ul>
+
+<h2>Implementation</h2>
+<h3>Application Manager Module</h3>
+
+<p>The application manager module allows you to iterate through all installed applications to retrieve their data. The Taskmanager, however, only needs information about applications that are both running and displayable. Instead of checking the <span style="font-family: Courier New,Courier,monospace">nodisplay</span> flag of each installed application, you can set up a filter that automatically retrieves applications of a specified type only:</p>
+
+<ol><li>
+<p>Create the filter using the <span style="font-family: Courier New,Courier,monospace">app_info_filter_create()</span> function.</p>
+<p>To specify the filter, call the <span style="font-family: Courier New,Courier,monospace">app_info_filter_add_bool()</span> function to add a boolean filter property to a given filter handle. In this sample, the <span style="font-family: Courier New,Courier,monospace">PACKAGE_INFO_PROP_APP_NODISPLAY</span> property is set to <span style="font-family: Courier New,Courier,monospace">false</span>. It filters out all applications that have the <span style="font-family: Courier New,Courier,monospace">nodisplay</span> property set to <span style="font-family: Courier New,Courier,monospace">true</span> and leaves only those that are displayable.</p>
+
+<pre class="prettyprint">
+if (app_info_filter_create(&appmgr_data.app_info_filter) != APP_MANAGER_ERROR_NONE)
+{
+ // Error handling
+}
+
+if (app_info_filter_add_bool(appmgr_data.app_info_filter, PACKAGE_INFO_PROP_APP_NODISPLAY, false) != APP_MANAGER_ERROR_NONE)
+{
+ // Error handling
+}
+</pre></li>
+
+<li>
+<p>Use the filter to execute the supplied callback function (<span style="font-family: Courier New,Courier,monospace">__app_info_cb()</span>) for each application that satisfies the filter condition using the <span style="font-family: Courier New,Courier,monospace">app_info_filter_foreach_appinfo()</span> function. The function takes the filter handle, callback function, and user defined data as parameters.</p>
+
+<pre class="prettyprint">
+if (app_info_filter_foreach_appinfo(appmgr_data.app_info_filter, __app_info_cb, NULL) != APP_MANAGER_ERROR_NONE)
+{
+ // Error handling
+}
+</pre></li>
+
+<li>
+<p>The callback function retrieves the application data. Its first parameter (<span style="font-family: Courier New,Courier,monospace">app_info</span>) is used to retrieve various information with the following functions:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">app_info_get_app_id()</span>: Get the application ID</li>
+ <li><span style="font-family: Courier New,Courier,monospace">app_info_get_icon()</span>: Get the application icon path</li>
+ <li><span style="font-family: Courier New,Courier,monospace">app_manager_is_running()</span>: Get the running state of the application (the Taskmanager only displays running applications)</li>
+</ul>
+<p>If the application is running and its ID does not match the Taskmanager ID, it is saved in the application list. The Taskmanager ID was retrieved earlier using the <span style="font-family: Courier New,Courier,monospace">app_get_id()</span> function from the Tizen <a href="../../../org.tizen.native.mobile.apireference/group__CAPI__APP__COMMON__MODULE.html">App Common</a> API.</p>
+
+<pre class="prettyprint">
+static bool
+__app_info_cb(app_info_h app_info, void *user_data)
+{
+ // Variable declaration and initialization
+
+ if (app_info_get_app_id(app_info, &app_id) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_info_get_icon(app_info, &app_icon) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_manager_is_running(app_id, &running) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (running && __compare_strings(app_id, appmgr_data.taskmgr_id))
+ {
+ new_item = item_create(app_id, app_icon);
+ if (!new_item)
+ {
+ // Error handling
+ }
+
+ appmgr_data.apps_list = eina_list_append(appmgr_data.apps_list, new_item);
+ }
+
+ return true;
+}
+
+static int
+__compare_strings(char *app_id1, char *app_id2)
+{
+ int ret = strncmp(app_id1, app_id2, ITEM_APP_ID_STR_MAX_LENGTH);
+
+ if (strlen(app_id1) == strlen(app_id2) && !ret)
+ {
+ return 0;
+ }
+ else
+ {
+ return ret > 0 ? 1 : -1;
+ }
+}
+</pre></li>
+
+<li><p>After all applications with the <span style="font-family: Courier New,Courier,monospace">nodisplay</span> flag set to <span style="font-family: Courier New,Courier,monospace">false</span> has been checked, the application list is sorted using the <span style="font-family: Courier New,Courier,monospace">eina_list_sort()</span> function:</p>
+
+<p>The function takes the <span style="font-family: Courier New,Courier,monospace">Eina_List</span> component as the first parameter. The second parameter defines the maximum number of list elements to sort. If it is set to 0, all elements are sorted. The last parameter is a pointer to a function that handles list data comparisons. It compares <span style="font-family: Courier New,Courier,monospace">data1</span> and <span style="font-family: Courier New,Courier,monospace">data2</span>, and returns 0 if they are equal, -1 if the first data is smaller, and 1 if it is bigger.</p>
+
+<pre class="prettyprint">
+appmgr_data.apps_list = eina_list_sort(appmgr_data.apps_list, 0, __compare_items_cb);
+
+static int
+__compare_items_cb(const void *data1, const void *data2)
+{
+ app_item_t *item1 = NULL;
+ app_item_t *item2 = NULL;
+
+ if (!data1 || !data2)
+ {
+ // Error handling
+ }
+
+ item1 = (app_item_t *)data1;
+ item2 = (app_item_t *)data2;
+
+ return __compare_strings(item1->app_id, item2->app_id);
+}
+</pre>
+
+<p>After all comparisons are done, the sorted list is returned to be handled by the view module.</p></li></ol>
+
+<p>Apart from retrieving application data, the Taskmanager also enables the user to resume or terminate an application running in the background:</p>
+
+<ol><li>Before the resume or terminate actions can be performed, the application context must be acquired using the <span style="font-family: Courier New,Courier,monospace">app_manager_get_app_context()</span> function with the application ID as a parameter. </li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">app_manager_resume_app()</span> and <span style="font-family: Courier New,Courier,monospace">app_manager_request_terminate_bg_app()</span> functions cto resume or terminate the application.
+<p>Both functions take the application context as a parameter.</p></li>
+<li>After the context is no longer needed, destroy it using the <span style="font-family: Courier New,Courier,monospace">app_context_destroy()</span> function.</li></ol>
+
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace">application_mgr_resume_app()</span> and <span style="font-family: Courier New,Courier,monospace">application_mgr_terminate_app()</span> functions:</p>
+
+<pre class="prettyprint">
+bool
+application_mgr_resume_app(char *app_id)
+{
+ app_context_h app_context = NULL;
+
+ // Error handling
+
+ if (app_manager_get_app_context(app_id, &app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_manager_resume_app(app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_context_destroy(app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ return true;
+}
+
+bool
+application_mgr_terminate_app(char *app_id)
+{
+ app_context_h app_context = NULL;
+
+ // Error handling
+
+ if (app_manager_get_app_context(app_id, &app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_manager_request_terminate_bg_app(app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ if (app_context_destroy(app_context) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ __remove_app_from_list(app_id);
+
+ return true;
+}
+</pre>
+
+<p>When all Taskmanager resources are released, use the <span style="font-family: Courier New,Courier,monospace">app_info_filter_destroy()</span> function to destroy the application manager filter created earlier. The application list as well as each list item also have to be released. The <span style="font-family: Courier New,Courier,monospace">application_mgr_destroy()</span> function is called when the Taskmanager application is terminated.</p>
+
+<pre class="prettyprint">
+bool
+application_mgr_destroy(void)
+{
+ if (app_info_filter_destroy(appmgr_data.app_info_filter) != APP_MANAGER_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ appmgr_data.app_info_filter = NULL;
+
+ _clear_application_list();
+
+ return true;
+}
+</pre>
+
+<h3>View Manager Module</h3>
+
+<p>The base GUI is created from the Tizen IDE template for developing UI applications with EDC. It consists of a window, a conformant, and an EDC layout. The layout has 2 parts:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">swallow</span>: Takes up all the layout space where the application genlist is inserted.</li>
+<li><span style="font-family: Courier New,Courier,monospace">text</span>: Placed at the center where the "No applications" string is displayed if the application list is empty.</li>
+</ul>
+
+<p>To create the genlist:</p>
+<ol><li>
+<p>The genlist is created using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_add()</span> function. For the genlist to be displayed properly, a genlist item class has to be created and defined with the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_class_new()</span> function. The following code snippet demonstrates how to set the item class properties. The <span style="font-family: Courier New,Courier,monospace">full</span> style means that the whole area of a genlist item is an icon (<span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span>). A custom item layout is inserted as each item's content. Apart from the item style, a <span style="font-family: Courier New,Courier,monospace">content_get</span> callback function is also defined. It is called when an item is appended to the genlist and contains the item layout creation.</p>
+
+<pre class="prettyprint">
+Evas_Object *genlist = elm_genlist_add(viewdata.win);
+
+// Error handling
+
+viewdata.item_class = elm_genlist_item_class_new();
+
+// Error handling
+
+viewdata.item_class->item_style = "full";
+viewdata.item_class->func.text_get = NULL;
+viewdata.item_class->func.content_get = __get_item_content;
+viewdata.item_class->func.state_get = NULL;
+viewdata.item_class->func.del = NULL;
+</pre></li>
+
+<li>
+<p>The genlist is filled using the <span style="font-family: Courier New,Courier,monospace">view_display_application_list()</span> function. To append items to the genlist, the <span style="font-family: Courier New,Courier,monospace">elm_genlist_item_append()</span> function is invoked for each <span style="font-family: Courier New,Courier,monospace">Eina_List</span> item.</p>
+
+<pre class="prettyprint">
+EINA_LIST_FOREACH(app_list, it, item)
+ elm_genlist_item_append(viewdata.genlist, viewdata.item_class, (void *)item, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);
+</pre></li>
+
+<li>
+<p>The application's <span style="font-family: Courier New,Courier,monospace">app_item_t</span> structure containing its ID and icon path is passed as the data argument to the appending function. It is later passed on to the previously defined callback function. The following example shows the <span style="font-family: Courier New,Courier,monospace">content_get</span> callback function. Application data is retrieved from the parameter and used to create the item layout.</p>
+<pre class="prettyprint">
+static Evas_Object *
+__get_item_content(void *data, Evas_Object *obj, const char *part)
+{
+ // Error handling
+
+ app_item_t *item = (app_item_t *)data;
+
+ return __create_item_layout(obj, item->app_id, item->icon_path);
+}
+</pre></li>
+
+<li><p>The item layout consists of a background, an icon, and a text part. The application ID is copied to the text part and its icon path is used to create an icon. To enable swiping an item left or right to terminate the application, the <span style="font-family: Courier New,Courier,monospace">draggable</span> block is used, and the item can be dragged around the interface. The following example shows how to define the <span style="font-family: Courier New,Courier,monospace">draggable</span> block. Note that it only has to be included in the background description, as the other parts' positions are relative to it and remain confined to it.</p>
+
+<pre class="prettyprint">
+part
+{
+ name: ITEM_PART_BASE;
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ color: 0 0 0 0;
+ }
+
+ draggable
+ {
+ x: 1 1 2;
+ y: 0 0 0;
+ }
+}
+</pre>
+
+<p>There are 2 lines in the <span style="font-family: Courier New,Courier,monospace">draggable</span> block: x and y, which define the movement in horizontal and vertical axes, respectively. The first argument in each line defines whether dragging along this axis is enabled (1 or -1) or disabled (0). In this example, dragging is possible only in the x axis. The second and third arguments define the step of the movement.</p></li></ol>
+
+<p>To detect user interaction, a callback for the <span style="font-family: Courier New,Courier,monospace">mouse_up</span> event is set for each item layout. There are 3 actions to perform, and to distinguish which action is performed, the drag value is obtained using the <span style="font-family: Courier New,Courier,monospace">edje_object_part_drag_value_get()</span> function that defines how much the object has been dragged. It takes the object's edje object as a parameter, and it needs to be acquired from the layout first using the <span style="font-family: Courier New,Courier,monospace">elm_layout_edje_get()</span> function. You also need to pass as a parameter the name of the part whose drag you want to measure. The actions are:</p>
+<ul>
+ <li>Tap the item
+ <p>A tap gesture is detected when the drag value equals 0. When it happens, the coordinates of the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> event are used to retrieve the item using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_at_xy_item_get()</span> function. The item data is acquired from it using the <span style="font-family: Courier New,Courier,monospace">elm_object_item_data_get()</span> function, after which the application ID is passed to the <span style="font-family: Courier New,Courier,monospace">application_mgr_resume_app()</span> function to resume the given application.</p></li>
+ <li>Swipe it left or right to the edge of the screen
+ <p>In this application, a swipe gesture occurs when the absolute value of the drag value is greater than <span style="font-family: Courier New,Courier,monospace">ITEM_DRAG_OUTSIDE_VAL</span>. When this happens, a signal is emitted to the item layout to hide its content. The genlist item at the <span style="font-family: Courier New,Courier,monospace">Evas_Event_Mouse_Up</span> event coordinates is retrieved using the <span style="font-family: Courier New,Courier,monospace">elm_genlist_at_xy_item_get()</span> function. The acquired pointer is used to delete the item with the <span style="font-family: Courier New,Courier,monospace">elm_object_item_del()</span> function. After it is deleted, the genlist item count is checked: if it equals 0, there are no running applications left, and the <span style="font-family: Courier New,Courier,monospace">view_display_no_applications()</span> function has to be called to update the view.</p></li>
+ <li>Move the item left or right, but not far enough to indicate the swipe gesture</li>
+</ul>
+
+<pre class="prettyprint">
+static void
+__item_layout_mouse_up_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ // Variable declaration and initialization
+
+ edje = elm_layout_edje_get(obj);
+ edje_object_part_drag_value_get(edje, ITEM_PART_BASE, &dx, NULL);
+
+ if (dx == 0)
+ {
+ // Item was not dragged left/right - item was clicked, resume application
+ genlist_item = elm_genlist_at_xy_item_get(viewdata.genlist, mouse_up_ev->canvas.x, mouse_up_ev->canvas.y, NULL);
+ // Error handling
+
+ app_item_t *item = (app_item_t *)elm_object_item_data_get(genlist_item);
+ // Error handling
+
+ application_mgr_resume_app(item->app_id);
+
+ }
+ else if (dx < ITEM_DRAG_OUTSIDE_VAL && dx > -ITEM_DRAG_OUTSIDE_VAL)
+ {
+ // Item was dragged, but not far enough to terminate application
+ elm_layout_signal_emit(obj, ITEM_PROGRAM_RESET_POSITION_SIGNAL, ITEM_PROGRAM_RESET_POSITION_SOURCE);
+ }
+ else
+ {
+ // Item was dragged to left/right edge of the screen - terminate application
+ elm_layout_signal_emit(obj, ITEM_PROGRAM_HIDE_SIGNAL, ITEM_PROGRAM_HIDE_SOURCE);
+
+ genlist_item = elm_genlist_at_xy_item_get(viewdata.genlist, mouse_up_ev->canvas.x, mouse_up_ev->canvas.y, NULL);
+ // Error handling
+
+ __delete_item(genlist_item);
+
+ if (elm_genlist_items_count(viewdata.genlist) == 0)
+ view_display_no_applications();
+
+ }
+}
+</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
--- /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 Sample] Alignment Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Alignment Sample Overview</h1>
+
+<p>The [UI Sample] Alignment sample application demonstrates how to align objects in a view using EDC contexts, such as <span style="font-family: Courier New,Courier,monospace;">point_base</span>, <span style="font-family: Courier New,Courier,monospace;">line_base</span>, and <span style="font-family: Courier New,Courier,monospace;">container_base</span>.</p>
+
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace;">elm_conformant</span>, for view management, containers, such as <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, for UI component management inside the view, and objects, such as <span style="font-family: Courier New,Courier,monospace;">elm_rectangle</span>, for the contents of the EDC view.</p>
+
+<p>The following figure illustrates the main screen of the sample, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] Alignment main screen</p>
+<p align="center"><img alt="[UI Sample] Alignment main screen" src="../images/alignment_main.png" /></p>
+
+<p align="center"><img alt="[UI Sample] Alignment UI component tree" src="../images/edc_main_tree.png" /></p>
+
+<h2 id="layout" name="layout">Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window, conformant, and layout. The EDC file is then inserted into the layout.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Create window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Create 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 base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ ad->layout = elm_layout_add(ad->win);
+ elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->layout);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<h2 id="view" name="view">EDC View</h2>
+
+<p>The following figure illustrates the EDC view wireframe and tree structure.</p>
+<p class="figure">Figure: EDC view</p>
+<p align="center"><img alt="EDC view" src="../images/alignment_view_contents_wireframe.png" /></p>
+
+<p align="center"><img alt="EDC view content tree" src="../images/alignment_view_contents_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">alignment.edc</span> file is used to set the layout content. The file uses the following EDC context methods to align objects: <span style="font-family: Courier New,Courier,monospace;">point_base</span>, <span style="font-family: Courier New,Courier,monospace;">line_base</span>, and <span style="font-family: Courier New,Courier,monospace;">container_base</span>. The file consists of 8 rectangles.</p>
+
+<p>The alignment policy of a rectangle is determined by its relative factor. If the <span style="font-family: Courier New,Courier,monospace;">relative</span> value of <span style="font-family: Courier New,Courier,monospace;">rel1</span> and <span style="font-family: Courier New,Courier,monospace;">rel2</span> is the same, the alignment policy is determined according to <span style="font-family: Courier New,Courier,monospace;">point_base</span>. If the <span style="font-family: Courier New,Courier,monospace;">relative</span> property defines a line shape, such as {(0.0,0.0), (1.0,0.0)}, {(1.0,0.0), (1.0,1.0)}, {(0.0,1.0), (1.0,1.0)}, {(0.0,0.0), (0.0,1.0)}, the alignment policy is determined according to <span style="font-family: Courier New,Courier,monospace;">line_base</span>. If the <span style="font-family: Courier New,Courier,monospace;">relative</span> property defines a container shape, such as {(0.0,0.0), (1.0,1.0)}, {0.2,0.1), (0.5,0.7)}, the alignment policy is determined according to the <span style="font-family: Courier New,Courier,monospace;">container_base</span> context.</p>
+
+<p>The position of a rectangle depends on its alignment policy and <span style="font-family: Courier New,Courier,monospace;">align</span> value. For example, for the <span style="font-family: Courier New,Courier,monospace;">point_base</span> context, the <span style="font-family: Courier New,Courier,monospace;">align</span> property defines the anchor of the rectangle. For <span style="font-family: Courier New,Courier,monospace;">line_base</span>, the <span style="font-family: Courier New,Courier,monospace;">align</span> property defines the base line of the rectangle. For <span style="font-family: Courier New,Courier,monospace;">container_base</span>, the <span style="font-family: Courier New,Courier,monospace;">align</span> property defines the region of the rectangle in the container.</p>
+
+<p>In the <span style="font-family: Courier New,Courier,monospace;">alignment.edc</span> file, the black rectangle is used for background (<span style="font-family: Courier New,Courier,monospace;">bg_rect</span> with <span style="font-family: Courier New,Courier,monospace;">container_base</span>). The yellow and magenta rectangles (<span style="font-family: Courier New,Courier,monospace;">left_top_point_base</span> and <span style="font-family: Courier New,Courier,monospace;">right_bottom_point_base</span>) are used with the <span style="font-family: Courier New,Courier,monospace;">point_base</span> context. A red rectangle is used for the header and footer (<span style="font-family: Courier New,Courier,monospace;">top_line_base</span> and <span style="font-family: Courier New,Courier,monospace;">bottom_line_base</span>) with the <span style="font-family: Courier New,Courier,monospace;">line_base</span> context. The center area contains 3 green rectangles with the <span style="font-family: Courier New,Courier,monospace;">container_base</span> context.</p>
+
+<p>The following code is the entire EDC script of the <span style="font-family: Courier New,Courier,monospace;">alignment.edc</span> file:</p>
+
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ parts
+ {
+ part
+ {
+ name: "bg_rect";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ fixed: 1 1;
+ rel1 { relative: 0.0 0.0; }
+ rel2 { relative: 1.0 1.0; }
+ color: 0 0 0 255;
+ }
+ }
+ part
+ {
+ name: "middle_container_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ max: 50 50;
+ fixed: 1 1;
+ rel1.to: "bg_rect";
+ rel2.to: "bg_rect";
+ align: 0.5 0.5;
+ color: 0 255 0 128;
+ }
+ }
+ part
+ {
+ name: "left_container_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ max: 50 50;
+ fixed: 1 1;
+ rel1.to: "bg_rect";
+ rel2.to: "bg_rect";
+ align: 0.0 0.5;
+ color: 0 255 0 128;
+ }
+ }
+ part
+ {
+ name: "right_container_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ max: 50 50;
+ fixed: 1 1;
+ rel1.to: "bg_rect";
+ rel2.to: "bg_rect";
+ align: 1.0 0.5;
+ color: 0 255 0 128;
+ }
+ }
+ part
+ {
+ name: "top_line_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: 0 50;
+ fixed: 0 1;
+ rel1.relative: 0.0 0.0;
+ rel2.relative: 1.0 0.0;
+ align: 0.5 0.0;
+ color: 255 0 0 128;
+ }
+ }
+ part
+ {
+ name: "bottom_line_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: 0 50;
+ fixed: 0 1;
+ rel1.relative: 0.0 1.0;
+ rel2.relative: 1.0 1.0;
+ align: 0.5 1.0;
+ color: 255 0 0 128;
+ }
+ }
+ part
+ {
+ name: "left_top_point_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: 50 50;
+ fixed: 1 1;
+ rel1.relative: 0.5 0.5;
+ rel2.relative: 0.5 0.5;
+ align: 0.0 0.0;
+ color: 255 255 0 128;
+ }
+ }
+ part
+ {
+ name: "right_bottom_point_base";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: 50 50;
+ fixed: 1 1;
+ rel1.relative: 0.5 0.5;
+ rel2.relative: 0.5 0.5;
+ align: 1.0 1.0;
+ color: 255 0 255 128;
+ }
+ }
+ }
+ }
+}
+</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
--- /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 Sample] Animation Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Animation Sample Overview</h1>
+
+<p>The [UI Sample] Animation sample application demonstrates how to animate an object in the EDC view using an EDC context, such as <span style="font-family: Courier New,Courier,monospace;">transition</span>.</p>
+
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace;">elm_conformant</span>, for view management, containers, such as <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, for UI component management inside the view, and the <span style="font-family: Courier New,Courier,monospace;">RECT</span> type (an EDC keyword) for the contents of the EDC view.</p>
+
+<p>The following figure illustrates the [UI Sample] Animation main screen, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] Animation main screen</p>
+<p align="center"><img alt="Animation main screen" src="../images/animation_main.png" /></p>
+
+<p align="center"><img alt="Animation UI component tree" src="../images/edc_main_tree.png" /></p>
+
+<h2 id="layout" name="layout">Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window, conformant, and layout. The EDC file is then inserted into the layout.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Create window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Create 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 base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ ad->layout = elm_layout_add(ad->win);
+ elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->layout);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<h2 id="view" name="view">EDC View</h2>
+
+<p>The following figure illustrates the EDC view wireframe and tree structure.</p>
+<p class="figure">Figure: EDC view</p>
+<p align="center"><img alt="EDC view" src="../images/animation_view_contents_wire_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">animation.edc</span> file is used to move a rectangle (<span style="font-family: Courier New,Courier,monospace;">part_one</span>) with the EDC <span style="font-family: Courier New,Courier,monospace;">transition</span> property specified in a <span style="font-family: Courier New,Courier,monospace;">program</span> block. The file uses 3 <span style="font-family: Courier New,Courier,monospace;">program</span>s to move the rectangle.</p>
+
+<p>The following code is the entire EDC script of the <span style="font-family: Courier New,Courier,monospace;">animation.edc</span> file:</p>
+
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ parts
+ {
+ part
+ {
+ name: "part_one";
+ type: RECT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1.relative: 0.0 0.0;
+ rel2.relative: 1.0 1.0;
+ color: 0 0 255 128;
+ }
+ description
+ {
+ state: "scale_down" 0.0;
+ inherit: "default" 0.0;
+ min: 100 100;
+ rel1.relative: 0.5 0.5;
+ rel2.relative: 0.5 0.5;
+ color: 0 0 255 50;
+ }
+ description
+ {
+ state: "move" 0.0;
+ inherit: "default" 0.0;
+ min: 100 100;
+ rel1.relative: 0.5 0.2;
+ rel2.relative: 0.5 0.2;
+ color: 0 0 255 50;
+ }
+ }
+ }
+ programs
+ {
+ program
+ {
+ signal: "load";
+ after: "scale_down_animation";
+ }
+ program
+ {
+ name: "scale_down_animation";
+ signal: "animation,start";
+ action: STATE_SET "scale_down" 0.0;
+ target: "part_one";
+ transition: LINEAR 3.0;
+ after: "move_animation";
+ }
+ program
+ {
+ name: "move_animation";
+ signal: "animation,start";
+ action: STATE_SET "move" 0.0;
+ target: "part_one";
+ transition: ACCELERATE 1.0;
+ }
+ }
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">parts</span> block consists of a single <span style="font-family: Courier New,Courier,monospace;">part</span>, which is the rectangle (<span style="font-family: Courier New,Courier,monospace;">RECT</span>) used to illustrate scaling and moving animations. The <span style="font-family: Courier New,Courier,monospace;">part</span> has 3 <span style="font-family: Courier New,Courier,monospace;">description</span> elements for changing its state: <span style="font-family: Courier New,Courier,monospace;">default</span>, <span style="font-family: Courier New,Courier,monospace;">scale_down</span>, and <span style="font-family: Courier New,Courier,monospace;">move</span>. Each <span style="font-family: Courier New,Courier,monospace;">description</span> defines a set of properties for changing the shape and position of the rectangle through animation. The <span style="font-family: Courier New,Courier,monospace;">scale_down</span> state defines a smaller size for the rectangle, and the <span style="font-family: Courier New,Courier,monospace;">move</span> state defines a new position for the rectangle.</p>
+
+<p>The animations are defined in the <span style="font-family: Courier New,Courier,monospace;">programs</span> block. The first <span style="font-family: Courier New,Courier,monospace;">program</span> block is used to call the second <span style="font-family: Courier New,Courier,monospace;">program</span> block, named <span style="font-family: Courier New,Courier,monospace;">scale_down_animation</span>. The <span style="font-family: Courier New,Courier,monospace;">after</span> keyword is used to call the <span style="font-family: Courier New,Courier,monospace;">scale_down_animation</span> operation.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">scale_down_animation</span> operation is defined with the following properties: <span style="font-family: Courier New,Courier,monospace;">signal</span>, <span style="font-family: Courier New,Courier,monospace;">action</span>, <span style="font-family: Courier New,Courier,monospace;">target</span>, and <span style="font-family: Courier New,Courier,monospace;">transition</span>. To use the animation, <span style="font-family: Courier New,Courier,monospace;">signal</span> is set to <span style="font-family: Courier New,Courier,monospace;">animation,start</span>, which generates the signal for the animation, and <span style="font-family: Courier New,Courier,monospace;">action</span> is set to <span style="font-family: Courier New,Courier,monospace;">STATE_SET "scale_down" 0.0</span>, which means that the state of the target object changes to <span style="font-family: Courier New,Courier,monospace;">scale_down</span> in the animation. The <span style="font-family: Courier New,Courier,monospace;">target</span> property defines the target object of the animation, which is the <span style="font-family: Courier New,Courier,monospace;">part_one</span> rectangle. The <span style="font-family: Courier New,Courier,monospace;">transition</span> property defines the animation type. In this example, the type is set to <span style="font-family: Courier New,Courier,monospace;">LINEAR 3.0</span>, which means that the state of the target object changes linearly over a period of 3 seconds.</p>
+
+<p>The following figure shows the result of the <span style="font-family: Courier New,Courier,monospace;">scale_down_animation</span> operation, which transitions the rectangle from the <span style="font-family: Courier New,Courier,monospace;">default</span> state (left) to the <span style="font-family: Courier New,Courier,monospace;">scale_down</span> state (right). The size and color of the rectangle are changed.</p>
+
+<p class="figure">Figure: Scale down animation</p>
+<p align="center"><img alt="Scale down animation" src="../images/animation_scale_down.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">move_animation</span> operation moves the rectangle from the center of the view to the top. In the animation, the <span style="font-family: Courier New,Courier,monospace;">action</span> property is set to <span style="font-family: Courier New,Courier,monospace;">STATE_SET "move" 0.0</span>, which changes the state of the rectangle to <span style="font-family: Courier New,Courier,monospace;">move</span>, and <span style="font-family: Courier New,Courier,monospace;">transition</span> is set to <span style="font-family: Courier New,Courier,monospace;">ACCELERATE 1.0</span>, which moves the rectangle with acceleration over a period of 1 second.</p>
+
+<p>The following figure shows the result of the <span style="font-family: Courier New,Courier,monospace;">move_animation</span> operation.</p>
+
+<p class="figure">Figure: Move animation</p>
+<p align="center"><img alt="Movement animation" src="../images/animation_move.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>
+
+</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 Sample] Animator Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Animator Sample Overview</h1>
+<p>The Animator sample demonstrates how to display rectangles with an animation effect using EFL animator and timer functions. Creating an animation requires information, such as how long the animation runs, and having a callback that executes the animation. </p>
+
+<p>The following figure illustrates the result of the Animator sample. </p>
+
+<p class="figure">Figure: Animator screen</p>
+<p align="center"><img alt="Animator screen" src="../images/animator_sample.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function draws 2 different rectangles and calls the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_frametime_set()</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator_timeline_add()</span>, <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span>, and <span style="font-family: Courier New,Courier,monospace;">ecore_timer_add()</span> functions to give animation effects.</p>
+
+<pre class="prettyprint">
+#include "animator.h"
+#include "dbg.h"
+
+typedef struct appdata
+{
+ Evas_Object *win;
+ Evas_Object *label;
+} appdata_s;
+
+static void create_base_gui(appdata_s *ad)
+{
+ // 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+ // Main part of the animator function
+ Evas_Object *rect, *bg, *rect2;
+ Ecore_Evas *ee;
+ Evas *evas;
+ Ecore_Animator *anim;
+ ee = ecore_evas_new(NULL, 0, 0, 300, 400, NULL);
+ ecore_evas_show(ee);
+ evas = ecore_evas_get(ee);
+ bg = evas_object_rectangle_add(evas);
+ evas_object_resize(bg, 300, 400);
+ evas_object_show(bg);
+ rect = evas_object_rectangle_add(evas);
+ evas_object_color_set(rect, 0, 0, 255, 255);
+ evas_object_resize(rect, 50, 50);
+ evas_object_show(rect);
+ rect2 = evas_object_rectangle_add(evas);
+ evas_object_color_set(rect2, 0, 55, 0, 255);
+ evas_object_resize(rect2, 50, 50);
+ evas_object_show(rect2);
+ ecore_animator_frametime_set(1. / 50);
+ ecore_animator_timeline_add(5, _advance_frame, rect);
+ anim = ecore_animator_add(_advance_frame3, rect2);
+ ecore_timer_add(10, _start_second_anim, rect);
+ ecore_timer_add(5, _freeze_third_anim, anim);
+ ecore_timer_add(10, _thaw_third_anim, anim);
+ ecore_main_loop_begin();
+ evas_object_del(rect);
+ ecore_evas_free(ee);
+ ecore_animator_del(anim);
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">_advance_frame()</span>, <span style="font-family: Courier New,Courier,monospace;">_advance_frame2()</span>, and <span style="font-family: Courier New,Courier,monospace;">_advance_frame3()</span> functions are callbacks that give animation effects by resizing the rectangle for a different time frame, moving the rectangle location and changing the color.</p>
+
+<pre class="prettyprint">
+static Eina_Bool _advance_frame(void *data, double pos)
+{
+ double frame = pos;
+ frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_SPRING, 1.2, 15);
+ evas_object_resize(data, 50 * (1 + frame), 50 * (1 + frame));
+ evas_object_move(data, 100 * frame, 100 * frame);
+ evas_object_color_set(data, 255 * frame, 0, 255 * (1 - frame), 255);
+
+ return EINA_TRUE;
+}
+
+static Eina_Bool _advance_frame2(void *data, double pos)
+{
+ double frame = pos;
+ frame = ecore_animator_pos_map(pos, ECORE_POS_MAP_BOUNCE, 1.2, 50);
+ evas_object_resize(data, 100 - (50 * frame), 100 - (50 * frame));
+ evas_object_move(data, 100 * (1 - frame), 100 * (1 - frame));
+ evas_object_color_set(data, 255 * (1 - frame), 0, 255 * frame, 255);
+
+ return EINA_TRUE;
+}
+
+static Eina_Bool _advance_frame3(void *data)
+{
+ static int x = 0;
+ if (x >= 250)
+ x = 0;
+ evas_object_move(data, ++x, 350);
+
+ return EINA_TRUE;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">_start_second_anim()</span>, <span style="font-family: Courier New,Courier,monospace;">_freeze_third_anim</span>, and <span style="font-family: Courier New,Courier,monospace;">_thaw_third_anim</span> functions call the timer, stop the animation, and resume the animation.</p>
+
+<pre class="prettyprint">
+static Eina_Bool _start_second_anim(void *data)
+{
+ ecore_animator_frametime_set(1. / 10);
+ ecore_animator_timeline_add(20, _advance_frame2, data);
+
+ return EINA_FALSE;
+}
+
+static Eina_Bool _freeze_third_anim(void *data)
+{
+ ecore_animator_freeze(data);
+
+ return EINA_FALSE;
+}
+
+static Eina_Bool _thaw_third_anim(void *data)
+{
+ ecore_animator_thaw(data);
+
+ return EINA_FALSE;
+}
+</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
--- /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 Sample] ApplicationStore Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] ApplicationStore Sample Overview</h1>
+ <p>The [UI Sample] ApplicationStore sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+
+ <p>The sample 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_scroller</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span> and <span style="font-family: Courier New,Courier,monospace">elm_box</span> for UI component management inside the view, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span>, <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 following figure illustrates the main screen of the [UI Sample] ApplicationStore, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] ApplicationStore screen</p>
+ <p align="center"><img alt="[UI Sample] ApplicationStore screen" src="../images/ui_application_store_sd.png" /></p>
+ <p align="center"><img alt="[UI Sample] ApplicationStore screen" src="../images/ui_application_store_sd_tree.png" /></p>
+
+ <h2>Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> is added to act as a view manager of the window and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">add_main_view()</span> function and added to the naviframe.</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *bg = NULL;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_app_base_scale_set(1.8);
+
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // 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);
+
+ // Indicator BG
+ bg = elm_bg_add(ad->conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Base Layout
+ ad->layout = elm_layout_add(ad->conform);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_layout_theme_set(ad->layout, "layout", "application", "default");
+ evas_object_show(ad->layout);
+
+ elm_object_content_set(ad->conform, ad->layout);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+
+ // Main view
+ ad->mainview = add_main_view(ad);
+
+ elm_naviframe_item_push(ad->nf, "Application Store", NULL, NULL, ad->mainview, NULL);
+
+ elm_object_part_content_set(ad->layout, "elm.swallow.content", ad->nf);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+
+ eext_object_event_callback_add(ad->mainview, EEXT_CALLBACK_BACK, mainview_back_cb, ad);
+}
+</pre>
+
+<h2>Main View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">add_main_view()</span> function creates the content of the view by composing a scroller and a container component (<span style="font-family: Courier New,Courier,monospace">elm_box</span>) to arrange the individual content UI component vertically. The scroller adds the scrolling facility in case the content size is bigger than the available space.</p>
+
+<p>The individual item in the container can be a content UI component, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span>, or another container, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span> or <span style="font-family: Courier New,Courier,monospace">elm_box</span> as shown in the function.</p>
+
+<pre class="prettyprint">static Evas_Object *
+add_main_view(appdata_s *ad)
+{
+ Evas_Object *scroller, *main_view, *item_table, *item_header, *item_content;
+ int content_height = ELM_SCALE_SIZE(240);
+ int grid_item_height = ELM_SCALE_SIZE(60);
+
+ scroller = elm_scroller_add(win);
+ elm_scroller_bounce_set(scroller, EINA_FALSE, EINA_TRUE);
+ evas_object_size_hint_weight_set(scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(scroller);
+
+ main_view = elm_box_add(win);
+ elm_box_align_set(main_view, 0, 0);
+ evas_object_size_hint_weight_set(main_view, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_box_padding_set(main_view, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
+ elm_object_content_set(scroller, main_view);
+
+ item_table = add_item_table(main_view, grid_item_height);
+ evas_object_show(item_grid);
+ elm_box_pack_end(main_view, item_table);
+</pre>
+
+<p>An item header is created and added to the main box container.</p>
+
+<pre class="prettyprint">
+ item_header = create_item_header(main_view, "<font_size=30>New Movie releases</font_size>");
+ evas_object_show(item_header);
+ elm_box_pack_end(main_view, item_header);
+
+ item_content = create_item_content(main_view, content_height, 0);
+ evas_object_show(item_content);
+ elm_box_pack_end(main_view, item_content);
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">add_item_table()</span> function creates a table and packs the button component into it.</p>
+
+<pre class="prettyprint">static Evas_Object *
+add_item_table(Evas_Object *parent, int content_height)
+{
+ Evas_Object *content_table, *content *ic;
+
+ content_table = elm_table_add(parent);
+ elm_table_homogeneous_set(content_table, EINA_TRUE);
+ evas_object_size_hint_align_set(content_table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_table_padding_set(content_table, ELM_SCALE_SIZE(5), ELM_SCALE_SIZE(5));
+ evas_object_show(content_table);
+
+ ic = create_image(parent, "apps.jpg", content_height);
+ content = create_button(content_table, ic);
+ evas_object_show(content);
+ elm_table_pack(content_table, content, 0, 0, 1, 1);
+
+static Evas_Object*
+create_button(Evas_Object *parent, Evas_Object *content)
+{
+ Evas_Object *button = elm_button_add(parent);
+ elm_object_style_set(button, "transparent");
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, 0.0);
+
+ elm_object_content_set(button, content);
+</pre>
+
+<p>A listener callback for mouse events is added to the button.</p>
+
+<pre class="prettyprint"> evas_object_smart_callback_add(button, "pressed", pressed_cb, content);
+ evas_object_smart_callback_add(button, "unpressed", unpressed_cb, content);
+ evas_object_smart_callback_add(button, "clicked", clicked_cb, content);</pre>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_label()</span> function creates a label component.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_label(Evas_Object *parent, const char * text)
+{
+ Evas_Object *text_obj = elm_label_add(button);
+ elm_object_text_set(text_obj, text);
+ return text_obj;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_image()</span> function creates an image to be used as a content object within the button.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_image(Evas_Object *parent, const char *image_path, int min_height)
+{
+ char path[100] = {0};
+ snprintf(path, sizeof(path), ICON_DIR"/%s", image_path);
+ Evas_Object *ic = elm_image_add(button);
+ elm_image_file_set(ic, path, NULL);
+ evas_object_size_hint_min_set(ic, 0, min_height);
+ return ic;
+}
+</pre>
+
+<p>The listener callback gets the call when there is a mouse event on the button.</p>
+
+<p>In the following snippet:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">user_data</span> is the data provided by the user during callback registration.</li>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the handle to the object on which the event occurred.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is the data the object wants to pass to the callback function.</li>
+</ul>
+
+<pre class="prettyprint">static void
+clicked_cb(void *user_data, Evas_Object *obj, void *event_info)
+{
+ // Add your application logic
+}
+</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
--- /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 Sample] Box Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Box Sample Overview</h1>
+<p>The Box sample demonstrates how to display a number of rectangles using the EFL smart object - box component. The box component is a convenient smart object that packs the children inside the box in a sequence. Evas has pre-made functions to define the box size and the alignment inside its cell space. </p>
+
+<p>The following figure illustrates the box component sample screen.</p>
+
+<p class="figure">Figure: Box screen</p>
+<p align="center"><img alt="Box screen" src="../images/box_sd.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates a window, retrieves the Evas canvas, and adds the box and rectangle objects to the retrieved canvas. The rectangle object is appended to the box object that works as a container component.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ Evas *e = evas_object_evas_get(ad->win);
+ Evas_Object *box, *rect;
+ int i;
+
+ box = evas_object_box_add(e); // Add a new box object on the provided canvas
+ evas_object_show(box);
+
+ for (i = 1; i <= 5; i++)
+ {
+ rect = evas_object_rectangle_add(e);
+ evas_object_size_hint_min_set(rect, 50, 50);
+ evas_object_color_set(rect,
+ rand() % 256,
+ rand() % 256,
+ rand() % 256,
+ 255);
+ evas_object_show(rect);
+ evas_object_box_append(box, rect); // Append a new child object to the given box object
+ }
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] Calculator Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] Calculator Sample Overview</h1>
+ <p>The [UI Sample] Calculator sample demonstrates how to implement a complex view using EFL UI components and containers.</p>
+
+ <p>It uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conform</span> and <span style="font-family: Courier New,Courier,monospace">elm_panel</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_grid</span> and <span style="font-family: Courier New,Courier,monospace">elm_table</span> for UI component management inside the view, 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_entry</span> for the content inside the view.</p>
+
+ <p>The following figure illustrates the main view of the [UI Sample] Calculator sample application, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] Calculator screen</p>
+ <p align="center"><img alt="[UI Sample] Calculator screen" src="../images/ui_calculator_sd.png" /></p>
+ <p align="center"><img alt="[UI Sample] Calculator screen" src="../images/ui_calculator_tree.png" /></p>
+
+
+ <h2>Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. The window contains a grid structure for the calculator entry display and its button panel. The entry display is aligned to the top of the grid and the button panel to the bottom of the grid.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *grid, *panel;
+
+ 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 };
+ elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
+ }
+
+ evas_object_smart_callback_add(ad->win, "wm,rotation,changed", rotation_cb, ad);
+ 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->bg = create_bg(ad->win);
+ ad->conform = create_conform(ad->win);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+
+ // Grid
+ grid = elm_grid_add(ad->conform);
+ evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_content_set(ad->conform, grid);
+
+ // Entry
+ ad->entry = create_entry(grid);
+ elm_grid_pack(grid, ad->entry, 5, 5, 90, 25);
+
+ // Panel
+ panel = create_panel(grid, ad);
+ elm_grid_pack(grid, panel, 0, 35, 100, 65);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<h2>Main View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_entry()</span> function creates the calculator display. Input for the display is created with calculator buttons created in the next steps, so there is no need for the software keypad. Disable the software keypad by setting the <span style="font-family: Courier New,Courier,monospace">elm_entry_editable_set()</span> function as <span style="font-family: Courier New,Courier,monospace">false</span>. The display uses a right-aligned, 50 pt font.</p>
+
+
+<pre class="prettyprint">static Evas_Object *
+create_entry(Evas_Object *parent)
+{
+ Evas_Object *entry;
+
+ entry = elm_entry_add(parent);
+ elm_entry_editable_set(entry, EINA_FALSE);
+ elm_entry_entry_set(entry, "<font_size=50><align=right></font_size>");
+ evas_object_show(entry);
+
+ return entry;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_panel()</span> function creates the calculator button panel. There are 2 sets of buttons: basic buttons that are always visible, and advanced buttons that are only visible in the landscape mode.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_panel(Evas_Object *parent, appdata_s *ad)
+{
+ Evas_Object *panel, *grid, *content;
+
+ // Panel
+ panel = elm_panel_add(parent);
+ elm_panel_orient_set(panel, ELM_PANEL_ORIENT_BOTTOM);
+ evas_object_show(panel);
+
+ // Grid
+ grid = elm_grid_add(panel);
+ evas_object_size_hint_weight_set(grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_content_set(panel, grid);
+
+ // Panel basic content
+ ad->basic_content = create_panel_basic_content(grid, ad);
+ evas_object_size_hint_weight_set(ad->basic_content, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->basic_content, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_grid_pack(grid, ad->basic_content, 3, 3, 94, 94);
+
+ // Panel advanced content
+ ad->advanced_content = create_panel_advanced_content(grid, ad);
+ evas_object_size_hint_weight_set(ad->advanced_content, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->advanced_content, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_grid_pack(grid, ad->advanced_content, -100, -100, 94, 94);
+
+ return panel;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_panel_basic_content()</span> function creates the calculator buttons, such as number and sign buttons. The buttons are arranged in a table structure with a 10-pixel padding.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_panel_basic_content(Evas_Object *parent, appdata_s *ad)
+{
+ Evas_Object *table, *button;
+
+ table = elm_table_add(parent);
+ elm_table_padding_set(table, 10, 10);
+
+ button = elm_button_add(table);
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_text_set(button, "<font_size = 50>C</font_size>");
+ evas_object_smart_callback_add(button, "clicked", clicked_c_cb, ad->entry);
+ evas_object_show(button);
+ elm_table_pack(table, button, 0, 0, 1, 1);
+
+ button = elm_button_add(table);
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_text_set(button, "<font_size = 50>/</font_size>");
+ evas_object_smart_callback_add(button, "clicked", clicked_divide_cb, ad->entry);
+ evas_object_show(button);
+ elm_table_pack(table, button, 1, 0, 1, 1);
+ …
+
+ evas_object_show(table);
+
+ return table;
+}</pre>
+
+<p>As an example, when the user clicks the <strong>0</strong> button, the <span style="font-family: Courier New,Courier,monospace">clicked_0_cb()</span> function is called. The function adds the text in the entry display.</p>
+
+<pre class="prettyprint">
+static void
+clicked_0_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+ Evas_Object *entry = data;
+ elm_entry_entry_append(entry, "<font_size = 50>0</font_size>");
+}
+</pre>
+
+<p>When the user rotates the device, the <span style="font-family: Courier New,Courier,monospace">rotation_cb()</span> function is called, which changes the layout of contents. If the new layout is in the landscape mode, the advanced content is aligned at the left side of the basic content.</p>
+
+<pre class="prettyprint">
+static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ int current_degree = elm_win_rotation_get(obj);
+
+ if (current_degree != 0 && current_degree != 180)
+
+ {
+ elm_grid_pack_set(ad->basic_content, 45, 3, 52, 94);
+ elm_grid_pack_set(ad->advanced_content, 3, 3, 36, 94);
+ }
+ else
+ {
+ elm_grid_pack_set(ad->basic_content, 3, 3, 94, 94);
+ elm_grid_pack_set(ad->advanced_content, -100, -100, 94, 94);
+ }
+}
+</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
--- /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 Sample] Clock Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] Clock Sample Overview</h1>
+ <p>The [UI Sample] Clock sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy. The sample also shows how to view reconstruction in the landscape mode.</p>
+
+ <p>The sample 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 the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_box</span>, <span style="font-family: Courier New,Courier,monospace">elm_grid</span>, and <span style="font-family: Courier New,Courier,monospace">elm_table</span> for UI component management inside the view, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span>, <span style="font-family: Courier New,Courier,monospace">elm_label</span>, <span style="font-family: Courier New,Courier,monospace">elm_image</span>, and <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> for the content inside the view.</p>
+
+<h2>Alarm View</h2>
+
+ <p>The following figure illustrates the alarm view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: Alarm view</p>
+ <p align="center"><img alt="Alarm view" src="../images/ui_clock_sd_alarm.png" /></p>
+ <p align="center"><img alt="Alarm view" src="../images/ui_clock_sd_alarm_tree.png" /></p>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window, which contains an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>), a view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), and the content created using the <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function.</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *bg = NULL;
+ Elm_Object_Item *nf_it, *tabbar_it;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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, "wm,rotation,changed", rotation_cb, ad);
+ 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);
+
+ // Indicator BG
+ bg = elm_bg_add(ad->conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ elm_object_content_set(ad->conform, ad->nf);
+ evas_object_show(ad->nf);
+ nf_it = elm_naviframe_item_push(ad->nf, NULL, NULL, NULL, NULL, "tabbar/icon/notitle");
+
+ // Tabbar
+ ad->tabbar = create_toolbar(ad);
+ elm_object_item_part_content_set(nf_it, "tabbar", ad->tabbar);
+
+ // Set the first view
+ tabbar_it = elm_toolbar_first_item_get(ad->tabbar);
+ elm_toolbar_item_selected_set(tabbar_it, EINA_TRUE);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_toolbar()</span> function creates the main view content. It first pushes a naviframe view, and then creates a toolbar and sets the toolbar options. 3 items are added in the toolbar.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_toolbar(appdata_s *ad)
+{
+ Evas_Object *tabbar;
+
+ tabbar = elm_toolbar_add(ad->nf);
+ elm_object_style_set(tabbar, "tabbar");
+ elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_NONE);
+ elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
+
+ elm_toolbar_item_append(tabbar, ICON_DIR"/icon_alarm.png", "Alarm", tabbar_item_cb, ad);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/icon_worldclock.png", "World Clock", tabbar_item_cb, ad);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/icon_timer.png", "Timer", tabbar_item_cb, ad);
+
+ return tabbar;
+}
+</pre>
+
+<p>When a tab bar item is selected, the <span style="font-family: Courier New,Courier,monospace">tabbar_item_selected()</span> function is called.
+If the Alarm tab is selected (and the device rotation degree is 0 or 180), the <span style="font-family: Courier New,Courier,monospace">create_alarm_view()</span> function is called.
+</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">sub_view</span> value is set as the box object to take from the <span style="font-family: Courier New,Courier,monospace">create_alarm_view()</span> function. The box object is then posted to the naviframe.</p>
+
+<pre class="prettyprint">static void
+tabbar_item_selected(appdata_s *ad, Elm_Object_Item *it)
+{
+ Evas_Object *sub_view;
+ const char *str = NULL;
+
+ str = elm_object_item_text_get(it);
+
+ if (str && !strcmp(str, "World Clock"))
+ {
+ sub_view = create_worldclock_view(ad);
+ }
+ else if (str && !strcmp(str, "Timer"))
+ {
+ if (ad->current_degree == 0 || ad->current_degree == 180)
+ sub_view = create_timer_view(ad);
+ else
+ sub_view = create_landscape_timer_view(ad);
+ }
+ else
+ {
+ if (ad->current_degree == 0 || ad->current_degree == 180)
+ sub_view = create_alarm_view(ad);
+ else
+ sub_view = create_landscape_alarm_view(ad);
+ }
+
+ elm_object_content_set(ad->nf, sub_view);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_alarm_view()</span> function creates the content of the main view.
+A box containing grid and button objects is created and added to the naviframe.</p>
+
+<pre class="prettyprint">static Evas_Object *
+create_alarm_view(appdata_s *ad)
+{
+ Evas_Object *box, *grid1, *bg1, *label1, *label2, *grid2, *bg2, *img, *label3, *btn;
+
+ box = elm_box_add(ad->nf);
+ evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ ...
+ ...
+ ...
+ elm_box_pack_end(box, grid1);
+ elm_box_pack_end(box, grid2);
+ elm_box_pack_end(box, btn);
+
+ return box;</pre>
+
+<p>A grid containing <span style="font-family: Courier New,Courier,monospace">bg</span> and <span style="font-family: Courier New,Courier,monospace">label</span> objects is created and added to the box container. Each object in the grid has its own relative coordinates for positioning.</p>
+
+<pre class="prettyprint">grid1 = elm_grid_add(box);
+ evas_object_size_hint_weight_set(grid1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(grid1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(grid1);
+
+ bg1 = create_bg(grid1, 1);
+ elm_grid_pack(grid1, bg1, 0, 0, 100, 100);
+
+ label1 = elm_label_add(grid1);
+ elm_object_text_set(label1, "<font_size=110><color=#ffffff>07:26</color></font_size>");
+ evas_object_show(label1);
+ elm_grid_pack(grid1, label1, 22, 8, 100, 100);
+
+ label2 = elm_label_add(grid1);
+ elm_object_text_set(label2, "<font_size=22><color=#a6a6a6>wed, January 1</color></font_size>");
+ evas_object_show(label2);
+ elm_grid_pack(grid1, label2, 35, 78, 100, 100);
+
+ grid2 = elm_grid_add(box);
+ evas_object_size_hint_weight_set(grid2, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(grid2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_min_set(grid2, -1, 430);
+ evas_object_show(grid2);
+
+ bg2 = create_bg(grid2, 2);
+ elm_grid_pack(grid2, bg2, 0, 0, 100, 100);
+
+ img = create_img(grid2, "no_alarm.png");
+ elm_grid_pack(grid2, img, 32, 32, 36, 36);
+
+ label3 = elm_label_add(grid2);
+ elm_object_text_set(label3, "<b><font_size=22><color=#ffffff>No alarms</color></font_size></b>");
+ evas_object_show(label3);
+ elm_grid_pack(grid2, label3, 40, 68, 100, 100);
+
+ btn = create_btn(box, "Create alarm");</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">bg</span>, <span style="font-family: Courier New,Courier,monospace">img</span>, and <span style="font-family: Courier New,Courier,monospace">btn</span> objects are created for reusability.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_bg(Evas_Object *parent, int type)
+{
+ Evas_Object *bg;
+
+ bg = elm_bg_add(parent);
+ evas_object_size_hint_weight_set(bg, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(bg, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ if (type == 1)
+ elm_bg_color_set(bg, 0, 0, 0);
+ else
+ elm_bg_color_set(bg, 0, 40, 40);
+
+ evas_object_show(bg);
+
+ return bg;
+}
+
+static Evas_Object*
+create_img(Evas_Object *parent, char *filename)
+{
+ Evas_Object *img;
+ char buf[PATH_MAX];
+
+ img = elm_image_add(parent);
+ snprintf(buf, sizeof(buf), "%s/%s", ICON_DIR, filename);
+ elm_image_file_set(img, buf, NULL);
+ evas_object_show(img);
+
+ return img;
+}
+
+static Evas_Object*
+create_btn(Evas_Object *parent, char *text)
+{
+ Evas_Object *btn;
+ char buf[PATH_MAX];
+
+ btn = elm_button_add(parent);
+ evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ snprintf(buf, sizeof(buf), "%s", text);
+ elm_object_text_set(btn, buf);
+ evas_object_show(btn);
+
+ return btn;
+}
+</pre>
+
+ <h2>Landscape Alarm View</h2>
+
+ <p>The following figure illustrates the landscape Alarm view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: Landscape Alarm view</p>
+ <p align="center"><img alt="Landscape Alarm view" src="../images/ui_clock_sd_alarm_ls.png" /></p>
+ <p align="center"><img alt="Landscape Alarm view" src="../images/ui_clock_sd_alarm_tree_ls.png" /></p>
+
+<p>When the device is rotated, the application rearranges the UI component layout to match the view mode (portrait or landscape).</p>
+
+<p>In this sample, a smart callback for device rotation in the main function is added by default.</p>
+
+<pre class="prettyprint">evas_object_smart_callback_add(ad->win, "wm,rotation,changed", rotation_cb, ad);</pre>
+
+<p>The smart callback is called when the device is rotated.</p>
+
+<p>The selected view is reconstructed according to the current device angle.</p>
+
+<p>In the following snippet:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">data</span> is the data provided by the user during callback registration.</li>
+<li><span style="font-family: Courier New,Courier,monospace">obj</span> is the handle to the object on which the event occurred.</li>
+<li><span style="font-family: Courier New,Courier,monospace">event_info</span> is the data the object wants to pass to the callback function.</li>
+</ul>
+
+<pre class="prettyprint">static void
+rotation_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ Elm_Object_Item *it;
+ const char *str = NULL;
+ ad->current_degree = elm_win_rotation_get(obj);
+
+ it = elm_toolbar_selected_item_get(ad->tabbar);
+ str = elm_object_item_text_get(it);
+
+ if (ad->current_degree != 0 && ad->current_degree != 180 && !strcmp(str, "World Clock"))
+ {
+ elm_grid_pack_set(ad->vd->label1, 33, 16, 100, 100);
+ elm_grid_pack_set(ad->vd->label2, 40, 58, 100, 100);
+ elm_grid_pack_set(ad->vd->label3, 41, 69, 100, 100);
+ }
+ else
+ tabbar_item_selected(ad, it);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_landscape_alarm_view()</span> function creates the content of the main view.</p>
+<p>A box containing box and button objects is created and added to the naviframe.</p>
+<p>A box containing grid objects is created and added to the outer box container.</p>
+<p>A grid containing label and image objects is created and added to the inner box container. Each object in the grid has its own relative coordinates for positioning.</p>
+<p>A button is created and added to the outer box container.</p>
+
+<pre class="prettyprint">static Evas_Object *
+create_landscape_alarm_view(appdata_s *ad)
+{
+ Evas_Object *box1, *box2, *label1, *label2, *label3, *img, *bg1, *bg2, *grid1, *grid2, *btn;
+
+ box1 = elm_box_add(ad->nf);
+ evas_object_size_hint_weight_set(box1, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ ...
+ ...
+ ...
+ elm_box_pack_end(box1, box2);
+ elm_box_pack_end(box1, btn);
+
+ return box1;
+}
+</pre>
+
+ <h2>World Clock View</h2>
+
+ <p>The following figure illustrates the World clock view. The wireframe and UI component tree are similar to the normal view. In this case, no separate up function is needed for the landscape view.</p>
+
+ <p class="figure">Figure: World clock view</p>
+ <p align="center"><img alt="World clock view" src="../images/ui_clock_sd_world_clock.png" /></p>
+ <p align="center"><img alt="World clock view" src="../images/ui_clock_sd_world_clock_ls.png" /></p>
+ <p align="center"><img alt="World clock view" src="../images/ui_clock_sd_world_clock_tree.png" /></p>
+
+<p>The grid object minimum height value has been set. A scroller is automatically added in the list.</p>
+
+<pre class="prettyprint"> grid1 = elm_grid_add(box);
+ evas_object_size_hint_weight_set(grid1, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(grid1, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_size_hint_min_set(grid1, -1, 265);
+ evas_object_show(grid1);
+</pre>
+
+<p>In the landscape view, the relative coordinate values of the grid items change.
+To ensure that the view can be maintained, rearrange the items.
+</p>
+
+<pre class="prettyprint"> if (ad->current_degree == 0 || ad->current_degree == 180)
+ {
+ elm_grid_pack(grid1, label1, 22, 17, 100, 100);
+ elm_grid_pack(grid1, label2, 35, 62, 100, 100);
+ elm_grid_pack(grid1, label3, 36, 73, 100, 100);
+ }
+ else
+ {
+ elm_grid_pack(grid1, label1, 33, 16, 100, 100);
+ elm_grid_pack(grid1, label2, 40, 58, 100, 100);
+ elm_grid_pack(grid1, label3, 41, 69, 100, 100);
+ }
+</pre>
+
+ <h2>Timer View</h2>
+
+ <p>The following figure illustrates the Timer view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: Timer view</p>
+ <p align="center"><img alt="Timer view" src="../images/ui_clock_sd_timer.png" /></p>
+ <p align="center"><img alt="Timer view" src="../images/ui_clock_sd_timer_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_timer_view()</span> function creates the content of the main view.</p>
+<p>A box containing grid and button objects is created and added to the naviframe.</p>
+<p>A grid containing label and table objects is created and added to the inner box container. Each object in the grid has its own relative coordinates for positioning. A table is created and added to the grid container.</p>
+
+<pre class="prettyprint">table = elm_table_add(grid2);
+ evas_object_show(table);
+ elm_table_padding_set(table, 5, 5);
+ elm_table_homogeneous_set(table, EINA_TRUE);
+
+
+ index = 0;
+ for (i = 0; i < 2; i++)
+ {
+ for (j = 0; j < 6; j++)
+ {
+ index++;
+ if (index == 6)
+ snprintf(buf, sizeof(buf), "%s", "<font_size=50>Del</font_size>");
+ else if (index == 11)
+ snprintf(buf, sizeof(buf), "%s", "<font_size=50>0</font_size>");
+ else if (index == 12)
+ snprintf(buf, sizeof(buf), "%s", "<font_size=40>Start</font_size>");
+ else
+ {
+ if (index > 6)
+ snprintf(buf, sizeof(buf), "%s%d%s", "<font_size=50>", index -1, "</font_size>");
+ else
+ snprintf(buf, sizeof(buf), "%s%d%s", "<font_size=50>", index, "</font_size>");
+ }
+ btn = create_btn(grid2, buf);
+ elm_table_pack(table, btn, j, i, 1, 1);
+ }
+ }
+
+ elm_grid_pack(grid2, table, 0, 0, 100, 100);
+</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
--- /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 Sample Overview</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"/></p>
+ </div>
+
+ <h1>UI Components Sample Overview</h1>
+ <p>The UI Components (Elementary) sample application demonstrates how to implement an interactive application GUI using basic components, such as a button, entry, and popup.</p>
+
+ <p>The following figure illustrates some of the screens of the UI Components.</p>
+
+ <p class="figure">Figure: UI Components screens</p>
+ <p align="center"><img alt="UI Components screens" src="../images/uicomponents_sd.png" /></p>
+
+<p>The application opens with the Tizen UI main screen, which displays a list of UI components. To access UI component functionalities, click a list item.</p>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">button.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">button.edc</span></td>
+ <td>This file creates and initializes a view, which displays the button components. You can view and test various button styles.
+ <p>The file contains code for handling the user events related to buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">check.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">check.edc</span></td>
+ <td>This file creates and initializes a view, which displays the check button components. You can view and test various check button styles.
+ <p>The file contains code for handling user events related to check buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">colorselector.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">colorselector.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Colorselector screen. You can view and test the color selector.
+ <p>The file contains code for handling user events related to the color selector and images.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ctxpopup.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">ctxpopup.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Ctxpopup. You can view and test the ctxpopup usage.
+ <p>The file contains code for handling user events related to key events and ctxpopup.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">datetime.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">datetime.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Datetime styles and picker. You can view and test changing the time and date with the picker.
+ <p>The file contains code for handling user events related to the Datetime picker.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">drawer.c</span></td>
+ <td>This file creates and initializes a view, which displays a drawer implemented using the Panel component. You can press the left edge of the screen to enable the drawer.
+ <p>The file contains code for handling user events related to the drawer.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">entry.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">entry.edc</span></td>
+ <td>This file creates and initializes a view, which displays the entry components. You can view and test various entry styles.
+ <p>The file contains code for setting entry style properties.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">fastscroll.c</span></td>
+ <td>This file creates and initializes a view, which displays the fastscroll implemented using the Index component. You can view and test the fastscroll usage.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">gengrid.c</span></td>
+ <td>This file creates and initializes a view, which displays the Gengrid components. You can view and test various grid styles.
+ <p>The file contains code for handling user events related to grids, including changing the grid style using the menu key.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">genlist.c</span></td>
+ <td>This file creates and initializes a view, which displays the Genlist components. You can view and test various list styles, such as group index, 1 line, and multiline.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">handler.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">handler.edc</span></td>
+ <td>This file creates and initializes a view, which displays a vertical or horizontal scroller. You can select the scroller from a list.
+ <p>The file contains code for implementing scroller styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">main.c</span></td>
+ <td>This file creates and initializes a view, which displays the main UI component list.
+ <p>The file contains code for constructing the Window, Conformant, Layout, and Naviframe, and event registrations related to the application life-cycle.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">multibuttonentry.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">multibuttonentry.edc</span></td>
+ <td>This file creates and initializes a view, which displays a Multibuttonentry component.
+ <p>The file contains code for handling user events related to the Multibuttonentry component, such as modifying sizes, states, and items.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">nocontents.c</span></td>
+ <td>This file creates and initializes a view, which displays no content.
+ <p>The file contains code for creating views with no content.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pagecontrol.c</span></td>
+ <td>This file creates and initializes a view, which has entry points for horizontal and horizontal looping using the Pagecontrol component.
+ <p>The file contains code for scrolling pages.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pagecontrol_horizontal.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">pagecontrol.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Pagecontrol component.
+ <p>The file contains code for scrolling pages.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">pagecontrol_horizontal_loop.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">pagecontrol.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Pagecontrol component.
+ <p>The file contains code for loop-scrolling pages.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">popup.c</span></td>
+ <td>This file creates and initializes a view, which displays the Popup component. You can view and test various pop-up styles.
+ <p>The file contains code for handling user events related to pop-ups, such as opening and closing a pop-up, and setting pop-up styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">progressbar.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">progressbar.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Progressbar component. You can view and test progress bar usage.
+ <p>The file contains code for handling user events related to progress bars, such as timing and deleting the progress bar.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">radio.c</span><br/>
+ <span style="font-family: Courier New,Courier,monospace">radio.edc</span></td>
+ <td>This file creates and initializes a view, which displays the Radio button component. You can view and test various radio button styles.
+ <p>The file contains code for handling user events related to radio buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">slider.c</span></td>
+ <td>This file creates and initializes a view, which displays the Slider component. You can view and test various slider styles.
+ <p>The file contains code for setting slider styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar.c</span></td>
+ <td>This file creates and initializes a view, which has entry points for Tabbar and Navigationbar components. You can view and test tab and navigation list item styles.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_tab.c</span></td>
+ <td>This file creates and initializes a view, which displays the Tabbar component.
+ <p>The file contains code for setting tab bar styles using the Toolbar component.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">toolbar_navigationbar.c</span></td>
+ <td>This file creates and initializes a view, which displays the Navigationbar component.
+ <p>The file contains code for setting navigation bar styles using the Toolbar component.</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>
\ 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 Sample] Ecore Thread 1 Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Ecore Thread 1 Sample Overview</h1>
+<p>The Ecore Thread 1 sample demonstrates how to move a button using EFL thread-related functions. The functions act on the Ecore main loop itself or on events and infrastructures directly linked to it. </p>
+
+<p>The following figure illustrates the Ecore Thread 1 sample screen.
+</p>
+
+<p class="figure">Figure: Ecore Thread 1 screen</p>
+<p align="center"><img alt="Ecore Thread 1 screen" src="../images/ecore_thread_1.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates a thread using the <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> function and registering a <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> callback function while passing a button to the callback.</p>
+
+<pre class="prettyprint">
+#include <Elementary.h>
+#include <pthread.h>
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ Evas_Object *btn;
+
+ // Create a button
+ btn = elm_button_add(ad->win);
+ elm_object_text_set(btn, "Ecore</br>Thread</br>Main</br>Loop");
+ evas_object_resize(btn, 100, 100);
+ evas_object_show(btn);
+
+ // Create a thread
+ if (!pthread_create(&thread_id, NULL, thread_run, btn))
+ perror("pthread_create!\n");
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_main_loop_begin()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_thread_main_loop_end()</span> functions allow you to call the <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> function in critical sections. The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_main_loop_begin()</span> function can block the section for a while, and mutual exclusion is performed in the main loop. </p>
+
+<pre class="prettyprint">
+static void *thread_run(void *arg)
+{
+ Evas_Object *btn = arg;
+ double t = 0.0;
+ Evas_Coord x, y;
+
+ while (!thread_finish)
+ {
+ x = 150 + (150 * sin(t));
+ y = 150 + (150 * cos(t));
+
+ // Begin critical section
+ ecore_thread_main_loop_begin();
+ {
+ evas_object_move(btn, x, y);
+ }
+ // End critical section
+ ecore_thread_main_loop_end();
+
+ usleep(1000);
+ t += 0.001;
+ }
+
+ pthread_exit(NULL);
+
+ return NULL;
+}
+
+static void win_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ void *thread_result;
+ thread_finish = EINA_TRUE;
+ pthread_join(thread_id, &thread_result);
+ elm_exit();
+}
+</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
--- /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 Sample] Ecore Thread 2 Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Ecore Thread 2 Sample Overview</h1>
+<p>The Ecore Thread 2 sample demonstrates how you can design threads to work together with the Ecore main loop by considering synchronization and mutual exclusion.</p>
+
+<p>The sample uses <span style="font-family: Courier New,Courier,monospace;">pthread</span> functions, such as <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> for creating a thread and <span style="font-family: Courier New,Courier,monospace;">pthread_exit()</span> for exiting the thread. It also uses the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function for applying thread-safe. The thread moves a button (Evas object) by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> function.</p>
+
+<p>The following figure illustrates the main screen of the Ecore Thread 2 sample app.</p>
+
+<p class="figure">Figure: Ecore Thread 2 screen</p>
+<p align="center"><img alt="Ecore Thread 2 screen" src="../images/ecore_thread_2.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window which consists of a button (Evas object). It also creates a thread by using the <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> function. </p>
+
+<p>A parameter of the <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> function is the <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> callback. In the <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> callback, the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> function is used with the <span style="font-family: Courier New,Courier,monospace;">thread_safe_call_sync_cb()</span> callback. The <span style="font-family: Courier New,Courier,monospace;">thread_safe_call_sync_cb()</span> callback is in the critical section, to make threads safe for the main loop.</p>
+
+<pre class="prettyprint">
+#include <pthread.h>
+
+static pthread_t thread_id;
+static Eina_Bool thread_finish = EINA_FALSE;
+
+typedef struct user_data
+{
+ Evas_Object *btn;
+ Evas_Coord x, y;
+} user_data;
+
+void *
+thread_safe_call_sync_cb(void *data)
+{
+ // This function is in critical section
+
+ user_data *ud = data;
+ evas_object_move(ud->btn, ud->x, ud->y);
+
+ // Return value passes to ecore_main_loop_thread_safe_call_sync() return value
+ return NULL;
+}
+
+static void *
+thread_run(void *arg)
+{
+ Evas_Object *btn = arg;
+ double t = 0.0;
+ Evas_Coord x, y;
+
+ while (!thread_finish)
+ {
+ x = 150 + (150 * sin(t));
+ y = 200 + (150 * cos(t));
+
+ user_data data;
+ data.btn = btn;
+ data.x = x;
+ data.y = y;
+ ecore_main_loop_thread_safe_call_sync(thread_safe_call_sync_cb, &data);
+ usleep(1000);
+ t += 0.001;
+ }
+
+ pthread_exit(NULL);
+
+ return NULL;
+}
+
+static void
+win_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ void *thread_result;
+ thread_finish = EINA_TRUE;
+ pthread_join(thread_id, &thread_result);
+ elm_exit();
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ elm_win_wm_rotation_available_rotations_set(ad->win, (const int *)(&rots), 4);
+ }
+
+ evas_object_smart_callback_add(ad->win, "delete,request", win_del_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);
+
+ // ecore_main_loop_thread_safe_call_sync()
+ Evas_Object *btn;
+
+ // Create a button
+ btn = elm_button_add(ad->conform);
+ elm_object_text_set(btn, "Thread<br>Safe<br>Sync");
+ evas_object_resize(btn, 150, 200);
+ evas_object_show(btn);
+
+ // Create a thread
+ if (!pthread_create(&thread_id, NULL, thread_run, btn))
+ perror("pthread_create!\n");
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] Ecore Thread 3 Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Ecore Thread 3 Sample Overview</h1>
+<p>The Ecore Thread 3 sample demonstrates how you can design threads to work together with the Ecore main loop by considering asynchronization and mutual exclusion.</p>
+<p>The sample uses the <span style="font-family: Courier New,Courier,monospace;">pthread</span> functions, such as <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> for creating a thread and <span style="font-family: Courier New,Courier,monospace;">pthread_exit()</span> for exiting the thread. It also uses the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function for applying thread-safe. The thread moves a button (Evas object) by using the <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> function.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function call is returned immediately, like "Fire and Forgot". The <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function has no thread blocking, since its callback is queued and performed asynchronously, whereas <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_sync()</span> does have blocking.</p>
+<p>The following figure illustrates the main screen of the Ecore Thread 3 sample app.</p>
+
+<p class="figure">Figure: Ecore Thread 3 screen</p>
+<p align="center"><img alt="Ecore Thread 3 screen" src="../images/ecore_thread_3.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window which consists of a button (Evas object). It also creates a thread by using the <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> function. </p>
+<p>A parameter of the <span style="font-family: Courier New,Courier,monospace;">pthread_create()</span> function is the <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> callback. In the <span style="font-family: Courier New,Courier,monospace;">thread_run()</span> callback, the <span style="font-family: Courier New,Courier,monospace;">ecore_main_loop_thread_safe_call_async()</span> function is used with the <span style="font-family: Courier New,Courier,monospace;">thread_safe_call_async_cb()</span> callback. The <span style="font-family: Courier New,Courier,monospace;">thread_safe_call_async_cb()</span> callback is in the critical section, to make threads safe for the main loop.
+</p>
+
+<pre class="prettyprint">
+#include <pthread.h>
+
+static pthread_t thread_id;
+static pthread_mutex_t lock;
+static Eina_Bool thread_finish = EINA_FALSE;
+
+typedef struct user_data
+{
+ Evas_Object *btn;
+ Evas_Coord x, y;
+} user_data;
+
+static void
+thread_safe_call_async_cb(void *data)
+{
+ // This function is in critical section
+
+ user_data *ud = data;
+ evas_object_move(ud->btn, ud->x, ud->y);
+}
+
+static void *
+thread_run(void *arg)
+{
+ Evas_Object *btn = arg;
+ double t = 0.0;
+ Evas_Coord x, y;
+
+ while (1)
+ {
+ x = 150 + (150 * sin(t));
+ y = 200 + (150 * cos(t));
+
+ user_data data;
+ data.btn = btn;
+ data.x = x;
+ data.y = y;
+ // Now no need to wait for synchronizing main loop here
+ ecore_main_loop_thread_safe_call_async(thread_safe_call_async_cb, &data);
+ usleep(1000);
+ t += 0.001;
+
+ // Mutual exclusive for shared data
+ pthread_mutex_lock(&lock);
+ if (thread_finish) break;
+ pthread_mutex_unlock(&lock);
+ }
+
+ pthread_exit(NULL);
+
+ return NULL;
+}
+
+static void
+win_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ void *thread_result;
+
+ // Mutual exclusive for shared data
+ pthread_mutex_lock(&lock);
+ thread_finish = EINA_TRUE;
+ pthread_mutex_unlock(&lock);
+
+ pthread_join(thread_id, &thread_result);
+ elm_exit();
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // ecore_main_loop_thread_safe_call_async()
+ Evas_Object *btn;
+ evas_object_smart_callback_add(ad->win, "delete,request", win_del_cb, NULL);
+
+ // Create a button
+ btn = elm_button_add(ad->conform);
+ elm_object_text_set(btn, "Thread<br>Safe<br>Async");
+ evas_object_resize(btn, 150, 200);
+ evas_object_show(btn);
+
+ // Create a thread
+ if (!pthread_create(&thread_id, NULL, thread_run, btn))
+ perror("pthread_create!\n");
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] Ecore Thread 4 Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Ecore Thread 4 Sample Overview</h1>
+<p>The Ecore Thread 4 sample demonstrates how to move a button using EFL thread feedback functions. If EFL APIs are called in the <span style="font-family: Courier New,Courier,monospace;">Ecore_Thread</span>, use the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function instead of <span style="font-family: Courier New,Courier,monospace;">ecore_thread_run()</span>. </p>
+
+<p>The following figure illustrates the Evas thread feedback in the Ecore Thread 4 screen. </p>
+
+<p class="figure">Figure: Ecore Thread 4 screen</p>
+<p align="center"><img alt="Ecore Thread 4 screen" src="../images/ecore_thread_4.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function utilizes the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function to allow the <span style="font-family: Courier New,Courier,monospace;">thread_run_cb()</span> function to call the <span style="font-family: Courier New,Courier,monospace;">thread_feedback_cb</span> function.</p>
+
+<pre class="prettyprint">
+#include <Elementary.h>
+
+typedef struct user_data
+{
+ Evas_Object *obj;
+ Evas_Coord x, y;
+} user_data;
+
+static void create_base_gui(appdata_s *ad)
+{
+ // 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ Evas_Object *btn;
+ Ecore_Thread *thread;
+
+ // Create a button
+ btn = elm_button_add(ad->win);
+ elm_object_text_set(btn, "Ecore</br>Thread</br>Main</br>Loop");
+ evas_object_resize(btn, 200, 200);
+ evas_object_show(btn);
+
+ // Create a thread
+ thread = ecore_thread_feedback_run(thread_run_cb, thread_feedback_cb,
+ thread_end_cb, thread_cancel_cb, btn,
+ EINA_FALSE);
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function allows the <span style="font-family: Courier New,Courier,monospace;">thread_run_cb()</span> callback to call the <span style="font-family: Courier New,Courier,monospace;">thread_feedback_cb</span> callback. </p>
+
+<pre class="prettyprint">
+static void
+thread_run_cb(void *data, Ecore_Thread *thread)
+{
+ double t = 0.0;
+ Evas_Coord x, y;
+ Evas_Object *btn = data;
+
+ while (1)
+ {
+ x = 150 + (150 * sin(t));
+ y = 150 + (150 * cos(t));
+
+ user_data *ud = malloc(sizeof(user_data));
+ ud->obj = btn;
+ ud->x = x;
+ ud->y = y;
+
+ // After recording the time point, pass it as feedback back to the
+ // mainloop and free data when done
+ ecore_thread_feedback(thread, ud);
+
+ usleep(1000);
+ t += 0.001;
+
+ // In case thread must be canceled, cancel this
+ // loop co-operatively (canceling is co-operative)
+ if (ecore_thread_check(thread)) break;
+ }
+}
+
+static void
+thread_feedback_cb(void *data, Ecore_Thread *thread, void *msg)
+{
+ // This function is in critical section
+ user_data *ud = msg;
+ evas_object_move(ud->obj, ud->x, ud->y);
+ free(ud);
+}
+
+static void
+thread_end_cb(void *data, Ecore_Thread *thread)
+{
+ printf("thread end!\n");
+}
+
+static void
+thread_cancel_cb(void *data, Ecore_Thread *thread)
+{
+ printf("thread cancel!\n");
+}
+
+static void
+win_del_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Ecore_Thread *thread = data;
+
+ elm_exit();
+}
+</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
--- /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 Sample] Ecore Thread 5 Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Ecore Thread 5 Sample Overview</h1>
+<p>The Ecore Thread 5 sample demonstrates how to use the multi-thread functionality by EAPI.</p>
+<p>The following figure illustrates the main screen of the Ecore Thread 5 sample.</p>
+
+<p class="figure">Figure: Ecore Thread 5 screen</p>
+<p align="center"><img alt="Ecore Thread 5 screen" src="../images/ecore_thread_5.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<pre class="prettyprint">
+typedef struct user_data
+{
+ Evas_Object *obj;
+ int *pixel;
+} user_data;
+
+static void
+thread_run_cb(void *data, Ecore_Thread *thread)
+{
+ user_data *ud = data;
+
+ // Mandel calc is run in the worker threads so it is here
+ // to calculate something and consume cpu to demonstrate the
+ // Ecore thread worker queue. Do not pay much attention to the below code
+ double x, xx, y, cx, cy, cox, coy;
+ int iteration, hx, hy, val, r, g, b, rr, gg, bb;
+ int itermax = 10000;
+ double magnify = 0.02;
+ int w, h;
+
+ evas_object_image_size_get(ud->obj, &w, &h);
+
+ magnify += ((double)(rand() % 100) / 100.0) / 4.0;
+ cox = (double)(rand() % 100) / 100.0;
+ coy = (double)(rand() % 100) / 100.0;
+ cox /= (magnify * 3.0);
+ r = rand() % 255; g = rand() % 255; b = rand() % 255;
+ for (hy = 0; hy < h; hy++)
+ {
+ for (hx = 0; hx < w; hx++)
+ {
+ cx = (((float)hx) / ((float)w) - 0.5) / (magnify * 3.0);
+ cy = (((float)hy) / ((float)h) - 0.5) / (magnify * 3.0);
+ cx += cox;
+ cy += coy;
+ x = 0.0;
+ y = 0.0;
+
+ for (iteration = 1; iteration < itermax; iteration++)
+ {
+ xx = (x * x) - (y * y) + cx;
+ y = (2.0 * x * y) + cy;
+ x = xx;
+
+ if (((x * x) + (y * y)) > 100.0) iteration = 999999;
+ }
+
+ val = (((x * x) + (y * y)) * 2.55) / 100.0;
+
+ if (val > 255) val = 255;
+ if (iteration >= 99999)
+ {
+ rr = (r * val) / 255;
+ gg = (g * val) / 255;
+ bb = (b * val) / 255;
+ ud->pixel[(hy * w) + hx] = (val << 24) | (rr << 16) | (gg << 8) | (bb);
+ }
+ else
+ ud->pixel[(hy * w) + hx] = 0xffffffff;
+ }
+ }
+}
+
+static void
+thread_end_cb(void *data, Ecore_Thread *thread)
+{
+ user_data *ud = data;
+ Evas_Coord w, h;
+
+ // Update image data; since thread_end_cb() is called from the main loop thread,
+ // you can access EAPI without considering synchronization
+ evas_object_image_size_get(ud->obj, &w, &h);
+ evas_object_image_data_copy_set(ud->obj, ud->pixel);
+ evas_object_image_data_update_add(ud->obj, 0, 0, w, h);
+
+ free(ud->pixel);
+ free(ud);
+}
+
+static void
+thread_cancel_cb(void *data, Ecore_Thread *thread)
+{
+ user_data *ud = data;
+
+ free(ud->pixel);
+ free(ud);
+}
+
+static void
+mouse_down_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ user_data *ud = calloc(1, sizeof(user_data));
+ ud->obj = obj;
+ ud->pixel = malloc(256 * 256 * sizeof(int));
+
+ // Run a thread
+ ecore_thread_run(thread_run_cb, thread_end_cb, thread_cancel_cb, ud);
+}
+
+void
+ecore_thread_run_exam(Evas_Object *win)
+{
+ Evas_Object *img;
+
+ // Create an image
+ img = evas_object_image_filled_add(evas_object_evas_get(win));
+ evas_object_event_callback_add(img, EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, NULL);
+ evas_object_image_size_set(img, 256, 256);
+ evas_object_size_hint_weight_set(img, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(img);
+
+ elm_win_resize_object_add(win, img);
+}
+</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
--- /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 Sample] EcoreEvent Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] EcoreEvent Sample Overview</h1>
+<p>The EcoreEvent sample demonstrates how to create an event handler using EFL Ecore event functions. In addition, it supports signals, such as <span style="font-family: Courier New,Courier,monospace;">ECORE_EVENT_SIGNAL_EXIT</span>, <span style="font-family: Courier New,Courier,monospace;">ECORE_EVENT_SIGNAL_POWER</span>, and <span style="font-family: Courier New,Courier,monospace;">ECORE_EVENT_SIGNAL_REALTIME</span>.</p>
+<p>The sample uses Ecore event functions, such as <span style="font-family: Courier New,Courier,monospace;">ecore_event_handler_add()</span> for adding an event handler. The event handler calls the given callback function.</p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window that does not do anything in this sample application. However, it contains an event function and you can see it working when a given signal is triggered.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_quitter(void *data EINA_UNUSED, int ev_type EINA_UNUSED, void *event EINA_UNUSED)
+{
+ dlog_print(DLOG_INFO, "USR_TAG", "Leaving already?");
+
+ return ECORE_CALLBACK_DONE;
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Event
+ ecore_event_handler_add(ECORE_EVENT_SIGNAL_EXIT, _quitter, NULL);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] EDCformat Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] EDCformat Sample Overview</h1>
+
+<p>The [UI Sample] EDCformat sample application demonstrates how to use basic EDC blocks, such as <span style="font-family: Courier New,Courier,monospace;">group</span> compositions of <span style="font-family: Courier New,Courier,monospace;">images</span>, <span style="font-family: Courier New,Courier,monospace;">parts</span>, and <span style="font-family: Courier New,Courier,monospace;">programs</span>, how to load an image, and how to use an event to change the image to another image.</p>
+
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace;">elm_conformant</span>, for view management, containers, such as <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, for UI component management inside the view, and the <span style="font-family: Courier New,Courier,monospace;">IMAGE</span> type (an EDC keyword) for the contents of the EDC view.</p>
+
+<p>The following figure illustrates the main screen of the sample, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] EDCformat main screen</p>
+<p align="center"><img alt="[UI Sample] EDCformat main screen" src="../images/edc_format_main.png" /></p>
+
+<p align="center"><img alt="[UI Sample] EDCformat UI component tree" src="../images/edc_main_tree.png" /></p>
+
+<h2 id="layout" name="layout">Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window, conformant, and layout. The EDC file is then inserted into the layout.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Create window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Create 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 base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ ad->layout = elm_layout_add(ad->win);
+ elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->layout);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<h2 id="view" name="view">EDC View</h2>
+
+<p>The following figure illustrates the EDC view wireframe and tree structure.</p>
+
+<p class="figure">Figure: EDC view</p>
+<p align="center"><img alt="EDC view" src="../images/edc_format_view_contents_wire_tree.png" /></p>
+
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">edcformat.edc</span> file is used to set an image to the EDC view. The file defines simple EDC blocks, such as a <span style="font-family: Courier New,Courier,monospace;">group</span>, <span style="font-family: Courier New,Courier,monospace;">parts</span>, <span style="font-family: Courier New,Courier,monospace;">descriptions</span>, and <span style="font-family: Courier New,Courier,monospace;">programs</span>.</p>
+
+<p>The following code is the entire EDC script of the <span style="font-family: Courier New,Courier,monospace;">edcformat.edc</span> file:</p>
+
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ images
+ {
+ image: "before.png" COMP;
+ image: "after.png" COMP;
+ }
+ parts
+ {
+ part
+ {
+ name: "base_frame";
+ type: IMAGE;
+ scale: 1;
+ mouse_events: 1;
+ description
+ {
+ state: "default" 0.0;
+ align: 0.5 0.5;
+ rel1 { relative: 0.0 0.0; offset: 0 0;}
+ rel2 { relative: 1.0 1.0; offset: -1 -1;}
+ image
+ {
+ normal: "before.png";
+ }
+ }
+ description
+ {
+ state: "changed" 0.0;
+ align: 0.5 0.5;
+ rel1 { relative: 0.0 0.0; offset: 0 0;}
+ rel2 { relative: 1.0 1.0; offset: -1 -1;}
+ image
+ {
+ normal: "after.png";
+ }
+ }
+ }
+ }
+ programs
+ {
+ program
+ {
+ name: "change_state";
+ signal: "mouse,clicked,1";
+ source: "base_frame";
+ action: STATE_SET "changed" 0.0;
+ target: "base_frame";
+ }
+ }
+ }
+}
+</pre>
+
+<p>In the code:</p>
+
+<ul>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">group</span> block consists of <span style="font-family: Courier New,Courier,monospace">images</span>, <span style="font-family: Courier New,Courier,monospace">parts</span>, and <span style="font-family: Courier New,Courier,monospace">programs</span>. The <span style="font-family: Courier New,Courier,monospace">group</span> block is used to define the main EDC view and its functions.</p></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">images</span> block is used to load images for this sample.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">parts</span> block represents the main EDC view and can consist of more than one <span style="font-family: Courier New,Courier,monospace">part</span>. A <span style="font-family: Courier New,Courier,monospace">part</span> is used for a component of the main EDC view. This sample uses only 1 <span style="font-family: Courier New,Courier,monospace">part</span>.</p></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">part</span> block contains the <span style="font-family: Courier New,Courier,monospace">name</span>, <span style="font-family: Courier New,Courier,monospace">type</span>, <span style="font-family: Courier New,Courier,monospace">scale</span>, and <span style="font-family: Courier New,Courier,monospace">mouse_events</span> properties. The <span style="font-family: Courier New,Courier,monospace">name</span> property represents the <span style="font-family: Courier New,Courier,monospace">part</span>, while the <span style="font-family: Courier New,Courier,monospace">type</span> property represents the <span style="font-family: Courier New,Courier,monospace">part</span> type, such as <span style="font-family: Courier New,Courier,monospace">RECT</span>, <span style="font-family: Courier New,Courier,monospace">TEXT</span>, <span style="font-family: Courier New,Courier,monospace">IMAGE</span>, or <span style="font-family: Courier New,Courier,monospace">SWALLOW</span>. The <span style="font-family: Courier New,Courier,monospace">scale</span> property defines the scale of the <span style="font-family: Courier New,Courier,monospace">part</span>, and the <span style="font-family: Courier New,Courier,monospace">mouse_events</span> property defines, whether mouse click events are received.</p></li>
+
+<li><p> The <span style="font-family: Courier New,Courier,monospace">description</span> block the properties of the <span style="font-family: Courier New,Courier,monospace">part</span>. You can use more than one <span style="font-family: Courier New,Courier,monospace">description</span> in a <span style="font-family: Courier New,Courier,monospace">part</span>. In the <span style="font-family: Courier New,Courier,monospace">description</span>, the <span style="font-family: Courier New,Courier,monospace">state</span> property defines the representation of the <span style="font-family: Courier New,Courier,monospace">description</span>. The <span style="font-family: Courier New,Courier,monospace">align</span> property defines the position of the <span style="font-family: Courier New,Courier,monospace">part</span> in its parent container. The <span style="font-family: Courier New,Courier,monospace">rel1</span> and <span style="font-family: Courier New,Courier,monospace">rel2</span> are the positions of the top-left and bottom-right corners of the <span style="font-family: Courier New,Courier,monospace">part</span>'s container. The <span style="font-family: Courier New,Courier,monospace">image</span> block defines the main image of the <span style="font-family: Courier New,Courier,monospace">part</span>.</p></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">programs</span> block consists of <span style="font-family: Courier New,Courier,monospace">program</span>s. A <span style="font-family: Courier New,Courier,monospace">program</span> is typically used for an event, action, or animation. In this sample, the <span style="font-family: Courier New,Courier,monospace">program</span> block is used to assign a mouse click event and state change action to the <span style="font-family: Courier New,Courier,monospace">base_frame</span>. When the user clicks the main EDC view, a mouse click event occurs, which changes the state of the <span style="font-family: Courier New,Courier,monospace">base_frame</span> from <span style="font-family: Courier New,Courier,monospace">default</span> to <span style="font-family: Courier New,Courier,monospace">changed</span>, and then changes the image from <span style="font-family: Courier New,Courier,monospace">before.png</span> to <span style="font-family: Courier New,Courier,monospace">after.png</span>.</p></li>
+</ul>
+
+<p class="figure">Figure: Image change</p>
+<p align="center"><img alt="Image change" src="../images/edc_format_change_image.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>
+
+</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 Sample] EDC Map Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] EDC Map Sample Overview</h1>
+<p>The EDC Map sample demonstrates how to implement 3D effects using the EDC map. Its functionalities are the same with the <span style="font-family: Courier New,Courier,monospace;">Evas_Map</span> object.</p>
+<p>The following figure illustrates the main screen of the EDC Map.</p>
+
+<p class="figure">Figure: EDC Map screen</p>
+<p align="center"><img alt="EDC Map screen" src="../images/edc_map.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>A part of the EDC file must have a map as an effect in the description. In the map of an effect:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace;">on</span> enables mapping for the part</li>
+<li><span style="font-family: Courier New,Courier,monospace;">rotation.z</span> sets the rotation around the z axis of the part considering the center set in degrees</li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective_on</span> enables the perspective effect</li>
+<li><span style="font-family: Courier New,Courier,monospace;">perspective</span> adds a focal and plane perspective to the part</li>
+<li><span style="font-family: Courier New,Courier,monospace;">backface_cull</span> enables backface culling</li></ul>
+
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ parts
+ {
+ part
+ {
+ name: "perps_point";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 { relative: 0.6 0.1; }
+ rel2 { relative: 0.9 0.4; }
+ visible: 0;
+ }
+ }
+ part
+ {
+ name: "rect";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ rel1 { relative: 0.25 0.25; }
+ rel2 { relative: 0.75 0.75; }
+ color: 0 136 170 255;
+ map
+ {
+ on: 1;
+ rotation.z: 45;
+ perspective_on: 1;
+ perspective: "perps_point";
+ backface_cull: 1;
+ }
+ }
+ }
+ }
+ }
+}
+</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
--- /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 Sample] Elm Transit Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Elm Transit Sample Overview</h1>
+<p>The Elm Transit sample demonstrates how to add the translation and rotation effect on <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>.</p>
+<p>The following figure illustrates the main screen of Elm Transit.</p>
+
+<p class="figure">Figure: Elm Transit screen</p>
+<p align="center"><img alt="Elm Transit screen" src="../images/elmtransit.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The following code snippet shows how to create a transit for an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>. The <span style="font-family: Courier New,Courier,monospace;">elm_transit_add()</span> function creates a transit, and the <span style="font-family: Courier New,Courier,monospace;">elm_transit_object_add()</span> function adds the transit on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span>.</p>
+
+<pre class="prettyprint">
+Evas_Object *btn;
+Elm_Transit *transit;
+
+btn = elm_button_add(win);
+elm_object_text_set(btn, "Elm Transit");
+evas_object_move(btn, 0, 0);
+evas_object_resize(btn, 200, 200);
+evas_object_show(btn);
+
+transit = elm_transit_add();
+elm_transit_object_add(transit, btn);
+</pre>
+
+<p>The following code snippet gives the transit effects, such as translation or rotation. In addition, it enables you to set options for the transit. The <span style="font-family: Courier New,Courier,monospace;">elm_transit_repeat_times_set()</span> function sets the total animation time. The default count is 1, and the number of repeats is 3. So the total number of repeats is 4. The <span style="font-family: Courier New,Courier,monospace;">elm_transit_auto_reverse_set()</span> function sets whether the effect is reversed. If you set the number by 1, the effect is reversed. The <span style="font-family: Courier New,Courier,monospace;">elm_transit_duration_set()</span> function sets the time for how long the effect lasts.</p>
+
+<pre class="prettyprint">
+elm_transit_effect_translation_add(transit,0, 0, 200, 200);
+elm_transit_effect_rotation_add(transit, 0, 180);
+elm_transit_repeat_times_set(transit, 3);
+elm_transit_auto_reverse_set(transit, 1);
+elm_transit_duration_set(transit, 1);
+</pre>
+
+<p>The following code snippet shows how to start the transit. Once the <span style="font-family: Courier New,Courier,monospace;">elm_transit_go()</span> function is called, the transit begins to measure the time.</p>
+
+<pre class="prettyprint">
+elm_transit_go(transit);
+</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
--- /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 Sample] Email Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] Email Sample Overview</h1>
+
+<p>The [UI Sample] Email sample application demonstrates how to implement a complex view by a recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>, <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_list</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">elm_panel</span> for the UI component management inside the view, 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 view.</p>
+
+<h2>Main View</h2>
+
+<p>The following figure illustrates the main view of the [UI Sample] Email sample application, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] Email main view</p>
+ <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view.png" /></p>
+ <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget.png" /></p>
+ <p align="center"><img alt="[UI Sample] Email main view" src="../images/ui_email_sd_main_view_widget2.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window which consists of an indicator (<span style="font-family: Courier New,Courier,monospace">elm_conformant</span>), view manager (<span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), and the content created by using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function. The drawer and compose button are inserted in the naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *btn1, *btn2, *bg;
+ Elm_Object_Item *nf_it;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_wm_desktop_layout_support_set(ad->win, EINA_TRUE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // 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);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+
+ // Indicator BG
+ bg = elm_bg_add(ad>conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad>conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Main view
+ ad->base_ly = create_main_view(ad);
+ elm_object_content_set(ad>conform, ad>base_ly);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->base_ly);
+ eext_object_event_callback_add(ad>nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
+ elm_object_part_content_set(ad->base_ly, "elm.swallow.content", ad->nf);
+ evas_object_show(ad->nf);
+
+ // Genlist
+ ad>genlist = create_genlist(ad>nf);
+
+ nf_it = elm_naviframe_item_push(ad->nf, "In Box", NULL, NULL, ad->genlist, NULL);
+ elm_naviframe_item_pop_cb_set(nf_it, nf_it_pop_cb, ad);
+ elm_object_item_part_text_set(nf_it, "subtitle", user_email);
+
+ // Left panel toggle button
+ btn1 = create_button(ad->nf, "naviframe/drawers", NULL);
+ evas_object_smart_callback_add(btn1, "clicked", _left_panel_button_clicked_cb, ad);
+ elm_object_item_part_content_set(nf_it, "title_left_btn", btn1);
+
+ // Right compose button
+ btn2 = create_button(ad->nf, NULL, "<font_size=20>New</font_size>");
+ evas_object_smart_callback_add(btn2, "clicked", _composer_button_clicked_cb, ad);
+ elm_object_item_part_content_set(nf_it, "title_right_btn", btn2);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the content of the view. First, the base layout is created. The drawer (panel) list and genlist are also created. The drawer and genlist are inserted in the layout. The drawer contains a list.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_main_view(appdata_s *ad)
+{
+ Evas_Object *layout;
+
+ // Drawer layout
+ layout = create_base_layout(ad->conform);
+
+ // Panel
+ ad->panel = create_panel(layout);
+ elm_object_part_content_set(layout, "elm.swallow.left", ad->panel);
+
+ // Panel list
+ ad->panel_list = create_panel_list(ad->panel);
+ evas_object_size_hint_weight_set(ad->panel_list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->panel_list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_smart_callback_add(ad->panel_list, "selected", _list_clicked_cb, ad);
+ elm_object_content_set(ad->panel, ad->panel_list);
+
+ return layout;
+}
+</pre>
+
+The <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function creates a genlist. The genlist has 2 item classes, group item and item.
+<pre class="prettyprint">
+static Evas_Object *
+create_genlist(Evas_Object *parent)
+{
+ ...
+ // Create item class
+ Elm_Genlist_Item_Class *gitc = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+ gitc->item_style = "groupindex";
+ gitc->func.text_get = gl_text_get_cb;
+ gitc->func.content_get = gl_content_get_cb;
+ gitc->func.del = gl_del_cb;
+
+ itc->item_style = "2line.top.3";
+ itc->func.text_get = gl_text_get_cb;
+ itc->func.content_get = gl_content_get_cb;
+ itc->func.del = gl_del_cb;
+
+ genlist = elm_genlist_add(parent);
+
+ ...
+
+ int group_count = 0;
+ for (index = 0; index < n_items; index++)
+ {
+ item_data_s *id = calloc(sizeof(item_data_s), 1);
+ id->index = index;
+ if (index % 10 == 0)
+ {
+ group_count++;
+ id->index = group_count;
+ git = elm_genlist_item_append(genlist, // Genlist object
+ gitc, // Item class
+ id, // Item class user data
+ NULL,
+ ELM_GENLIST_ITEM_GROUP, // Item type
+ gl_selected_cb, // Select smart callback
+ id); // Smart callback user data
+ id->item = git;
+ }
+ else
+ {
+ it = elm_genlist_item_append(genlist, // Genlist object
+ itc, // Item class
+ id, // Item class user data
+ git, // Parent item
+ ELM_GENLIST_ITEM_NONE, // Item type
+ gl_selected_cb, // Select smart callback
+ id); // Smart callback user data
+ id->item = it;
+ }
+ }
+ elm_genlist_item_class_free(gitc);
+ elm_genlist_item_class_free(itc);
+ evas_object_show(genlist);
+
+ return genlist;
+}
+</pre>
+
+<h2>Compose View</h2>
+
+<p>The following figure illustrates the main screen of the Compose view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: Compose view</p>
+ <p align="center"><img alt="Email compose view" src="../images/ui_email_sd_compose_view.png" /></p>
+ <p align="center"><img alt="Email compose UI component tree" src="../images/ui_email_sd_compose_widget_tree.png" /></p>
+
+<pre class="prettyprint">evas_object_smart_callback_add(btn, "clicked", _composer_button_clicked_cb, ad);
+</pre>
+
+<p>In this sample, a smart callback for clicking the compose button is added by default.</p>
+
+<p>The smart callback is called when the compose button is clicked. In this callback, the compose view is created. It consists of a scroller containing a box. The box contains 4 entries. The vertical weight of the box is 0.0, which means that the box resizes to the minimum size.</p>
+<pre class="prettyprint">
+static void
+_composer_button_clicked_cb(void *data, Evas_Object * obj, void *event_info)
+{
+ appdata_s *ad = data;
+ cdata_s *cd = calloc(1, sizeof(cdata_s));
+ cd->ad = ad;
+ Evas_Object *btn, *scroller, *main_box, *myemail, *to, *subject, *content;
+ Elm_Object_Item *nf_it;
+
+ scroller = create_scroller(ad->nf);
+
+ // Append box
+ main_box = create_box(scroller);
+ evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_padding_set(main_box, 0, 30);
+ elm_object_content_set(scroller, main_box);
+
+ // Use email
+ myemail = create_entry(main_box, user_email, NULL);
+ elm_entry_editable_set(myemail, EINA_FALSE);
+ elm_entry_single_line_set(myemail, EINA_TRUE);
+ evas_object_size_hint_weight_set(myemail, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(myemail, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(main_box, myemail);
+
+ // To
+ to = create_entry(main_box, NULL, "To");
+ evas_object_size_hint_weight_set(to, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(to, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(main_box, to);
+ cd->to = to;
+
+ // Subject
+ subject = create_entry(main_box, NULL, "Subject");
+ evas_object_size_hint_weight_set(subject, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(subject, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(main_box, subject);
+ cd->subject = subject;
+
+ // Content
+ content = create_entry(main_box, NULL, "Compose email");
+ evas_object_size_hint_weight_set(content, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(content, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(main_box, content);
+ cd->content = content;
+
+ nf_it = elm_naviframe_item_push(ad->nf, "Compose", NULL, NULL, scroller, NULL);
+
+ // Back button
+ btn = create_button(ad->nf, "naviframe/title_cancel", NULL);
+ evas_object_smart_callback_add(btn, "clicked", _back_button_clicked_cb, cd);
+ elm_object_item_part_content_set(nf_it, "title_left_btn", btn);
+
+ // Send button
+ btn = create_button(ad->nf, "naviframe/title_done", NULL);
+ evas_object_smart_callback_add(btn, "clicked", _send_button_clicked_cb, cd);
+ elm_object_item_part_content_set(nf_it, "title_right_btn", btn);
+}
+</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
--- /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 Sample] Evas Map Mapping Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Evas Map Mapping Sample Overview</h1>
+<p>The Evas Map Mapping sample demonstrates how to apply UV mapping to an Evas object (button) by using EFL Evas map util functions.</p>
+<p>The sample uses functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> for objects to change the map point's coordinate and <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> for objects to change the map point's U and V texture source point.</p>
+<p>The following figure illustrates the main screen of Evas Map Mapping.</p>
+
+<p class="figure">Figure: Evas Map Mapping screen</p>
+<p align="center"><img alt="Evas Map Mapping screen" src="../images/evas_map_mapping.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window which consists of a button added by the <span style="font-family: Courier New,Courier,monospace;">using elm_button_add()</span>, <span style="font-family: Courier New,Courier,monospace;">elm_object_text_set()</span>, <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span>, and <span style="font-family: Courier New,Courier,monospace;">evas_object_resize()</span> functions.</p>
+<p>It gets an Evas map by using the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function. Then the <span style="font-family: Courier New,Courier,monospace;">evas_map_point_coord_set()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_map_point_image_uv_set()</span> functions set the map's coordinates and UV. To apply UV mapping, the <span style="font-family: Courier New,Courier,monospace;">evas_object_map_set()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_map_enable_set()</span> functions are used.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Map
+ Evas_Object *btn;
+ Evas_Map *map;
+
+ // Create a button
+ btn = elm_button_add(ad->conform);
+ elm_object_text_set(btn, "Evas Map<br>");
+ evas_object_move(btn, 100, 150);
+ evas_object_resize(btn, 200, 200);
+ evas_object_show(btn);
+
+ // Create an Evas map
+ map = evas_map_new(4);
+
+ // Set map coordinates
+ evas_map_point_coord_set(map, 0, 150, 100, 0);
+ evas_map_point_coord_set(map, 1, 350, 100, 0);
+ evas_map_point_coord_set(map, 2, 300, 200, 0);
+ evas_map_point_coord_set(map, 3, 100, 400, 0);
+
+ // Set image UV
+ evas_map_point_image_uv_set(map, 0, 0, 50);
+ evas_map_point_image_uv_set(map, 1, 200, 50);
+ evas_map_point_image_uv_set(map, 2, 200, 100);
+ evas_map_point_image_uv_set(map, 3, 0, 100);
+
+ // Apply map to button object
+ evas_object_map_set(btn, map);
+
+ // Free map resource
+ evas_map_free(map);
+
+ // Enable map feature
+ evas_object_map_enable_set(btn, EINA_TRUE);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] Evas Map Rotation Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Evas Map Rotation Sample Overview</h1>
+<p>The Evas Map Rotation sample demonstrates how to rotate a button in 3D using EFL map functions. A map consists of a set of points (currently only 4 are supported). Each of these points contains a set of canvas x and y coordinates that can be used to alter the geometry of the mapped object.</p>
+<p>The following figure illustrates the Evas Map Rotation screen.</p>
+
+<p class="figure">Figure: Evas Map Rotation screen</p>
+<p align="center"><img alt="Evas Map Rotation screen" src="../images/evas_map_rotation.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function draws the button in 3D by creating a button and animating it with the <span style="font-family: Courier New,Courier,monospace;">ecore_animator_add()</span> function. </p>
+
+
+<pre class="prettyprint">
+#include "evasmaprotation.h"
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+ Evas_Object *btn;
+
+ // Create a button
+ btn = elm_button_add(ad->win);
+ elm_object_text_set(btn, "Evas<br>Map<br> Rotation");
+ evas_object_move(btn, 100, 100);
+ evas_object_resize(btn, 300, 300);
+ evas_object_show(btn);
+
+ ecore_animator_add(evas_map_rotation_exam_animator_cb, btn);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">evas_object_geometry_get()</span> function obtains the position of the button. The <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function creates an Evas map and the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function populates the source and destination map points to match the button. The button is rotated and a perspective transform is applied with the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> functions. The <span style="font-family: Courier New,Courier,monospace;">evas_object_map_set()</span> function applies the map to the button object.</p>
+
+<pre class="prettyprint">
+Eina_Bool
+evas_map_rotation_exam_animator_cb(void *data)
+{
+ static int i = 0;
+ Evas_Map *map;
+ Evas_Object *btn = data;
+ Evas_Coord x, y, w, h;
+
+ i++;
+ if (i > 360) i = 0;
+
+ evas_object_geometry_get(btn, &x, &y, &w, &h);
+ // Create an Evas map
+ map = evas_map_new(4);
+ evas_map_util_points_populate_from_object_full(map, btn, 0);
+ evas_map_util_3d_rotate(map, i, 0, 0, x + (w / 2), y + (h / 2), 0);
+ evas_map_util_3d_perspective(map, x + (w / 2), y + (h / 2), 0, 300);
+
+ // Apply map to button object
+ evas_object_map_set(btn, map);
+
+ // Free map resource
+ evas_map_free(map);
+
+ // Enable map feature
+ evas_object_map_enable_set(btn, EINA_TRUE);
+
+ return ECORE_CALLBACK_RENEW;
+}
+</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
--- /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 Sample] Evas Map Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Evas Map Sample Overview</h1>
+<p>The Evas Map sample demonstrates how to display a rectangle and an image which are applied by the Evas map using EFL Evas map util functions.</p>
+<p>The sample uses functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> for objects to rotate the map around 3 axes in 3D and <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> for objects to apply a perspective transform to the map.</p>
+<p>The following figure illustrates the main screen of Evas Map.</p>
+
+<p class="figure">Figure: Evas Map screen</p>
+<p align="center"><img alt="Evas Map screen" src="../images/evas_map.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window which consists of a green rectangle added using the <span style="font-family: Courier New,Courier,monospace;">evas_object_rectangle_add()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_color_set()</span> functions and an image added using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_add()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_image_file_set()</span> functions.</p>
+<p>The rotate function rotates objects around 3 axes in 3D using the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_rotate()</span> function and applies a perspective transform for objects using the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_3d_perspective()</span> function. The Evas map is needed to use these functions. So, the <span style="font-family: Courier New,Courier,monospace;">evas_map_new()</span> function for creating a map consisting of 4 points and the <span style="font-family: Courier New,Courier,monospace;">evas_map_util_points_populate_from_object_full()</span> function for setting the object UV values to the map are used.</p>
+
+<pre class="prettyprint">
+// Rotate any Evas object by using Evas map
+void
+rotate(Evas_Object *obj, double degree)
+{
+ // Create a map consisting of 4 points
+ Evas_Map *map = evas_map_new(4);
+
+ Evas_Coord x, y, w, h;
+
+ // Get the geometry information from the object
+ evas_object_geometry_get(obj, &x, &y, &w, &h);
+
+ // Set the object image UV values to map
+ evas_map_util_points_populate_from_object_full(map, obj, 0);
+
+ // Rotate by 45 degrees on object's local Y axis
+ evas_map_util_3d_rotate(map, 0, degree, 0, x + w / 2, y + h / 2, 0);
+
+ // Set the perspective transform
+ evas_map_util_3d_perspective(map, x + w / 2, y + h / 2, 0, 400);
+
+ // Enable the object map
+ evas_object_map_enable_set(obj, EINA_TRUE);
+
+ // Apply the new map to object
+ evas_object_map_set(obj, map);
+
+ // Free the map resource
+ evas_map_free(map);
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Evas map
+ Evas *evas = evas_object_evas_get(ad->conform);
+ Evas_Object *green_rect = evas_object_rectangle_add(evas);
+ evas_object_color_set(green_rect, 0, 255, 0, 255);
+ evas_object_move(green_rect, 50, 75);
+ evas_object_resize(green_rect, 200, 200);
+ rotate(green_rect, 45);
+ evas_object_show(green_rect);
+
+ char img_path[PATH_MAX] = { 0, };
+ app_get_resource("tizen.png", img_path, PATH_MAX);
+
+ Evas_Object *img = evas_object_image_filled_add(evas);
+ evas_object_image_file_set(img, img_path, NULL);
+ evas_object_move(img, 100, 325);
+ evas_object_resize(img, 356, 96);
+ rotate(img, 45);
+ evas_object_show(img);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] Evas Event Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Evas Event Sample Overview</h1>
+<p>The Evas Event sample demonstrates how to resister a callback function on Evas or an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> for a specific event.</p>
+
+<p>The following figure illustrates the main screen and log of the Evas Event.</p>
+
+<p class="figure">Figure: Evas Event screen and log</p>
+<p align="center"><img alt="Evas Event screen and log" src="../images/evasevent.png" /></p>
+<p align="center"><img alt="Evas Event screen and log" src="../images/evasevent_2.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The following code snippet demonstrates how to register the <span style="font-family: Courier New,Courier,monospace;">_render_flush_cb()</span> function as a callback on an Evas for a given canvas event (<span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_RENDER_FLUSH_PRE</span>) using the <span style="font-family: Courier New,Courier,monospace;">evas_event_callback_add()</span> function.</p>
+
+
+<pre class="prettyprint">
+Evas *evas = evas_object_evas_get(ad->win);
+
+evas_event_callback_add(evas, EVAS_CALLBACK_RENDER_FLUSH_PRE, _render_flush_cb, NULL);
+</pre>
+
+<p>The following code snippet demonstrates how to register the <span style="font-family: Courier New,Courier,monospace;">_on_mousedown()</span> callback on an <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> for a given <span style="font-family: Courier New,Courier,monospace;">Evas_Object</span> event (<span style="font-family: Courier New,Courier,monospace;">EVAS_CALLBACK_MOUSE_DOWN</span>) using the <span style="font-family: Courier New,Courier,monospace;">evas_object_event_callback_add()</span> function.</p>
+
+
+<pre class="prettyprint">
+Evas_Object *rect = evas_object_rectangle_add(evas);
+evas_object_color_set(rect, 0, 255, 0, 255);
+evas_object_move(rect, 0, 0);
+evas_object_resize(rect, 300, 300);
+evas_object_show(rect);
+
+evas_object_event_callback_add(rect, EVAS_CALLBACK_MOUSE_DOWN, _on_mousedown, NULL);
+</pre>
+
+<p>The following code snippet defines the callback functions to be called.</p>
+
+<pre class="prettyprint">
+static void
+_render_flush_cb(void *data, Evas *e, void *event_info)
+{
+ dlog_print(DLOG_DEBUG, "event", "Canvas is about to flush its rendering pipeline!");
+}
+
+static void
+_on_mousedown(void *data, Evas *evas, Evas_Object *obj, void *event_info)
+{
+ dlog_print(DLOG_DEBUG, LOG_TAG, "We've got mouse_down");
+}
+</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
--- /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 Sample] Gallery Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Gallery Sample Overview</h1>
+ <p>The [UI Sample] Gallery sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+
+<p>It 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 the view management, containers such as <span style="font-family: Courier New,Courier,monospace">elm_box</span> and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for UI component management inside the view. And UI components such as <span style="font-family: Courier New,Courier,monospace">elm_gengrid</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> for the content inside view.</p>
+
+ <h2>Main View</h2>
+
+ <p>The following figure illustrates the main view of the [UI Sample] Gallery sample application, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] Gallery screen</p>
+ <p align="center"><img alt="[UI Sample] Gallery screen" src="../images/ui_gallery_sd.png" /></p>
+ <p align="center"><img alt="[UI Sample] Gallery screen" src="../images/ui_gallery_tree.png" /></p>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> is added to act as a view manager of the window and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and added to the naviframe.</p>
+
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *bg = NULL;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // 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);
+
+ // Indicator BG
+ bg = elm_bg_add(ad->conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Naviframe
+ ad->nf = create_main_view(ad);
+ elm_object_content_set(ad->conform, ad->nf);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the content of the main view. It consists of a naviframe containing a <span style="font-family: Courier New,Courier,monospace">gengrid</span>. This function returns a naviframe object pointer for content set to conformant.</p>
+
+
+
+<pre class="prettyprint">static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+ Elm_Object_Item *nf_it;
+ Evas_Object *gengrid;
+
+ ad->nf = elm_naviframe_add(ad->conform);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, ad);
+
+ gengrid = create_gengrid(ad);
+ nf_it = elm_naviframe_item_push(ad->nf, "Gallery", NULL, NULL, gengrid, NULL);
+ elm_naviframe_item_pop_cb_set(nf_it, nf_it_pop_cb, ad);
+
+ return ad->nf;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_gengrid()</span> function creates the <span style="font-family: Courier New,Courier,monospace">gengrid</span> that is added in the main view (naviframe). The <span style="font-family: Courier New,Courier,monospace">gengrid</span> element's minimum size is the same as the screen width.
+Each <span style="font-family: Courier New,Courier,monospace">gengrid</span> element can be resized to support different display resolutions using the <span style="font-family: Courier New,Courier,monospace">elm_gengrid_item_size_set()</span> function.</p>
+
+<pre class="prettyprint">
+static Evas_Object*
+create_gengrid(appdata_s *ad)
+{
+ Elm_Gengrid_Item_Class *gic;
+ Evas_Object *gengrid;
+ char buf[PATH_MAX];
+ int i;
+
+ gengrid = elm_gengrid_add(ad->nf);
+ evas_object_size_hint_weight_set(gengrid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(gengrid, EVAS_HINT_FILL, EVAS_HINT_EXPAND);
+ elm_gengrid_item_size_set(gengrid, 110 * elm_config_scale_get(), 110 * elm_config_scale_get());
+ elm_gengrid_align_set(gengrid, 0.5, 0.1);
+
+ gic = elm_gengrid_item_class_new();
+ gic->item_style = "default";
+ gic->func.text_get = NULL;
+ gic->func.content_get = gengrid_content_get_cb;
+ gic->func.state_get = NULL;
+ gic->func.del = NULL;
+
+ for (i = 0; i < IMAGE_MAX; i++)
+ {
+ itemdata_s *id = calloc(sizeof(itemdata_s), 1);
+ snprintf(buf, sizeof(buf), "%s/%d.jpg", ICON_DIR, i);
+ id->index = i;
+ id->path = eina_stringshare_add(buf);
+ id->ad = ad;
+ elm_gengrid_item_append(gengrid, gic, id, gengrid_it_cb, id);
+ }
+ evas_object_show(gengrid);
+
+ return gengrid;
+}
+</pre>
+
+<h2>Image Viewer</h2>
+
+<p>The following figure illustrates the Image Viewer view, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: Image viewer view</p>
+ <p align="center"><img alt="Image viewer view" src="../images/ui_imageviewer_sd.png" /></p>
+ <p align="center"><img alt="Image viewer view" src="../images/ui_imageviewer_tree.png" /></p>
+
+<p>When the user clicks a <span style="font-family: Courier New,Courier,monospace">gengrid</span> item, the main view changes to the Image Viewer, which shows the selected image. The view is created using the <span style="font-family: Courier New,Courier,monospace">create_page()</span> function and added to the naviframe.</p>
+
+<pre class="prettyprint">
+static void
+gengrid_it_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *layout;
+ itemdata_s *id = data;
+ appdata_s *ad = id->ad;
+ Evas_Object *nf = ad->nf;
+
+ layout = create_page(nf, id->index);
+ elm_naviframe_item_push(nf, "Image Viewer", NULL, NULL, layout, NULL);
+
+ btn = elm_button_add(nf);
+ elm_object_text_set(btn, "Slide Start");
+ elm_object_part_content_set(nf, "toolbar", btn);
+ evas_object_show(btn);
+
+ evas_object_smart_callback_add(btn, "clicked", btn_clicked_cb, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_page()</span> function creates the content of the view by composing a scroller structure that contains the screen elements. The scroller contains a box layout with the images.</p>
+
+<pre class="prettyprint">
+static Evas_Object*
+create_page(Evas_Object *parent, int page_num)
+{
+ Evas_Object *layout, *box, *page_layout, *img;
+ char buf[PATH_MAX];
+ int i;
+
+ pagedata_s *pd = calloc(1, sizeof(pagedata_s));
+ pd->slide_right = EINA_TRUE;
+ ad->pd = pd;
+
+ // Create Layout
+ layout = elm_layout_add(parent);
+ elm_layout_theme_set(layout, "layout", "application", "default");
+ evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(layout);
+
+ evas_object_event_callback_add(layout, EVAS_CALLBACK_RESIZE, layout_resize_cb, pd);
+ evas_object_event_callback_add(layout, EVAS_CALLBACK_DEL, layout_del_cb, pd);
+
+ // Create Scroller
+ pd->scroller = elm_scroller_add(layout);
+ elm_scroller_loop_set(pd-&gt;scroller, EINA_FALSE, EINA_FALSE);
+ evas_object_size_hint_weight_set(pd-&gt;scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(pd->scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_scroller_policy_set(pd->scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_OFF);
+ elm_scroller_page_scroll_limit_set(pd->scroller, 1, 0);
+ elm_object_scroll_lock_y_set(pd->scroller, EINA_TRUE);
+ elm_object_part_content_set(layout, "elm.swallow.content", pd->scroller);
+
+ // Create Box
+ box = elm_box_add(pd->scroller);
+ elm_box_horizontal_set(box, EINA_TRUE);
+ elm_object_content_set(pd->scroller, box);
+ evas_object_show(box);
+
+ // Create Pages
+ for (i = 0; i > IMAGE_MAX; i++)
+ {
+ page_layout = elm_layout_add(box);
+ elm_layout_theme_set(page_layout, "layout", "application", "default");
+ evas_object_size_hint_weight_set(page_layout, 0, 0);
+ evas_object_size_hint_align_set(page_layout, 0, EVAS_HINT_FILL);
+ evas_object_show(page_layout);
+
+ img = elm_image_add(page_layout);
+ snprintf(buf, sizeof(buf), "%s/%d.jpg", ICON_DIR, i);
+ elm_image_file_set(img, buf, NULL);
+ evas_object_show(img);
+ pd->page[i] = img;
+
+ elm_object_part_content_set(page_layout, "elm.swallow.content", img);
+
+ elm_box_pack_end(box, page_layout);
+ }
+ pd->current_page = page_num;
+ elm_scroller_page_show(pd->scroller, pd->current_page, 0);
+ return layout;
+}
+
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">layout_resize_cb()</span> callback is called when the layout is resized; in this example, at the layout drawing time when each page size is set. To do this, get the width and height of the layout using the <span style="font-family: Courier New,Courier,monospace">evas_object_geometry_get()</span> function and set the size for each page object.</p>
+
+<pre class="prettyprint">
+static void
+layout_resize_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+ pagedata_s *pd = data;
+ Evas_Coord w, h;
+ int i;
+
+ evas_object_geometry_get(obj, NULL, NULL, &w, &h);
+
+ for (i = 0; i < IMAGE_MAX; i++)
+ {
+ evas_object_size_hint_min_set(pd->page[i], w, h);
+ }
+
+ elm_scroller_page_size_set(pd->scroller, w, h);
+ elm_scroller_page_show(pd->scroller, pd->current_page, 0);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">btn_clicked_cb()</span> callback function is called when the button is clicked; in this example, this button works like a switch for the slide show. If the <span style="font-family: Courier New,Courier,monospace">slide_timer</span> has a <span style="font-family: Courier New,Courier,monospace">null</span> value, add a timer for the callback function which is called in at specific time intervals (<span style="font-family: Courier New,Courier,monospace">SLIDE_INTERVAL</span>) using the <span style="font-family: Courier New,Courier,monospace">ecore_timer_add()</span> function, and the button text changes. Otherwise, the <span style="font-family: Courier New,Courier,monospace">timer_del()</span> callback function is called and button text changes back to the original value.</p>
+
+<pre class="prettyprint">
+static void
+btn_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ pagedata_s *pd = ad->pd
+ const char *btn_text;
+
+ btn_text = elm_object_text_get(obj);
+
+ if (pd->slide_timer)
+ {
+ ecore_timer_del(pd->slide_timer);
+ pd->slide_timer = NULL;
+ elm_object_text_set(obj, "Slide Start");
+ }
+ else
+ {
+ pd->slide_timer = ecore_timer_add(SLIDE_INTERVAL, slide_cb, pd);
+ elm_object_text_set(obj, "Slide Stop");
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">slide_cb()</span> callback function is called periodically (<span style="font-family: Courier New,Courier,monospace">SLIDE_INTERVAL</span>). This callback function gets the state of the page number and slide direction. Then the page is changed by the <span style="font-family: Courier New,Courier,monospace">elm_scroller_page_bring_in()</span> function.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+slide_cb(void *data)
+{
+ pagedata_s *pd = data;
+ int page_no;
+
+ elm_scroller_current_page_get(pd->scroller, &page_no, NULL);
+
+ if (page_no == 0)
+ pd->slide_right = EINA_TRUE;
+
+ if (page_no == IMAGE_MAX -1)
+ pd->slide_right = EINA_FALSE;
+
+ if (pd->slide_right)
+ elm_scroller_page_bring_in(pd->scroller, page_no + 1, 0);
+ else
+ elm_scroller_page_bring_in(pd->scroller, page_no - 1, 0);
+
+ return ECORE_CALLBACK_RENEW;
+}
+</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
--- /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 Sample] Idler Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Idler Sample Overview</h1>
+<p>The Idler sample demonstrates how to operate the idler functionalities in Ecore. It allows for callbacks to be called when the program is not handling events, timers or fd handlers.</p>
+
+<p>The following log shows the result of the Idler sample.</p>
+
+<p class="figure">Figure: Idler log</p>
+<p align="center"><img alt="Idler log" src="../images/idler.png" /></p>
+
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The following code snippet shows the struct for dealing with the idler. It is a helper struct that gives some context to the callbacks.</p>
+
+<pre class="prettyprint">
+struct context
+{
+ int count;
+ Ecore_Idle_Enterer *enterer;
+ Ecore_Idler *idler;
+ Ecore_Idle_Exiter *exiter;
+};
+</pre>
+
+<p>The following code snippet shows how to register the idle enterer, the idle exiter, and the idler callbacks.</p>
+
+<pre class="prettyprint">
+struct context ctx = {0};
+
+ctx.enterer = ecore_idle_enterer_add(_enterer_cb, &ctx);
+ctx.exiter = ecore_idle_exiter_add(_exiter_cb, &ctx);
+ctx.idler = ecore_idler_add(_idler_cb, &ctx);
+</pre>
+
+<p>The following code snippet defines the callback functions to be called.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+_enterer_cb(void *data EINA_UNUSED)
+{
+ dlog_print(DLOG_DEBUG, LOG_TAG, "IDLE ENTERER: Ecore entering in idle state.");
+
+ return ECORE_CALLBACK_RENEW;
+}
+
+static Eina_Bool
+_exiter_cb(void *data EINA_UNUSED)
+{
+ dlog_print(DLOG_DEBUG, LOG_TAG, "IDLE EXITER: Ecore exiting idle state.");
+
+ return ECORE_CALLBACK_RENEW;
+}
+
+static Eina_Bool
+_idler_cb(void *data)
+{
+ struct context *ctx = data;
+
+ dlog_print(DLOG_DEBUG, LOG_TAG, "IDLER: executing idler callback while in idle state. (count : %d)", ctx->count);
+
+ ctx->count++;
+
+ if ((ctx->count % 10) == 0) ecore_event_add(_event_type, NULL, NULL, NULL);
+
+ return ECORE_CALLBACK_RENEW;
+}
+</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
--- /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 Sample] Image Sample Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Image Sample Overview</h1>
+<p>The Image sample demonstrates how to display an image on the canvas using EFL image object functions. In addition, it moves and resizes an image.</p>
+<p>The sample uses image object functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_add()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_image_file_set()</span>, for adding an image to the given Evas. It also uses basic object manipulation functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_resize()</span>, for moving and changing the size of an image. </p>
+<p>The following figure illustrates the main screen of Image.</p>
+
+<p class="figure">Figure: Image screen</p>
+<p align="center"><img alt="Image screen" src="../images/image_sd.png" /></p>
+
+<h2 id="Implementation" name="Implementation">Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window which consists of an image (Evas object) added using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_filled_add()</span> function.</p>
+<p>It also moves the image to the given x, y coordination inside its canvas viewport using the <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> function, and changes the size of the image using the <span style="font-family: Courier New,Courier,monospace;">evas_object_resize()</span> function.
+</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Image
+ Evas_Object *img;
+ char img_path[PATH_MAX] = { 0, };
+ app_get_resource("tizen_logo.png", img_path, PATH_MAX);
+
+ Evas* canvas = evas_object_evas_get(ad->conform);
+ img = evas_object_image_filled_add(canvas); // Add an image to the given Evas
+ evas_object_image_file_set(img, img_path, NULL);
+ // Set the source file from where an image object must fetch the real image data
+ evas_object_move(img, 50, 50);
+ // Move the given Evas object to the given location inside its canvas viewport
+ evas_object_resize(img, 300, 200); // Change the size of the given Evas object
+ evas_object_show(img); // Make the given Evas object visible
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] InList Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] InList Sample Overview</h1>
+
+ <p>The InList sample demonstrates how to manage inline list using EFL InList functions. If you do not fully understand these functions, use regular lists instead.</p>
+
+ <p>Inline list is a list with nodes inlined into user types. This means that the node pointers share the same memory with the data. Inline lists fragment the memory less and avoid node -> data indirection, however, they have a higher cost for some common operations, like count and sort.</p>
+
+ <p>The following log shows the result of the InList sample.</p>
+
+<pre class="prettyprint">
+I/inlist_tag( 3390): list=0xb85638e0
+I/inlist_tag( 3390): a=3, b=30
+I/inlist_tag( 3390): a=1, b=10
+I/inlist_tag( 3390): a=2, b=20
+I/inlist_tag( 3390): list after sort=0xb85151e0
+I/inlist_tag( 3390): a=1, b=10
+I/inlist_tag( 3390): a=2, b=20
+I/inlist_tag( 3390): a=3, b=30
+I/inlist_tag( 3390): a=4, b=40
+</pre>
+
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function utilizes InList to sort given numbers in variables a and b. Basically, a node of the list is created with data a and b with struct. The <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> function creates a head node and later appends and prepends other list nodes with different data using the <span style="font-family: Courier New,Courier,monospace">eina_inlist_append()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_prepend()</span> functions to the existing InList nodes. The <span style="font-family: Courier New,Courier,monospace">eina_inlist_append_relative()</span> and <span style="font-family: Courier New,Courier,monospace">eina_inlist_demote()</span> functions place an InList at the beginning and at the end of the existing ones. The <span style="font-family: Courier New,Courier,monospace">eina_inlist_sort</span> function sorts the data in order. The <span style="font-family: Courier New,Courier,monospace">dlog_print()</span> function of the Core API is used to print the sorted data by using the <span style="font-family: Courier New,Courier,monospace">dlogutil</span> command in the Tizen SDB.</p>
+
+<pre class="prettyprint">
+struct my_struct
+{
+ EINA_INLIST;
+ int a, b;
+};
+
+int sort_cb(const void *d1, const void *d2)
+{
+ const Eina_Inlist *l1, *l2;
+ const struct my_struct *x1, *x2;
+ l1 = d1;
+ l2 = d2;
+ x1 = EINA_INLIST_CONTAINER_GET(l1, struct my_struct);
+ x2 = EINA_INLIST_CONTAINER_GET(l2, struct my_struct);
+ return x1->a - x2->a;
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // 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);
+
+ // InList Code
+ struct my_struct *d, *cur;
+ Eina_Inlist *list, *itr, *tmp;
+ d = malloc(sizeof(*d));
+ d->a = 1;
+ d->b = 10;
+ list = eina_inlist_append(NULL, EINA_INLIST_GET(d));
+ d = malloc(sizeof(*d));
+ d->a = 2;
+ d->b = 20;
+ list = eina_inlist_append(list, EINA_INLIST_GET(d));
+ d = malloc(sizeof(*d));
+ d->a = 3;
+ d->b = 30;
+ list = eina_inlist_prepend(list, EINA_INLIST_GET(d));
+ dlog_print(DLOG_INFO, "inlist_tag", "list=%p\n", list);
+ EINA_INLIST_FOREACH(list, cur);
+ dlog_print(DLOG_INFO, "inlist_tag","\ta=%d, b=%d\n", cur->a, cur->b);
+ list = eina_inlist_promote(list, EINA_INLIST_GET(d));
+ d = malloc(sizeof(*d));
+ d->a = 4;
+ d->b = 40;
+ list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
+ list = eina_inlist_demote(list, EINA_INLIST_GET(d));
+ list = eina_inlist_sort(list, sort_cb);
+ dlog_print(DLOG_INFO, "inlist_tag","list after sort=%p\n", list);
+ EINA_INLIST_FOREACH(list, cur)
+ dlog_print(DLOG_INFO, "inlist_tag","\ta=%d, b=%d\n", cur->a, cur->b);
+ tmp = eina_inlist_find(list, EINA_INLIST_GET(d));
+ if (tmp)
+ cur = EINA_INLIST_CONTAINER_GET(tmp, struct my_struct);
+ else
+ cur = NULL;
+ if (d != cur)
+ dlog_print(DLOG_INFO, "inlist_tag","wrong node! cur=%p\n", cur);
+ list = eina_inlist_remove(list, EINA_INLIST_GET(d));
+ free(d);
+ printf("list=%p\n", list);
+ for (itr = list; itr != NULL; itr = itr->next)
+ {
+ cur = EINA_INLIST_CONTAINER_GET(itr, struct my_struct);
+ printf("\ta=%d, b=%d\n", cur->a, cur->b);
+ }
+
+ while (list)
+ {
+ struct my_struct *aux = EINA_INLIST_CONTAINER_GET(list,struct my_struct);
+ list = eina_inlist_remove(list, list);
+ free(aux);
+ }
+
+ // Window UI can be ignored from this sample as dlog_print is used to show the result
+ // 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);
+}
+</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
--- /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 Sample] Job Sample Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Job Sample Overview</h1>
+
+<p>The Job sample shows how an <span style="font-family: Courier New,Courier,monospace">Ecore_Job</span> can be added, how it can be deleted, and how they always execute in the added order.</p>
+
+<p>First, 2 callback functions are declared, one that prints strings passed to it in the data pointer, and another one that quits the main loop. In the main function, 3 jobs are added using the first callback, and another one is added using the second one.</p>
+
+<p>To see the process, <span style="font-family: Courier New,Courier,monospace">dlogutil</span> in the <span style="font-family: Courier New,Courier,monospace">sdb</span> shell is used. In the <span style="font-family: Courier New,Courier,monospace">sdb</span> shell, enter <span style="font-family: Courier New,Courier,monospace">dlogutil [LOGTAG]</span>.</p>
+
+<p>The following log illustrates a screenshot of <span style="font-family: Courier New,Courier,monospace">dlogutil</span> in the <span style="font-family: Courier New,Courier,monospace">sdb</span> shell.</p>
+
+<pre class="prettyprint">
+sh-4.1# dlogutil job
+arc = 2, optind = 1 ,Kb 0, rotate 4
+--------- beginning of /dev/log_system
+--------- beginning of /dev/log_main
+D/job ( 5389): Created jobs 1, 2, 3 and quit.
+D/job ( 5389): Deleted job 2. Its data was: "Job 2 started."
+D/job ( 5389): Job 1 started.
+D/job ( 5389): Job 3 started.
+</pre>
+
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function adds the <span style="font-family: Courier New,Courier,monospace">Ecore_Job</span> using the <span style="font-family: Courier New,Courier,monospace">ecore_job_add()</span> function with the <span style="font-family: Courier New,Courier,monospace">_job_print_cb()</span> and <span style="font-family: Courier New,Courier,monospace">_job_quit_cb()</span> callbacks, and deletes the <span style="font-family: Courier New,Courier,monospace">Ecore_Job</span> using the <span style="font-family: Courier New,Courier,monospace">ecore_job_del()</span> function. To show the job process, the <span style="font-family: Courier New,Courier,monospace">dlog_print()</span> function is used.</p>
+
+<pre class="prettyprint">
+#include <Ecore.h>
+#include <unistd.h>
+
+static void
+_job_print_cb(void *data)
+{
+ char *str = data;
+ dlog_print(DLOG_DEBUG, LOG_TAG, "%s\n", str);
+}
+
+static void
+_job_quit_cb(void *data EINA_UNUSED)
+{
+ ecore_main_loop_quit();
+}
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Label
+ ad->label = elm_label_add(ad->conform);
+ elm_object_text_set(ad->label, "Ecore Job");
+ evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_object_content_set(ad->conform, ad->label);
+ evas_object_show(ad->label);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+
+ // job
+ Ecore_Job *job1, *job2, *job3, *job_quit;
+ char *str1 = "Job 1 started.";
+ char *str2 = "Job 2 started.";
+ char *str3 = "Job 3 started.";
+
+ job1 = ecore_job_add(_job_print_cb, str1);
+ job2 = ecore_job_add(_job_print_cb, str2);
+ job3 = ecore_job_add(_job_print_cb, str3);
+ job_quit = ecore_job_add(_job_quit_cb, NULL);
+
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Created jobs 1, 2, 3 and quit.\n");
+
+ if (job2)
+ {
+ char *str;
+ str = ecore_job_del(job2);
+ job2 = NULL;
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Deleted job 2. Its data was: \"%s\"\n", str);
+ }
+}
+</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
--- /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 Sample] LanguageChange Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] LanguageChange Sample Overview</h1>
+ <p>The [UI Sample] LanguageChange sample application demonstrates how to implement basic GNU internationalization and localization as well as the Elementary translatable text APIs family.</p>
+
+ <p>Basically, Tizen native applications are supposed to support multiple languages for worldwide users. This sample demonstrates how to support multiple languages on your application. Basically, the text translation is handled with GNU internationalization and localization (<span style="font-family: Courier New,Courier,monospace">gettext()</span>). Elementary provides additional utility functions for dynamic language change, which means your application texts can be easily updated with the current locale at runtime.</p>
+
+ <p>The following Elementary functions are supported. For more information on the translatable text functions, see the Elementary documentation.</p>
+
+<ul><li>Elementary UI component functions:
+<pre class="prettyprint">
+elm_object_translatable_text_set();
+elm_object_translatable_part_text_set();
+elm_object_translatable_part_text_get();
+elm_object_translatable_text_get();
+elm_object_part_text_translatable_set();
+</pre>
+</li>
+<li>Elementary UI component item functions:
+<pre class="prettyprint">
+elm_object_item_translatable_text_set();
+elm_object_item_translatable_part_text_set();
+elm_object_item_translatable_part_text_get();
+elm_object_item_translatable_text_get();
+elm_object_item_part_text_translatable_set();
+</pre>
+</li>
+</ul>
+
+<p>If your application is supposed to support multiple languages, prepare text data for the languages with po files.</p>
+<p>Basically, every text in the po must consist of the msgid and msgstr fields. The msgid represents the value to be translated to the msgstr value. The <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function gets the actual msgstr value from the msgid field. So if your application displays a multi-language text, write the text with the msgid value and the actual translated text. In the meantime, set the texts with the Elementary translatable text APIs in your application.</p>
+
+ <p class="figure">Figure: Using translatable text APIs</p>
+ <p align="center"><img alt="Using translatable text APIs" src="../images/ui_translatable_text.png" /></p>
+
+
+ <h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">app_create()</span> function constructs the base GUIs for the application layout by going through 2 functions: <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> and <span style="font-family: Courier New,Courier,monospace">create_view()</span>.</p>
+
+<pre class="prettyprint">
+static bool
+app_create(void *data)
+{
+ // Hook to take necessary actions before main event loop starts
+ // Initialize UI resources and application 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);
+ create_view(ad);
+
+ ecore_timer_add(1, timer_cb, ad);
+
+ return true;
+}
+</pre>
+
+<p>Additionally, the <span style="font-family: Courier New,Courier,monospace">app_create()</span> function calls the <span style="font-family: Courier New,Courier,monospace">ecore_timer_add()</span> function to simply increase a value every second.</p>
+<pre class="prettyprint">static Eina_Bool
+timer_cb(void *data)
+{
+ appdata_s *ad = data;
+ ad->count++;
+ return ECORE_CALLBACK_RENEW;
+}</pre>
+
+<p>The application creates the <span style="font-family: Courier New,Courier,monospace">elm_window</span>, <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>, and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> components for the basic layouts in the <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function.</p>
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->>win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Conformant
+ 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);
+
+ // Naviframe
+ ad->naviframe = elm_naviframe_add(ad->conform);
+ eext_object_event_callback_add(ad->naviframe, EEXT_CALLBACK_BACK, nf_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->naviframe);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<p>At this moment, the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component has no views. In the <span style="font-family: Courier New,Courier,monospace">create_view()</span> function, it creates one view as the naviframe view item. The view consists of the entry, genlist and button. A box packs them in its own container. The following figure illustrates the final layout structure.</p>
+
+ <p class="figure">Figure: Layout structure</p>
+ <p align="center"><img alt="Layout structure" src="../images/ui_translatable_layout.png" /></p>
+
+
+<h2>Setting Translatable Texts</h2>
+
+<p>You can set the translatable texts to each UI component – <span style="font-family: Courier New,Courier,monospace">elm_entry</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, <span style="font-family: Courier New,Courier,monospace">elm_button</span>, and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>.</p>
+
+<pre class="prettyprint">static void
+create_view(appdata_s *ad)
+{
+ // Entry
+ entry = elm_entry_add(box);
+ evas_object_smart_callback_add(entry, "language,changed", entry_language_changed_cb, ad);
+ evas_object_size_hint_align_set(entry, EVAS_HINT_FILL, 0);
+ // Basically, use i18n_get_text() to get the current language text
+ snprintf(buf, sizeof(buf), "%s: %d", i18n_get_text("IDS_CURRENT"), ad->count);
+ elm_entry_entry_set(entry, buf);
+ elm_entry_editable_set(entry, EINA_FALSE);
+ evas_object_show(entry);
+}
+</pre>
+
+<h3>elm_entry Component</h3>
+
+<p>First, work on the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> set. The sample shows the basic entry usage, and 2 additional issues: the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function and <span style="font-family: Courier New,Courier,monospace">ad->count</span>.</p>
+<p>The application calls the <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function with the <span style="font-family: Courier New,Courier,monospace">language,changed</span> event type to get the callback call when the entry has a notice - the language is going change. Next, it sets the text with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function, but constructs a string with the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function and <span style="font-family: Courier New,Courier,monospace">ad->count</span>.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">ad->count</span> is not noticeable, because it is only intended to display a text that is composed with a number. However, the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function is important, since it is used to get the translated text based on the current locale. If the current locale is set to English, the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function takes it's localized data.</p>
+
+<p>When the system language is changed, the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> handles the change with the <span style="font-family: Courier New,Courier,monospace">entry_language_changed_cb()</span> callback, where you can reset the text with the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function based on the changed locale information.</p>
+
+<pre class="prettyprint">
+static void
+entry_language_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ // Get the language changed callback call by UI component
+ // If you need to apply some markups to text,
+ // use the i18n_get_text() in the language,changed smart callback
+ appdata_s *ad = data;
+ char buf[128];
+ snprintf(buf, sizeof(buf), "%s: %d", i18n_get_text("IDS_CURRENT"), ad->count);
+ elm_entry_entry_set(obj, buf);
+}</pre>
+
+<p>Since the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component can reset a text with the current locale info every time the language is changed, you can make the text update.</p>
+
+<h3>elm_genlist Component</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> is constructed as usual.</p>
+
+<pre class="prettyprint">
+static void
+create_view(appdata_s *ad)
+{
+ // Genlist
+ genlist = elm_genlist_add(box);
+
+ itc = elm_genlist_item_class_new();
+ itc->item_style = "default";
+ itc->func.text_get = gl_text_get_cb;
+
+ for (i = 0; i < 100; i++)
+ {
+ elm_genlist_item_append(genlist, itc, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ }
+
+ elm_genlist_item_class_free(itc);
+
+ evas_object_size_hint_weight_set(genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(genlist, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(genlist);
+}</pre>
+
+<p>Focus on the <span style="font-family: Courier New,Courier,monospace">gl_text_get_cb()</span> callback function that is called on the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> item realization.</p>
+
+<pre class="prettyprint">
+static char *
+gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+{
+ // In case of genlist, the text is updated in real time when the language is changed
+ // No need to use any Elementary translatable_text_set() functions
+ return strdup(i18n_get_text("IDS_SELECT_ITEM"));
+}</pre>
+
+<p>The basic mechanism is the same as with the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component. Whenever items are realized, you get the current language texts by using the <span style="font-family: Courier New,Courier,monospace">i18n_get_text()</span> function. Since the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> items are re-realized when the system language is changed, you can keep the current language text in the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> items.</p>
+
+<h3>elm_button Component</h3>
+
+<p>In the <span style="font-family: Courier New,Courier,monospace">elm_button</span> component, use the <span style="font-family: Courier New,Courier,monospace">elm_object_translatable_text_set()</span> function to support the dynamic language change.</p>
+
+<pre class="prettyprint">
+static void
+create_view(appdata_s *ad)
+{
+ // Button
+ btn = elm_button_add(box);
+ // Basically, you can use elm_object_translatable_part_text_set() API
+ // to support dynamic language change
+ elm_object_translatable_text_set(btn, "IDS_DONE");
+ evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, 1);
+ evas_object_show(btn);
+}</pre>
+
+<h3>Other Items</h3>
+
+<p>The Elementary provides basic text functions (<span style="font-family: Courier New,Courier,monospace">elm_object_part_text_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span>). However, if you want the text to be translated, call the <span style="font-family: Courier New,Courier,monospace">elm_object_translatable_part_text_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_object_translatable_text_set()</span> functions instead. Once you set the text with those functions, the text is translated automatically whenever the system language is changed. Remember that you need to pass the msgid value instead of the actual text.</p>
+
+<p>Some Elementary functions are provided for adding items, such as <span style="font-family: Courier New,Courier,monospace">elm_list_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_ctxpopup_item_append()</span>, <span style="font-family: Courier New,Courier,monospace">elm_toolbar_item_append()</span>, and <span style="font-family: Courier New,Courier,monospace">elm_naviframe_item_push()</span>. Since these functions do not fit to the translatable text functions, Elementary supports additional functions for their item texts to be translated.</p>
+
+<pre class="prettyprint">void elm_object_item_part_text_translatable_set(Elm_Object_Item *it, const char *part, Eina_Bool translatable);</pre>
+
+<p>After creating the item, you can make the item text translatable with the above function. Remember to pass the msgid value when you create the item. For example, to set the <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> title to be translated:</p>
+<pre class="prettyprint">static void
+create_view(appdata_s *ad)
+{
+ // Push a view to naviframe
+ nf_it = elm_naviframe_item_push(ad->naviframe, "IDS_LANGUAGE", NULL, NULL, box, NULL);
+ // Basically, you can use
+ // elm_object_item_part_text_translatable_set() or
+ // elm_object_item_translatable_part_text_set() API
+ // to support dynamic language change
+ elm_object_item_part_text_translatable_set(nf_it, NULL, EINA_TRUE);
+}</pre>
+
+<p>The following example shows the entire code of the <span style="font-family: Courier New,Courier,monospace">create_view()</span> function.</p>
+<pre class="prettyprint">static void
+create_view(appdata_s *ad)
+{
+ Evas_Object *box, *btn, *entry, *genlist;
+ Elm_Object_Item *nf_it;
+ Elm_Genlist_Item_Class *itc;
+ char buf[128];
+ int i;
+
+ // Box
+ box = elm_box_add(ad->naviframe);
+
+ // Entry
+ entry = elm_entry_add(box);
+ evas_object_smart_callback_add(entry, "language,changed", entry_language_changed_cb, ad);
+ evas_object_size_hint_align_set(entry, EVAS_HINT_FILL, 0);
+ // Use i18n_get_text() to get the current language text
+ snprintf(buf, sizeof(buf), "%s: %d", i18n_get_text("IDS_CURRENT"), ad->count);
+ elm_entry_entry_set(entry, buf);
+ elm_entry_editable_set(entry, EINA_FALSE);
+ evas_object_show(entry);
+ elm_box_pack_end(box, entry);
+
+ // Genlist
+ genlist = elm_genlist_add(box);
+
+ itc = elm_genlist_item_class_new();
+ itc->item_style = "default";
+ itc->func.text_get = gl_text_get_cb;
+
+ for (i = 0; i < 100; i++)
+ {
+ elm_genlist_item_append(genlist, itc, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);
+ }
+
+ elm_genlist_item_class_free(itc);
+
+ evas_object_size_hint_weight_set(genlist, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(genlist, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(genlist);
+ elm_box_pack_end(box, genlist);
+
+ // Button
+ // Basically, you can use elm_object_translatable_part_text_set() API
+ // to support dynamic language change
+ btn = elm_button_add(box);
+ elm_object_translatable_text_set(btn, "IDS_DONE");
+ evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, 1);
+ evas_object_show(btn);
+ elm_box_pack_end(box, btn);
+
+ // Push a view to naviframe
+ nf_it = elm_naviframe_item_push(ad->naviframe, "IDS_LANGUAGE", NULL, NULL, box, NULL);
+ // Basically, you can use
+ // elm_object_item_part_text_translatable_set() or
+ // elm_object_item_translatable_part_text_set() API
+ // to support dynamic language change
+ elm_object_item_part_text_translatable_set(nf_it, NULL, EINA_TRUE);
+}</pre>
+
+<p>However, you must check one more issue. Whenever the system language is changed, the application language changed callback is called.</p>
+<pre class="prettyprint">static void
+app_language_changed(void *data)
+{
+ // Set the current language
+ char *locale = NULL;
+ runtime_info_get_value_string(RUNTIME_INFO_KEY_LANGUAGE, &locale);
+
+ // Notify Elementary to update UI component text with new language info
+ elm_language_set(locale);
+ free(locale);
+}</pre>
+
+<p>In the callback, the current locale information is retrieved using the <span style="font-family: Courier New,Courier,monospace">runtime_info_get_value_string()</span> function and the locale value is passed to the <span style="font-family: Courier New,Courier,monospace">elm_language_set()</span> function directly so that the Elementary UI components texts are translated with the current locale information at the right moment.</p>
+
+<p>Now everything is ready. If the user chooses another language in the setting application, you can see the sample application texts changed to the current language texts.</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>[UI Sample] LayoutSample Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] LayoutSample Overview</h1>
+
+<p>The [UI Sample] LayoutSample application demonstrates how to make a common layout, such as an edit field, no content, or search bar. Since Tizen provides some common layouts, you do not need to make the layouts yourself.</p>
+
+ <p class="figure">Figure: [UI Sample] LayoutSample</p>
+ <p align="center"><img alt="[UI Sample] LayoutSample" src="../images/ui_layout_samples_sd.png" /></p>
+
+ <h2>Edit Field</h2>
+
+<p>In the edit field, understanding the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component is very important. Handle the state of the edit field layout in the callback functions of the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component. You need the <span style="font-family: Courier New,Courier,monospace">focused</span>, <span style="font-family: Courier New,Courier,monospace">unfocused</span>, <span style="font-family: Courier New,Courier,monospace">changed</span>, and <span style="font-family: Courier New,Courier,monospace">preedit,changed</span> smart callbacks.</p>
+
+<p>The edit field is commonly used in preloaded applications, such as contacts and calendar. You can create the edit field with the <span style="font-family: Courier New,Courier,monospace">elm_layout</span>, <span style="font-family: Courier New,Courier,monospace">elm_entry</span>, and <span style="font-family: Courier New,Courier,monospace">elm_button</span> components. For controlling the state of the edit field layout, send signals in several callbacks for the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component. You must understand how to implement the proper timing for changing the layout state.</p>
+
+ <p class="figure">Figure: Edit field</p>
+ <p align="center"><img alt="Edit field" src="../images/ui_layout_samples_sd_editfield.png" /></p>
+
+
+<p>The following code creates the main view for the Editfield view. It prepares the <span style="font-family: Courier New,Courier,monospace">elm_box</span> component for the edit field layouts.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_editfield_view(appdata_s *ad)
+{
+ Evas_Object *main_scroller, *main_box, *editfield;
+
+ main_scroller = elm_scroller_add(ad->nf);
+ elm_scroller_bounce_set(main_scroller, EINA_FALSE, EINA_TRUE);
+ elm_scroller_origin_reverse_set(main_scroller, EINA_FALSE, EINA_TRUE);
+ evas_object_size_hint_weight_set(main_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(main_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(main_scroller);
+
+ main_box = elm_box_add(main_scroller);
+ evas_object_size_hint_align_set(main_box, EVAS_HINT_FILL, 0.0);
+ evas_object_size_hint_weight_set(main_box, EVAS_HINT_EXPAND, 0.0);
+ evas_object_show(main_box);
+
+ editfield = create_multiline_editfield_layout(main_box);
+ elm_box_pack_end(main_box, editfield);
+ evas_object_show(editfield);
+
+ editfield = create_singleline_editfield_layout(main_box);
+ elm_box_pack_end(main_box, editfield);
+ evas_object_show(editfield);
+
+ editfield = create_password_editfield_layout(main_box);
+ elm_box_pack_end(main_box, editfield);
+ evas_object_show(editfield);
+
+ elm_object_content_set(main_scroller, main_box);
+
+ return main_scroller;
+}</pre>
+
+<p>To create a multiline edit field, add the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> component and change the theme to <span style="font-family: Courier New,Courier,monospace">elm/layout/editfield/multiline</span>. The layout looks like the edit field, with swallow parts for the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> and <span style="font-family: Courier New,Courier,monospace">elm_button</span> components. Afterwards, add the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component and set it to the edit field layout.</p>
+<p>Additionally, you can add some callback functions to the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component. Through the callback functions, send signals to the layout to change the state of the edit field.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_multiline_editfield_layout(Evas_Object *parent)
+{
+ Evas_Object *editfield, *entry;
+
+ editfield = elm_layout_add(parent);
+ elm_layout_theme_set(editfield, "layout", "editfield", "multiline");
+ evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
+ evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);
+
+ entry = elm_entry_add(editfield);
+ elm_object_part_text_set(entry, "elm.guide", "Multiline Editfield");
+ evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
+ evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
+ elm_object_part_content_set(editfield, "elm.swallow.content", entry);
+
+ return editfield;
+}</pre>
+
+
+<p>The following callback functions send signals. For example, the <span style="font-family: Courier New,Courier,monospace">editfield_focused_cb()</span> callback sends the <span style="font-family: Courier New,Courier,monospace">elm.state,focused</span> and <span style="font-family: Courier New,Courier,monospace">elm,action,show,button</span> signals, which change the color of the edit field underline and the visibility state of the button.</p>
+<pre class="prettyprint">
+static void
+editfield_focused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *editfield = (Evas_Object *)data;
+ elm_object_signal_emit(editfield, "elm,state,focused", "");
+
+ if (!elm_entry_is_empty(obj))
+ elm_object_signal_emit(editfield, "elm,action,show,button", "");
+}
+
+static void
+editfield_unfocused_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *editfield = (Evas_Object *)data;
+ elm_object_signal_emit(editfield, "elm,state,unfocused", "");
+ elm_object_signal_emit(editfield, "elm,action,hide,button", "");
+}</pre>
+
+
+<p>The next layout is a single-line edit field. The code is almost the same with the multiline edit field, except for the <span style="font-family: Courier New,Courier,monospace">elm_entry_single_line_set()</span> and <span style="font-family: Courier New,Courier,monospace">elm_entry_scrollable_set()</span> functions. These functions are required for a single-line edit field.</p>
+
+<p>A clear button is added to the layout to clear the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component text.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_singleline_editfield_layout(Evas_Object *parent)
+{
+ Evas_Object *editfield, *entry, *button;
+
+ editfield = elm_layout_add(parent);
+ elm_layout_theme_set(editfield, "layout", "editfield", "singleline");
+ evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
+ evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);
+
+ entry = elm_entry_add(editfield);
+ elm_entry_single_line_set(entry, EINA_TRUE);
+ elm_entry_scrollable_set(entry, EINA_TRUE);
+ elm_object_part_text_set(entry, "elm.guide", "Singleline Editfield");
+ evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
+ evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
+ evas_object_smart_callback_add(entry, "changed", editfield_changed_cb, editfield);
+ evas_object_smart_callback_add(entry, "preedit,changed", editfield_changed_cb, editfield);
+ elm_object_part_content_set(editfield, "elm.swallow.content", entry);
+
+ button = elm_button_add(editfield);
+ elm_object_style_set(button, "editfield_clear");
+ evas_object_smart_callback_add(button, "clicked", editfield_clear_button_clicked_cb, entry);
+ elm_object_part_content_set(editfield, "elm.swallow.button", button);
+
+ return editfield;
+}</pre>
+
+
+<p>To clear the entry, call the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_set()</span> function with an empty text.</p>
+
+<pre class="prettyprint">
+static void
+editfield_clear_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *entry = (Evas_Object *)data;
+
+ elm_entry_entry_set(entry, "");
+}</pre>
+
+<p>The password edit field is exactly the same as the single-line edit field, except for the <span style="font-family: Courier New,Courier,monospace">elm_entry_password_set()</span> function.</p>
+<p>If you call the <span style="font-family: Courier New,Courier,monospace">elm_entry_password_set()</span> function, the <span style="font-family: Courier New,Courier,monospace">elm_entry</span> component shows the text as asterisks (*). However, the edit field still has the original input and you can get it with the <span style="font-family: Courier New,Courier,monospace">elm_entry_entry_get()</span> function.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_password_editfield_layout(Evas_Object *parent)
+{
+ Evas_Object *editfield, *entry, *button;
+
+ editfield = elm_layout_add(parent);
+ elm_layout_theme_set(editfield, "layout", "editfield", "singleline");
+ evas_object_size_hint_align_set(editfield, EVAS_HINT_FILL, 0.0);
+ evas_object_size_hint_weight_set(editfield, EVAS_HINT_EXPAND, 0.0);
+
+ entry = elm_entry_add(editfield);
+ elm_entry_single_line_set(entry, EINA_TRUE);
+ elm_entry_scrollable_set(entry, EINA_TRUE);
+ elm_entry_password_set(entry, EINA_TRUE);
+ elm_object_part_text_set(entry, "elm.guide", "Password Editfield");
+ evas_object_smart_callback_add(entry, "focused", editfield_focused_cb, editfield);
+ evas_object_smart_callback_add(entry, "unfocused", editfield_unfocused_cb, editfield);
+ evas_object_smart_callback_add(entry, "changed", editfield_changed_cb, editfield);
+ evas_object_smart_callback_add(entry, "preedit,changed", editfield_changed_cb, editfield);
+ elm_object_part_content_set(editfield, "elm.swallow.content", entry);
+
+ button = elm_button_add(editfield);
+ elm_object_style_set(button, "editfield_clear");
+ evas_object_smart_callback_add(button, "clicked", editfield_clear_button_clicked_cb, entry);
+ elm_object_part_content_set(editfield, "elm.swallow.button", button);
+
+ return editfield;
+}</pre>
+
+
+<h2>No Content</h2>
+<p>The no content layout is one of the simplest layouts. After adding the <span style="font-family: Courier New,Courier,monospace">elm_layout</span> component, change the theme to <span style="font-family: Courier New,Courier,monospace">elm/layout/nocontents/default</span>. It has a transparent image and you can put your text in the middle of the layout.</p>
+
+<pre class="prettyprint">
+// No content Layout
+layout = elm_layout_add(scroller);
+elm_layout_theme_set(layout, "layout", "nocontents", "default");
+evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+evas_object_size_hint_align_set(layout, EVAS_HINT_FILL, EVAS_HINT_FILL);
+elm_object_part_text_set(layout, "elm.text", "No Contents");
+
+elm_object_content_set(scroller, layout);
+</pre>
+
+ <p class="figure">Figure: No content</p>
+ <p align="center"><img alt="No content" src="../images/ui_layout_samples_sd_nocontent.png" /></p>
+
+<h2>Search Bar</h2>
+<p>You can add a search bar just like a single-line edit field. Change the theme style to <span style="font-family: Courier New,Courier,monospace">elm/layout/searchfield/singleline</span>:</p>
+
+<pre class="prettyprint">
+searchfield = elm_layout_add(parent);
+elm_layout_theme_set(searchfield, "layout", "searchfield", "singleline");
+evas_object_size_hint_align_set(searchfield, EVAS_HINT_FILL, 0.0);
+evas_object_size_hint_weight_set(searchfield, EVAS_HINT_EXPAND, 0.0);</pre>
+
+ <p class="figure">Figure: Search bar</p>
+ <p align="center"><img alt="Search bar" src="../images/ui_layout_samples_sd_searchbar.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>
+
+</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 Sample] LayoutSignal Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] LayoutSignal Sample Overview</h1>
+
+<p>The [UI Sample] LayoutSignal sample application demonstrates how to combine Edje code with C code, and how to manage communication between them using a signal mechanism. In this example, Edje receives a signal to display text from a button object, and returns another signal to C as a response.</p>
+
+<p>This sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> component for signaling, <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for view management, and <span style="font-family: Courier New,Courier,monospace">elm_button</span> for the view content.</p>
+
+<p>The following figure illustrates the main view of the [UI Sample] LayoutSignal sample application, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] LayoutSignal screen</p>
+<p align="center"><img alt="[UI Sample] LayoutSignal screen" src="../images/ui_layout_signal_sd.png" /></p>
+<p align="center"><img alt="[UI Sample] LayoutSignal screen" src="../images/ui_layout_signal_sd_tree.png" /></p>
+
+<h2>Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ // Conformant
+ 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);
+
+ // Base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ ad->layout = elm_layout_add(ad->win);
+ elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ elm_object_content_set(ad->conform, ad->layout);
+
+ create_content(ad);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<p>The function starts by creating a window and then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to decorate the window with an indicator.</p>
+
+<p>The sample application has its own view style, so the <span style="font-family: Courier New,Courier,monospace">app_get_resource()</span> function is used to get the <span style="font-family: Courier New,Courier,monospace">EDJ_FILE</span> path for the layout file set. The <span style="font-family: Courier New,Courier,monospace">elm_layout</span> object is added in the conformant.</p>
+
+<h2>Main View</h2>
+
+<p>The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_content()</span> function.</p>
+
+<p>The following code creates the main view content and adds callbacks for sending and receiving signals:</p>
+
+<pre class="prettyprint">static void
+create_content(appdata_s *ad)
+{
+ Evas_Object *btn;
+
+ btn = elm_button_add(ad->layout);
+ elm_object_text_set(btn, "Send Signal");
+ evas_object_show(btn);
+
+ // Add callback for clicked event on the button object
+ evas_object_smart_callback_add(btn, "clicked", send_clicked_cb, ad);
+ // Add callback for the signal received from Edje
+ elm_object_signal_callback_add(ad->layout, "text,change", "LayoutSignal", receive_clicked_cb, btn);
+
+ elm_object_part_content_set(ad->layout, "center_button", btn);
+ elm_object_part_text_set(ad->layout, "text", "send a signal from C to Edje");
+}</pre>
+
+<p>A button object is added to the layout for sending a signal to Edje.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_smart_callback_add()</span> function is used to get the signal when the user clicks the button.</p>
+<p>The function takes the following parameters:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">btn</span>: Smart object</li>
+ <li><span style="font-family: Courier New,Courier,monospace">"clicked"</span>: Event name</li>
+ <li><span style="font-family: Courier New,Courier,monospace">send_clicked_cb()</span>: Callback function invoked when the event is triggered</li>
+ <li><span style="font-family: Courier New,Courier,monospace">ad</span>: User data passed to the callback function</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_object_signal_callback_add()</span> function is used to get the signal callbacks when the UI component object sends the signals. The function connects a callback function to a signal sent by the layout object. Globs can occur either in the emission name or source name.</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ad->layout</span>: Target object</li>
+ <li><span style="font-family: Courier New,Courier,monospace">text,change</span>: Signal emission</li>
+ <li><span style="font-family: Courier New,Courier,monospace">LayoutSignal</span>: Signal source</li>
+ <li><span style="font-family: Courier New,Courier,monospace">receive_clicked_cb()</span>: Callback function invoked when the signal is sent</li>
+ <li><span style="font-family: Courier New,Courier,monospace">btn</span>: User data passed to the callback function</li>
+</ul>
+
+<h2>Button Clicked View</h2>
+
+<p>The following code shows the callback function for the button clicked event:</p>
+
+<pre class="prettyprint">static void
+send_clicked_cb(void *data, Evas_Object *obj, void *event)
+{
+ // Button clicked event
+ appdata_s *ad = data;
+
+ elm_object_text_set(obj, "Disabled");
+ elm_object_disabled_set(obj, EINA_TRUE);
+
+ // Send a signal to Edje
+ elm_object_signal_emit(ad->layout, "elm,state,text,show", "elm");
+}</pre>
+
+<p>When the user clicks the button, the button text changes to "Disabled", and the button is disabled with the <span style="font-family: Courier New,Courier,monospace">elm_object_disabled_set()</span> function. Next, the <span style="font-family: Courier New,Courier,monospace">elm_object_signal_emit()</span> function sends a signal to the Edje object. An Edje application can respond to the signal by specifying matching <span style="font-family: Courier New,Courier,monospace">signal</span> and <span style="font-family: Courier New,Courier,monospace">source</span> fields.</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">ad->layout</span>: Target object</li>
+ <li><span style="font-family: Courier New,Courier,monospace">elm,state,text,show</span>: Signal emission</li>
+ <li><span style="font-family: Courier New,Courier,monospace">elm</span>: Signal source</li>
+</ul>
+
+<p class="figure">Figure: Button clicked view</p>
+<p align="center"><img alt="Button clicked view" src="../images/ui_layout_signal_sd_button_clicked.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">program</span> block is used to send the signal to Edje.</p>
+
+<pre class="prettyprint">program
+{
+ name: "text_show";
+ signal: "elm,state,text,show";
+ source: "elm";
+ action: STATE_SET "show" 0.0;
+ transition: LINEAR ANIM_TIME;
+ target: "text";
+ after: "text_hide";
+}</pre>
+
+<p>In the block:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">signal [signal name]</span>
+ <p>Specifies the signals that cause the program to run. The signal received must match the specified source to run. Signals can be blocked, but you can only use 1 signal keyword per program.</p>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">source [source name]</span>
+ <p>Source of the accepted signal. Sources can be blocked, but you can only use 1 source keyword per program.</p>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">action [type] [param1] [param2]</span>
+ <p>Action to be performed by the program. Only 1 action can be specified per program.</p>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">transition [type] [length] [[interp val 1]] [[interp val 2]] [[option]]</span>
+ <p>Defines how transitions occur using the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action. <span style="font-family: Courier New,Courier,monospace">type</span> is the transition style, and <span style="font-family: Courier New,Courier,monospace">length</span> is a double specifying the time (in seconds) in which to perform the transition.</p>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">target [target]</span>
+ <p>Program or part on which the specified action acts. Multiple target keywords can be specified, but only 1 per target. <span style="font-family: Courier New,Courier,monospace">SIGNAL_EMIT</span>s do not have targets.</p>
+ </li>
+ <li><span style="font-family: Courier New,Courier,monospace">after [after]</span>
+ <p>Specifies a program to run after the current program completes. The source and signal parameters of a program run as an <span style="font-family: Courier New,Courier,monospace">after</span> are ignored. Multiple <span style="font-family: Courier New,Courier,monospace">after</span> statements can be specified per program.</p>
+ </li>
+</ul>
+
+<p>For more information about the Edje blocks, see the <a href="http://docs.enlightenment.org/auto/edje/edcref.html" target="_blank">Edje Data Collection reference</a>.</p>
+
+<p>The application first changes the state of the part and then runs the <span style="font-family: Courier New,Courier,monospace">text_hide</span> program.</p>
+
+<pre class="prettyprint">part
+{
+ name: "text";
+ type: TEXT;
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.0 1.0; to: middle_padding; }
+ rel2 { relative: 0.0 1.0; to: middle_padding; }
+ text { font: "Tizen:style=regular"; size: 25; min: 1 1; }
+ // Alpha value set as 255
+ color: 0 0 0 255;
+ visible: 0;
+ }
+ description
+ {
+ state: "show" 0.0;
+ inherit: "default" 0.0;
+ visible: 1;
+ // Text show program make alpha value changed to 20 from 255
+ color: 0 0 0 20;
+ }
+}</pre>
+
+<p>The alpha value of the text part is changed from 255 to 20 for 3 seconds (<span style="font-family: Courier New,Courier,monospace">ANIM_TIME</span>).</p>
+
+<pre class="prettyprint">program
+{
+ name: "text_hide";
+ signal: "elm,state,hide,text";
+ source: "elm";
+ action: STATE_SET "default" 0.0;
+ target: "text";
+ after: "text_restore";
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">text_hide</span> program renders the text part invisible. The application then runs the <span style="font-family: Courier New,Courier,monospace">text_restore</span> program.</p>
+
+<p>The following code sends a signal to the C code:</p>
+
+<pre class="prettyprint">program
+{
+ name: "text_restore";
+ action: SIGNAL_EMIT "text,change" "LayoutSignal";
+]}</pre>
+
+<p>After the transition, the <span style="font-family: Courier New,Courier,monospace">text_restore</span> program is run to send a signal to the C code. Edje invokes the callback function in the C code. The <span style="font-family: Courier New,Courier,monospace">elm_object_text_set()</span> function changes the button text from "Disabled" back to "Send Signal".</p>
+
+<pre class="prettyprint">static void
+receive_clicked_cb(void *data, Evas_Object *obj, const char *emission, const char *source)
+{
+ // Edje sent signal to c
+ Evas_Object *btn = data;
+
+ elm_object_disabled_set(btn, EINA_FALSE);
+ elm_object_text_set(btn, "Send Signal");
+}</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
--- /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 Sample] List Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] List Sample Overview</h1>
+
+<p>The List sample demonstrates how to use double-linked list data structure using EFL list functions. In addition, it shows some ways to append given data to the given linked list.</p>
+
+<p>The sample uses the list functions, such as <span style="font-family: Courier New,Courier,monospace;">eina_list_append()</span> for appending the given data to the given linked list, <span style="font-family: Courier New,Courier,monospace;">eina_list_nth_list()</span> to get the n<sup>th</sup> member's list node in a list, and <span style="font-family: Courier New,Courier,monospace;">eina_list_append_relative()</span> for inserting the given data into the given linked list after the specified data. It can store data of any type in the form of void pointers.</p>
+
+<p>The following log shows the result of the List sample.</p>
+
+<pre class="prettyprint">
+I/USR_TAG ( 6186): tigh
+I/USR_TAG ( 6186): adar
+I/USR_TAG ( 6186): baltar
+I/USR_TAG ( 6186): roslin
+I/USR_TAG ( 6186): ----------
+I/USR_TAG ( 6186): adama
+I/USR_TAG ( 6186): tigh
+I/USR_TAG ( 6186): lampkin
+I/USR_TAG ( 6186): adar
+I/USR_TAG ( 6186): gaeta
+I/USR_TAG ( 6186): cain
+I/USR_TAG ( 6186): zarek
+I/USR_TAG ( 6186): baltar
+I/USR_TAG ( 6186): roslin
+</pre>
+
+<p class="figure">Figure: Eina list</p>
+<p align="center"> <img alt="Eina list" src="../images/eina_list.png" /> </p>
+
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window that does not do anything in this sample application. However, it contains list functions and you can see the result in the log output.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When using the <span style="font-family: Courier New,Courier,monospace">eina_list_prepend()</span>, <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative()</span>, or <span style="font-family: Courier New,Courier,monospace">eina_list_append_relative_list()</span> functions, list (the first argument) must be a pointer to the first element of the list.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // List
+ Eina_List *list = NULL;
+ Eina_List *l; // List that is used as an iterator and points to the current node
+ void *list_data;
+
+ // Append the given data to the given linked list
+ list = eina_list_append(list, "tigh");
+ list = eina_list_append(list, "adar");
+ list = eina_list_append(list, "baltar");
+ list = eina_list_append(list, "roslin");
+
+ EINA_LIST_FOREACH(list, l, list_data)
+ dlog_print(DLOG_INFO, "USR_TAG", "%s", (char*)list_data);
+ dlog_print(DLOG_INFO, "USR_TAG", "----------");
+
+ l = eina_list_nth_list(list, 1); // Get the nth member's list node in a list
+ list = eina_list_append_relative_list(list, "cain", l);
+ list = eina_list_append_relative(list, "zarek", "cain");
+ list = eina_list_prepend(list, "adama");
+ list = eina_list_prepend_relative(list, "gaeta", "cain");
+ list = eina_list_prepend_relative_list(list, "lampkin", l);
+
+ EINA_LIST_FOREACH(list, l, list_data)
+ dlog_print(DLOG_INFO, "USR_TAG", "%s", (char*)list_data);
+
+ eina_list_free(list);
+
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] MessageBubble Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] MessageBubble Sample Overview</h1>
+
+
+ <p>The [UI Sample] MessageBubble View sample application demonstrates how to make a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+
+<p>It uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conform</span> and <span style="font-family: Courier New,Courier,monospace">elm_scroller</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_box</span> and <span style="font-family: Courier New,Courier,monospace">elm_table</span> for UI component management inside the view, 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_entry</span> for the content inside view.</p>
+
+ <p>The following figure illustrates the message bubble view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] MessageBubble screen</p>
+ <p align="center"><img alt="[UI Sample] MessageBubble screen" src="../images/ui_messagebubble_sd.png" /></p>
+ <p align="center"><img alt="[UI Sample] MessageBubble screen" src="../images/ui_messagebubble_tree.png" /></p>
+
+ <h2>Application Layout</h2>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> is added to act as a view manager of the window and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and added to the naviframe.</p>
+
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *main_scroller, *bg;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+ elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+ elm_app_base_scale_set(1.8);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+ 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);
+
+ // Indicator BG
+ bg = elm_bg_add(ad->conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ evas_object_size_hint_weight_set(ad->nf, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_object_content_set(ad->conform, ad->nf);
+ evas_object_show(ad->nf);
+
+ // Main view
+ main_scroller = create_main_view(ad);
+ elm_naviframe_item_push(ad->nf, "Message Bubble", NULL, NULL, main_scroller, NULL);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<h2>Main View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main view content, the main scroller and main box. The main box contains 2 objects, a bubble scroller and an input field table. The scroller can be scrolled from the left-top to the left-bottom part of the screen.</p>
+
+<pre class="prettyprint">static Evas_Object*
+create_main_view(appdata_s *ad)
+{
+ Evas_Object *main_scroller, *input_field_table;
+
+ main_scroller = elm_scroller_add(ad->nf);
+ elm_scroller_bounce_set(main_scroller, EINA_FALSE, EINA_TRUE);
+ elm_scroller_origin_reverse_set(main_scroller, EINA_FALSE, EINA_TRUE);
+ evas_object_size_hint_weight_set(main_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(main_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_show(main_scroller);
+
+ ad->main_box = elm_box_add(main_scroller);
+ elm_box_align_set(ad->main_box, 0, 0);
+ evas_object_size_hint_weight_set(ad->main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(ad->main_box);
+</pre>
+
+<p>A scroller is added to the main view, and a box structure to the scroller. The box is used for making a list of bubbles.</p>
+
+<pre class="prettyprint">
+ ad->bubble_scroller = elm_scroller_add(ad->main_box);
+ elm_scroller_bounce_set(ad->bubble_scroller, EINA_FALSE, EINA_TRUE);
+ evas_object_size_hint_weight_set(ad->bubble_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->bubble_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ ad->bubble_box = elm_box_add(ad->bubble_scroller);
+ elm_box_align_set(ad->bubble_box, 0, 0);
+ evas_object_size_hint_weight_set(ad->bubble_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_show(ad->bubble_box);
+ elm_box_padding_set(ad->bubble_box, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
+
+ elm_object_content_set(ad->bubble_scroller, ad->bubble_box);
+ evas_object_show(ad->bubble_scroller);
+ elm_box_pack_end(ad->main_box, ad->bubble_scroller);
+
+</pre>
+
+<p>An input field table is added to the main view using the <span style="font-family: Courier New,Courier,monospace">create_input_field_table(ad)</span> function. The input field table is a UI component containing buttons for entering and sending messages. This table is separate from the scroller.</p>
+
+<pre class="prettyprint">
+ input_field_table = create_input_field_table(ad);
+ evas_object_show(input_field_table);
+ elm_box_pack_end(ad->main_box, input_field_table);
+ elm_object_content_set(main_scroller, ad->main_box);
+</pre>
+
+<p>After the main elements of the MessageBubble are created, the application is ready to load saved messages. The following sample example uses sample messages.</p>
+
+<pre class="prettyprint">
+ load_messages(ad);
+
+ return main_scroller;
+}
+</pre>
+
+<p>Message bubbles are added using the <span style="font-family: Courier New,Courier,monospace">create_bubble_table()</span> function. This function creates a table container that includes 2 labels with a bubble background. To show the latest message at the bottom of the screen, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_start()</span> function. To show the last message on top, use the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function. You can see the latest messages, when the messages are loaded.</p>
+<p>If there are several messages to be loaded, use the <span style="font-family: Courier New,Courier,monospace">idler</span> callback to load messages.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_input_field_table(ad)</span> function creates the content of the view by composing a scroller structure that contains the screen elements. The scroller contains a box layout with the images.</p>
+
+<pre class="prettyprint">
+static void
+load_messages(appdata_s *ad)
+{
+ Evas_Object *bubble_table;
+
+ ad->total_messages = NUM_OF_SAMPLE_MESSAGES;
+ ad->num_of_bubbles = 0;
+ int count = ad->total_messages - 1;
+
+ while (count >= 0)
+ {
+ bubble_table = create_bubble_table(ad->bubble_box, count % 2 + 1,
+ bubble_messages[count],
+ bubble_times[count]);
+ evas_object_show(bubble_table);
+ elm_box_pack_start(ad->bubble_box, bubble_table);
+ ad->num_of_bubbles++;
+ count--;
+ }
+}</pre>
+
+<p>Create the layout with a table and button components using the <span style="font-family: Courier New,Courier,monospace">create_bubble_table()</span> function. The background is created as an Evas rectangle object, and its color is set with a rectangle object.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_bubble_table(Evas_Object *parent, Message_Bubble_Style style, const char *main_text, const char *sub_text)
+{
+ Evas_Object *bubble_table, *button, *bg, *main_label, *sub_label;
+ Eina_Strbuf *strbuf = NULL;
+ char *buf = NULL;
+
+ bubble_table = elm_table_add(parent);
+ evas_object_size_hint_weight_set(bubble_table, EVAS_HINT_EXPAND, 0.0);
+ elm_table_padding_set(bubble_table, ELM_SCALE_SIZE(5), ELM_SCALE_SIZE(5));
+ evas_object_show(bubble_table);
+
+ button = elm_button_add(bubble_table);
+ elm_object_style_set(button, "transparent");
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ bg = evas_object_rectangle_add(evas_object_evas_get(button));
+ elm_object_content_set(button, bg);
+ evas_object_event_callback_add(button, EVAS_CALLBACK_MOUSE_DOWN, bubble_button_mouse_down_cb, bg);
+ evas_object_event_callback_add(button, EVAS_CALLBACK_MOUSE_UP, bubble_button_mouse_up_cb, bg);
+ evas_object_show(button);
+</pre>
+
+<p>Add 2 label components: </p>
+<ul><li>Main label for the message</li>
+<li>Sub-label for showing a timestamp</li>
+</ul>
+<p>Create 2 bubble components for the sender and receiver. The bubbles differ by their alignment, color, and position in the table.</p>
+
+<pre class="prettyprint">
+ main_label = elm_label_add(bubble_table);
+ elm_object_text_set(main_label, buf);
+ elm_label_wrap_width_set(main_label, ELM_SCALE_SIZE(BUBBLE_TEXT_WIDTH));
+ elm_label_line_wrap_set(main_label, ELM_WRAP_MIXED);
+ evas_object_size_hint_weight_set(main_label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(main_label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_repeat_events_set(main_label, EINA_TRUE);
+ evas_object_show(main_label);
+
+ sub_label = elm_label_add(bubble_table);
+ elm_object_text_set(sub_label, buf);
+ evas_object_size_hint_weight_set(sub_label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_repeat_events_set(sub_label, EINA_TRUE);
+ evas_object_show(sub_label);
+
+ switch (style)
+ {
+ case MESSAGE_BUBBLE_SENT:
+ evas_object_size_hint_align_set(bubble_table, 1.0, 0.0);
+ evas_object_size_hint_align_set(sub_label, 1.0, EVAS_HINT_FILL);
+ evas_object_color_set(bg, 200, 170, 100, 255);
+ elm_table_pack(bubble_table, button, 0, 0, 1, 2);
+ elm_table_pack(bubble_table, main_label, 0, 0, 1, 1);
+ elm_table_pack(bubble_table, sub_label, 0, 1, 1, 1);
+ break;
+ case MESSAGE_BUBBLE_RECEIVE:
+ evas_object_size_hint_align_set(bubble_table, 0.0, 0.0);
+ evas_object_size_hint_align_set(sub_label, 0.0, EVAS_HINT_FILL);
+ evas_object_color_set(bg, 100, 170, 200, 255);
+ elm_table_pack(bubble_table, button, 0, 0, 1, 2);
+ elm_table_pack(bubble_table, main_label, 0, 0, 1, 1);
+ elm_table_pack(bubble_table, sub_label, 0, 1, 1, 1);
+ break;
+ case MESSAGE_BUBBLE_NONE:
+ case MESSAGE_BUBBLE_LAST:
+ default:
+ break;
+ }
+
+ return bubble_table;
+}
+</pre>
+
+<p>Add the table component, button component, and the rectangle object in the layout using the <span style="font-family: Courier New,Courier,monospace">create_input_field_table()</span> function.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_input_field_table(appdata_s *ad)
+{
+ Evas_Object *table, *button, *bg;
+
+ table = elm_table_add(ad->main_box);
+ elm_table_homogeneous_set(table, EINA_TRUE);
+ evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(table, EVAS_HINT_FILL, 1.0);
+ evas_object_show(table);</pre>
+
+<p>Add another button and rectangle to show the background color of the new entry. The entry is added on multiple lines with a guide text. Add callback functions to change the background color, when the entry focus state changes.</p>
+
+<pre class="prettyprint"> button = elm_button_add(table);
+ elm_object_style_set(button, "transparent");
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ bg = evas_object_rectangle_add(evas_object_evas_get(button));
+ elm_object_content_set(button, bg);
+ evas_object_color_set(bg, 120, 220, 220, 255);
+ evas_object_show(button);
+ elm_table_pack(table, button, 0, 0, 3, 2);
+ button = elm_button_add(table);
+ elm_object_style_set(button, "transparent");
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+ bg = evas_object_rectangle_add(evas_object_evas_get(button));
+ elm_object_content_set(button, bg);
+ evas_object_color_set(bg, 0, 0, 0, 0);
+ evas_object_show(button);
+ elm_table_pack(table, button, 0, 0, 2, 2);
+
+ ad->input_field_entry = elm_entry_add(table);
+ elm_object_part_text_set(ad->input_field_entry, "elm.guide", "Enter Message");
+ evas_object_size_hint_weight_set(ad->input_field_entry, EVAS_HINT_EXPAND, 0.0);
+ evas_object_size_hint_align_set(ad->input_field_entry, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ evas_object_smart_callback_add(ad->input_field_entry, "focused", entry_focused_cb, bg);
+ evas_object_smart_callback_add(ad->input_field_entry, "unfocused", entry_unfocused_cb, bg);
+ evas_object_show(ad->input_field_entry);
+ elm_table_pack(table, ad->input_field_entry, 0, 0, 2, 2);
+</pre>
+
+<p>Clicking the <strong>Send</strong> button appends a new bubble to the message bubble box. The button handler includes a callback for detecting button clicks.</p>
+
+<pre class="prettyprint">
+ button = elm_button_add(table);
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, 1.0, 1.0);
+ elm_object_text_set(button, "SEND");
+ evas_object_smart_callback_add(button, "clicked", send_button_clicked_cb, ad);
+ evas_object_show(button);
+ elm_table_pack(table, button, 2, 1, 1, 1);
+
+ return table;
+}
+
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">send_message()</span> function is called when the user clicks the <strong>Send</strong> button. It reads the text from the entry field and inserts it in a message bubble. The bubble is appended to the bottom of bubble box using the <span style="font-family: Courier New,Courier,monospace">elm_box_pack_end()</span> function.</p>
+<p>Displaying the message bubble requires detecting the height of the bubble box. This is done using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_child_size_get()</span> function. After this, the scroller is moved to the bottom of the screen using the <span style="font-family: Courier New,Courier,monospace">elm_scroller_region_show()</span> function.</p>
+
+<pre class="prettyprint">
+static void
+send_message(appdata_s *ad)
+{
+ Evas_Coord w, h;
+ Evas_Object *bubble_table;
+ const char *main_text = NULL;
+
+ if (!ad->input_field_entry)
+ return;
+ main_text = elm_entry_entry_get(ad->input_field_entry);
+ if (!main_text || (strlen(main_text) == 0))
+ return;
+
+ bubble_table = create_bubble_table(ad->bubble_box, MESSAGE_BUBBLE_SENT,
+ elm_entry_entry_get(ad->input_field_entry),
+ "00:00 AM");
+ evas_object_show(bubble_table);
+ elm_box_pack_end(ad->bubble_box, bubble_table);
+ ad->num_of_bubbles++;
+ ad->total_messages++;
+ elm_entry_entry_set(ad->input_field_entry, "");
+ elm_scroller_child_size_get(ad->bubble_scroller, &w, &h);
+ elm_scroller_region_show(ad->bubble_scroller, 0, h, 0, 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 - 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 Sample] Proxy Object Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Proxy Object Sample Overview</h1>
+
+<p>The Proxy Object sample demonstrates how to make a proxy object for an Evas object.</p>
+
+<p>The following figure illustrates the main screen of Proxy Object.</p>
+
+<p class="figure">Figure: Proxy Object screen</p>
+<p align="center"><img alt="Proxy Object screen" src="../images/proxy_object.png" /></p>
+
+
+<h2>Implementation</h2>
+
+<p>The following code snippet shows the struct for dealing with proxy objects.</p>
+
+<pre class="prettyprint">
+struct anim_data
+{
+ Evas_Object *btn;
+ Evas_Object *img1;
+ Evas_Object *img2;
+};
+</pre>
+
+<p>The following code snippet demonstrates how to create proxy objects. The <span style="font-family: Courier New,Courier,monospace">evas_object_image_source_set()</span> function creates a proxy object for an <span style="font-family: Courier New,Courier,monospace">Evas_Object</span>. The <span style="font-family: Courier New,Courier,monospace">evas_object_image_source_visible_set()</span> function sets the proxy object to be visible.</p>
+
+<pre class="prettyprint">
+void
+proxy_exam(Evas_Object *win)
+{
+ static struct anim_data ad;
+
+ ad.btn = elm_button_add(win);
+ elm_object_text_set(ad.btn, "Proxy Object");
+ evas_object_move(ad.btn, 100, 100);
+ evas_object_resize(ad.btn, 200, 200);
+ evas_object_show(ad.btn);
+
+ Evas *evas = evas_object_evas_get(win);
+ ad.img1 = evas_object_image_filled_add(evas);
+ evas_object_image_source_set(ad.img1, ad.btn);
+ evas_object_image_source_visible_set(ad.img1, EINA_FALSE);
+ evas_object_move(ad.img1, 100, 100);
+ evas_object_resize(ad.img1, 200, 200);
+ evas_object_show(ad.img1);
+
+ ad.img2 = evas_object_image_filled_add(evas);
+ evas_object_image_source_set(ad.img2, ad.btn);
+ evas_object_move(ad.img2, 100, 300);
+ evas_object_resize(ad.img2, 200, 200);
+ evas_object_show(ad.img2);
+}
+</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
--- /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 Sample] Rectangle Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] Rectangle Sample Overview</h1>
+
+<p>The Rectangle sample demonstrates how to display a rectangle on the canvas using EFL Evas object functions. It also moves and resizes the rectangle.</p>
+
+<p>The sample uses functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_object_rectangle_add()</span>, for adding an rectangle to the given Evas, and basic object manipulation functions, such as <span style="font-family: Courier New,Courier,monospace;">evas_object_move()</span> and <span style="font-family: Courier New,Courier,monospace;">evas_object_resize()</span>, for moving and changing the size of the rectangle.</p>
+
+<p>The following figure illustrates the main screen of Rectangle.</p>
+
+<p class="figure">Figure: Rectangle screen</p>
+<p align="center"><img alt="Rectangle screen" src="../images/rectangle.png" /></p>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window which consists of a rectangle (Evas object) added with the <span style="font-family: Courier New,Courier,monospace">evas_object_rectangle_add()</span> function.</p>
+
+<p>It also moves the rectangle to the given x, y coordination inside its canvas viewport using the <span style="font-family: Courier New,Courier,monospace">evas_object_move()</span> function, and changes the size of the image using the <span style="font-family: Courier New,Courier,monospace">evas_object_resize()</span> function.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Rectangle
+ Evas *evas = evas_object_evas_get(ad->conform);
+
+ // Add a rectangle to the given Evas
+ Evas_Object *bg = evas_object_rectangle_add(evas);
+
+ // Set the general/main color of the given Evas object to the given one
+ evas_object_color_set(bg, 255, 0, 0, 255);
+
+ // Move the given Evas object to the given location inside its canvas viewport
+ evas_object_move(bg, 50, 50);
+
+ // Change the size of the given Evas object
+ evas_object_resize(bg, 200, 200);
+
+ // Make the given Evas object visible
+ evas_object_show(bg);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</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
--- /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 Sample] RelativePositioning Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] RelativePositioning Sample Overview</h1>
+
+<p>The [UI Sample] RelativePositioning sample application demonstrates how to position an object in relation to another object using the EDC <span style="font-family: Courier New,Courier,monospace;">to</span> keyword.</p>
+
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace;">elm_conformant</span>, for view management, containers, such as <span style="font-family: Courier New,Courier,monospace;">elm_layout</span>, for UI component management inside the view, and objects, such as <span style="font-family: Courier New,Courier,monospace;">elm_rectangle</span>, for the contents of the EDC view.</p>
+
+<p>The following figure illustrates the main screen of the sample, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] RelativePositioning main screen</p>
+<p align="center"><img alt="[UI Sample] RelativePositioning main screen" src="../images/relative_main.png" /></p>
+
+<p align="center"><img alt="[UI Sample] RelativePositioning UI component tree" src="../images/edc_main_tree.png" /></p>
+
+<h2 id="layout" name="layout">Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_base_gui()</span> function creates the window, conformant, and layout. The EDC file is then inserted into the layout.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Create window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Create 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 base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ ad->layout = elm_layout_add(ad->win);
+ elm_layout_file_set(ad->layout, edj_path, GRP_MAIN);
+ evas_object_size_hint_weight_set(ad->layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ eext_object_event_callback_add(ad->layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->layout);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<h2 id="view" name="view">EDC View</h2>
+
+<p>The following figure illustrates the EDC view wireframe and tree structure.</p>
+
+<p class="figure">Figure: EDC view</p>
+<p align="center"><img alt="EDC view contents wireframe" src="../images/relative_view_contents_wireframe.png" /></p>
+
+<p align="center"><img alt="EDC view contents tree" src="../images/relative_view_contents_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">relativepositioning.edc</span> file is used to position the objects in the EDC view. The file uses the EDC <span style="font-family: Courier New,Courier,monospace;">to</span> keyword for specifying relative positioning. In this sample, the EDC file consists of 5 rectangles positioned in relation to one another.</p>
+
+<p>The following code is the entire EDC script of the <span style="font-family: Courier New,Courier,monospace;">relativepositioning.edc</span> file:</p>
+
+<pre class="prettyprint">
+collections
+{
+ group
+ {
+ name: "main";
+ parts
+ {
+ part
+ {
+ name: "box1";
+ type: RECT;
+ mouse_events: 0;
+ description
+ {
+ state: "default" 0.0;
+ align: 0.0 0.0;
+ rel1 { relative: 0.0 0.0; }
+ rel2 { relative: 0.5 0.2; }
+ color: 255 0 0 128;
+ }
+ }
+ part
+ {
+ name: "box2";
+ type: RECT;
+ mouse_events: 0;
+ description
+ {
+ state: "default" 0.0;
+ rel1
+ {
+ relative: 0.0 1.0;
+ to: "box1";
+ }
+ rel2
+ {
+ relative: 1.0 2.0;
+ to: "box1";
+ }
+ color: 0 255 0 128;
+ }
+ }
+ part
+ {
+ name: "box3";
+ type: RECT;
+ description
+ {
+ state: "default" 0.0;
+ rel1
+ {
+ relative: 0.0 1.0;
+ to: "box2";
+ }
+ rel2
+ {
+ relative: 1.0 2.0;
+ to: "box2";
+ }
+ color: 0 0 255 128;
+ }
+ }
+ part
+ {
+ name: "box4";
+ type: RECT;
+ mouse_events: 0;
+ description
+ {
+ state: "default" 0.0;
+ rel1
+ {
+ relative: 0.0 1.0;
+ to: "box3";
+ }
+ rel2
+ {
+ relative: 1.0 2.0;
+ to: "box3";
+ }
+ color: 255 255 0 128;
+ }
+ }
+ part
+ {
+ name: "box5";
+ type: RECT;
+ mouse_events: 0;
+ description
+ {
+ state: "default" 0.0;
+ rel1
+ {
+ relative: 0.0 1.0;
+ to: "box4";
+ }
+ rel2
+ {
+ relative: 1.0 2.0;
+ to: "box4";
+ }
+ color: 255 0 255 128;
+ }
+ }
+ }
+ }
+}
+</pre>
+
+<p>To position a <span style="font-family: Courier New,Courier,monospace;">part</span> relative to another object, use the <span style="font-family: Courier New,Courier,monospace;">to</span> keyword to specify the object. The position of the <span style="font-family: Courier New,Courier,monospace;">part</span> becomes dependent on the position of the object. The relative position is calculated from the left-top corner of the target object.</p>
+
+<p>The region occupied by <span style="font-family: Courier New,Courier,monospace;">box1</span> (a red rectangle) is determined by ratio: its left-top corner is at (0.0, 0.0) and right-bottom corner at (0.5, 0.2). The region occupied by <span style="font-family: Courier New,Courier,monospace;">box2</span> (a green rectangle) is determined by ratio relative to <span style="font-family: Courier New,Courier,monospace;">box1</span>: its left-top corner is positioned at (0.0, 1.0), which is the left-bottom corner of <span style="font-family: Courier New,Courier,monospace;">box1</span>, and its right-bottom corner is positioned at (1.0, 2.0), which is once the width and twice the height of <span style="font-family: Courier New,Courier,monospace;">box1</span>. This same rule is applied to each subsequent <span style="font-family: Courier New,Courier,monospace;">part</span>, creating a vertical column of same-sized rectangles.</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>[UI Sample] Setting Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] Setting Sample Overview</h1>
+ <p>The [UI Sample] Setting sample application demonstrates how to implement a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+<p>It 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 the view management, <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for UI component management inside the view, and <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> for the content inside the main view.</p>
+
+
+ <h2>Main View</h2>
+
+ <p>The following figure illustrates the main view of the Settings sample application, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: [UI Sample] Setting screen</p>
+ <p align="center"><img alt="[UI Sample] Setting screen" src="../images/ui_setting_sd.png" /></p>
+ <p align="center"><img alt="[UI Sample] Setting screen" src="../images/ui_setting_tree.png" /></p>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, and adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> is added to act as a view manager of the window and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function and added to the naviframe.</p>
+
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *bg;
+ Elm_Object_Item *nf_it;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_wm_desktop_layout_support_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // 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);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+
+ // Indicator BG
+ bg = elm_bg_add(ad->conform);
+ elm_object_style_set(bg, "indicator/headerbg");
+ elm_object_part_content_set(ad->conform, "elm.swallow.indicator_bg", bg);
+ evas_object_show(bg);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, nf_back_cb, ad);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_MORE, nf_more_cb, ad);
+ elm_object_content_set(ad->conform, ad->nf);
+ evas_object_show(ad->nf);
+
+ // Genlist
+ ad->genlist = create_genlist(ad->nf);
+
+ nf_it = elm_naviframe_item_push(ad->nf, "Settings", NULL, NULL, ad->genlist, NULL);
+
+ // 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);
+}</pre>
+
+
+<h2>Pop-up View</h2>
+
+
+<p>When a menu key is clicked, the <span style="font-family: Courier New,Courier,monospace">keydown_cb()</span> function is called to create a pop-up menu.</p>
+
+<pre class="prettyprint">static Eina_Bool
+keydown_cb(void *data, int type, void *event)
+{
+ appdata_s *ad = data;
+ Ecore_Event_Key *ev = event;
+ if (ev->keyname && !strcmp(ev->keyname, KEY_END))
+ {
+ // Hide the window
+ elm_win_lower(ad->win);
+ return ECORE_CALLBACK_DONE;
+ }
+ else if (ev->keyname && !strcmp(ev->keyname, KEY_MORE))
+ {
+ if (!ad->popup)
+ ad->popup = create_menu_popup(ad);
+ else
+ {
+ evas_object_del(ad->popup);
+ ad->popup = NULL;
+ }
+ return ECORE_CALLBACK_DONE;
+ }
+
+ return ECORE_CALLBACK_PASS_ON;
+}
+</pre>
+
+<p class="figure">Figure: Pop-up screen</p>
+<p align="center"><img alt="Pop-up screen" src="../images/ui_setting_popup_sd.png" /></p>
+
+
+<p>The pop-up menu has 2 items. When the user clicks one of them, the main view is changed to the second view.</p>
+
+<pre class="prettyprint">
+static void
+popup_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = (appdata_s *)data;
+ Evas_Object *label;
+ Elm_Object_Item *nf_it = elm_naviframe_top_item_get(ad->nf);
+ const char *text = elm_object_item_text_get((Elm_Object_Item *) event_info);
+ const char *title = elm_object_item_text_get(nf_it);
+
+ evas_object_del(ad->popup);
+ ad->popup = NULL;
+
+ if (text && !strcmp(text, "Second View"))
+ {
+ if (tot; e && strcmp(title, label))
+ {
+ label = create_label(ad->nf, "Second View");
+ elm_naviframe_item_push(ad->nf, "Help", NULL, NULL, layout, NULL);
+ }
+ }
+ else if (text && !strcmp(text, "Settings"))
+ {
+ if (title && strcmp(title, label))
+ {
+ elm_naviframe_item_pop(ad->nf);
+ }
+ }
+}</pre>
+
+<h2>Second View</h2>
+
+<p>When a genlist or pop-up menu item is clicked, the main view is changed to the second view.</p>
+
+<p class="figure">Figure: Second View screen</p>
+<p align="center"><img alt="Second View screen" src="../images/ui_setting_2nd_sd.png" /></p>
+
+
+
+<pre class="prettyprint">
+static void
+gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *nf = (Evas_Object *)data, *label;
+ Elm_Object_Item *it = event_info;
+ item_data_s *id = elm_object_item_data_get(it);
+
+ // Downplay the item
+ elm_genlist_item_selected_set(it, EINA_FALSE);
+
+ // Create the second view
+
+ label = create_label(nf, "Second View");
+ elm_naviframe_item_push(nf, "Second View", NULL, NULL, label, NULL);
+}
+</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
--- /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 Sample] SNS Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] SNS Sample Overview</h1>
+
+ <p>The [UI Sample] SNS sample application demonstrates how to make a complex view by recursive composition of standard EFL UI components and containers in a UI component hierarchy.</p>
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conform</span>, <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>, <span style="font-family: Courier New,Courier,monospace">elm_scroller</span>, <span style="font-family: Courier New,Courier,monospace">elm_toolbar</span>, and <span style="font-family: Courier New,Courier,monospace">elm_panel</span> for the view management, containers, such as <span style="font-family: Courier New,Courier,monospace">elm_table</span> and <span style="font-family: Courier New,Courier,monospace">elm_box</span> for the UI component management inside the view, and UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_button</span>, <span style="font-family: Courier New,Courier,monospace">elm_label</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">elm_gengrid</span> for the content inside the view.</p>
+<p>The following figure illustrates the SNS view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: SNS view</p>
+ <p align="center"><img alt="SNS view" src="../images/ui_sns_sd_view.png" /></p>
+
+ <p align="center"><img alt="SNS view UI component tree" src="../images/ui_sns_sd_widget_tree.png" /></p>
+
+<h2>Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window, conformant, and naviframe. It also creates the view layout and drawer (<span style="font-family: Courier New,Courier,monospace">elm_panel</span>). The drawer is inserted in the layout. The drawer button is inserted in the naviframe.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *layout, *bg, *drawer, *btn;
+ Elm_Object_Item *nf_it;
+
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+ elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+ elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
+
+ 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->conform = create_conform(ad->win);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ elm_object_content_set(ad->conform, ad->nf);
+
+ layout = create_main_view(ad);
+ nf_it = elm_naviframe_item_push(ad->nf, _("News Feed"), NULL, NULL, layout, "basic");
+
+ // Drawer bg
+ bg = create_bg(layout);
+ elm_object_part_content_set(layout, "elm.swallow.bg", bg);
+
+ // Drawer
+ drawer = create_panel(layout);
+ eext_object_event_callback_add(drawer, EEXT_CALLBACK_BACK, drawer_back_cb, ad);
+ evas_object_smart_callback_add(drawer, "scroll", panel_scroll_cb, bg);
+ elm_object_part_content_set(layout, "elm.swallow.right", drawer);
+
+ // Drawers Button
+ btn = create_drawers_btn(ad->nf, btn_cb, drawer);
+ elm_object_item_part_content_set(nf_it, "title_right_btn", btn);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+
+ evas_object_event_callback_add(ad->win, EVAS_CALLBACK_RESIZE, view_size_reset, ad);
+}
+</pre>
+
+<h2>Main View</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the main content. It consists of a single layout containing a box. The box contains the tab bar (<span style="font-family: Courier New,Courier,monospace">elm_toolbar</span>) and a scroller. The toolbar acts as the view changer and indicator. Its vertical weight is 0.12, which means that the toolbar occupies 12% of the box. The rest of the area contains the scroller, which includes another box. The box contains 4 views horizontally. Each view has a minimum size, which is the same as the screen width.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_main_view(appdata_s *ad)
+{
+ Evas_Object *layout, *box, *box2, *table;
+ Evas_Object *first_view, *second_view, *third_view, *fourth_view;
+
+ // Layout for drawer
+ layout = create_drawer_layout(ad->nf);
+
+ // Box
+ box = elm_box_add(layout);
+ evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_part_content_set(layout, "elm.swallow.content", box);
+
+ // Tab bar
+ ad->tabbar = _create_tabbar(box, ad);
+ evas_object_size_hint_weight_set(ad->tabbar, EVAS_HINT_EXPAND, 0.12);
+ evas_object_size_hint_align_set(ad->tabbar, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(box, ad->tabbar);
+
+ // Scroller
+ ad->scroller = create_scroller(box, ad);
+ evas_object_size_hint_weight_set(ad->scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(box, ad->scroller);
+
+ // Box
+ box2 = elm_box_add(ad->scroller);
+ elm_box_horizontal_set(box2, EINA_TRUE);
+ evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_content_set(ad->scroller, box2);
+
+ // First view
+ first_view = create_first_view(box2, ad);
+ ad->first_view_rect = min_set(first_view, box2, 0, 0);
+
+ return layout;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">min_set()</span> function is used for setting the minimum value of a UI component. Currently, the <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_min_set()</span> function does not work for an elementary UI component. Instead, this function uses the fact that a table contains a rectangle with a minimum value. The object expands to the minimum size of the rectangle.</p>
+<pre class="prettyprint">
+static Evas_Object *
+min_set(Evas_Object *parent, Evas_Object *box, Evas_Coord w, Evas_Coord h)
+{
+ Evas_Object *table, *rect;
+
+ table = elm_table_add(box);
+ evas_object_show(table);
+
+ rect = evas_object_rectangle_add(evas_object_evas_get(table));
+ evas_object_size_hint_min_set(rect, w, h);
+ evas_object_size_hint_weight_set(rect, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(rect, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_table_pack(table, rect, 0, 0, 1, 1);
+
+ evas_object_size_hint_weight_set(obj, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(obj, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_table_pack(table, obj, 0, 0, 1, 1);
+
+ evas_object_size_hint_weight_set(table, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(table, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_pack_end(box, table);
+
+ return rect;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_tabbar()</span> function creates the tab bar using the <span style="font-family: Courier New,Courier,monospace">elm_toolbar()</span> function. The <span style="font-family: Courier New,Courier,monospace">ELM_TOOLBAR_SHRINK_EXPAND</span> parameter is set for items to occupy the same area in the toolbar area. The <span style="font-family: Courier New,Courier,monospace">elm_toolbar_transverse_expanded_set()</span> function expands the vertical size of the toolbar in the horizontal mode. Because the toolbar is used as a tab bar, at least 1 item should be selected. Set it using the <span style="font-family: Courier New,Courier,monospace">ELM_OBJECT_SELECT_MODE_ALWAYS</span> parameter.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_tabbar(Evas_Object *parent, appdata_s *ad)
+{
+ Evas_Object *tabbar;
+
+ tabbar = elm_toolbar_add(parent);
+ elm_toolbar_shrink_mode_set(tabbar, ELM_TOOLBAR_SHRINK_EXPAND);
+ elm_toolbar_transverse_expanded_set(tabbar, EINA_TRUE);
+ elm_toolbar_select_mode_set(tabbar, ELM_OBJECT_SELECT_MODE_ALWAYS);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/00_controlbar_icon_playlist.png", NULL, tabbar_first_cb, ad);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/00_controlbar_icon_artists.png", NULL, tabbar_second_cb, ad);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/00_controlbar_icon_dialer.png", NULL, tabbar_third_cb, ad);
+ elm_toolbar_item_append(tabbar, ICON_DIR"/00_controlbar_icon_more.png", NULL, tabbar_fourth_cb, ad);
+ evas_object_show(tabbar);
+
+ return tabbar;
+}
+</pre>
+<p>When a toolbar item is clicked, the <span style="font-family: Courier New,Courier,monospace">tabbar_first_cb()</span> function is called. In the function, the naviframe title changes and sets the scroll page value to 0.</p>
+<pre class="prettyprint">
+static void
+tabbar_first_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+
+ elm_object_item_part_text_set(elm_naviframe_top_item_get(ad->nf), "elm.text.title", "News Feed");
+ elm_scroller_page_bring_in(ad->scroller, 0, 0);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_scroller()</span> function creates a scroller and sets options for the page view. To use this view, the scroller should use the <span style="font-family: Courier New,Courier,monospace">tabbar</span> style instead of the <span style="font-family: Courier New,Courier,monospace">default</span> style. It creates an indicated bar above the tab bar. Since the bar is a horizontal scrollbar of the scroller, it should be always visible. Thus, the second parameter of the <span style="font-family: Courier New,Courier,monospace">elm_scroller_policy_set()</span> function is <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_POLICY_ON</span>.</p>
+
+<p>The horizontal page is set to 480 and the page moves only 1 page at a time.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_SINGLE_DIRECTION_HARD</span> parameter is for scrolling in the scroller. The scroller has 4 pages and each page can have their own scroller. In this case, if you scroll, both scrollers are scrolled. If you want the outside scroller is scrolled only horizontally and the scroller in the page is scrolled only vertically, use the <span style="font-family: Courier New,Courier,monospace">elm_scroller_single_direction_set()</span> function with the <span style="font-family: Courier New,Courier,monospace">ELM_SCROLLER_SINGLE_DIRECTION_HARD</span> parameter.</p>
+<p>To select a toolbar item at the end of a scroll animation, use the <span style="font-family: Courier New,Courier,monospace">scroll,anim,stop</span> smart callback.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_scroller(Evas_Object *parent, appdata_s *ad)
+{
+Evas_Object *scroller;
+
+ scroller = elm_scroller_add(parent);
+ elm_object_style_set(scroller, "tabbar");
+ elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_ON, ELM_SCROLLER_POLICY_OFF);
+ elm_scroller_page_size_set(scroller, 480, 0);
+ elm_scroller_page_scroll_limit_set(scroller, 1, 0);
+ elm_scroller_single_direction_set(scroller, ELM_SCROLLER_SINGLE_DIRECTION_HARD);
+ evas_object_smart_callback_add(scroller, "scroll,anim,stop", anim_stop_cb, ad);
+ evas_object_show(scroller);
+
+ return scroller;
+}
+</pre>
+
+<h2>First View</h2>
+
+<p>The following figure illustrates the first view, its wireframe structure, and the UI component tree.</p>
+
+ <p class="figure">Figure: SNS first view</p>
+ <p align="center"><img alt="SNS first view" src="../images/ui_sns_sd_first_view.png" /></p>
+
+ <p align="center"><img alt="SNS first view" src="../images/ui_sns_sd_first_widget_tree.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_first_view()</span> function creates the first view. It creates a scroller which contains a box and packs the content created by the <span style="font-family: Courier New,Courier,monospace">create_box_content()</span> function.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_first_view(Evas_Object *parent, appdata_s *ad)
+{
+ Evas_Object *scroller, *box, *content, *table;
+ int i;
+
+ scroller = elm_scroller_add(parent);
+ elm_scroller_policy_set(scroller, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+ elm_scroller_single_direction_set(scroller, ELM_SCROLLER_SINGLE_DIRECTION_HARD);
+
+ box = elm_box_add(scroller);
+ evas_object_size_hint_weight_set(box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(box, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_padding_set(box, 0, 30);
+ elm_object_content_set(scroller, box);
+
+ for (i = 0; i < 20; i++)
+ {
+ content = create_box_content(box);
+ min_set(content, box, 0, 0);
+ }
+
+ evas_object_show(scroller);
+
+ return scroller;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_box_content()</span> function creates a box which contains a label and a box. The second box contains 3 buttons and occupies 30% of the content area.</p>
+<pre class="prettyprint">
+Evas_Object *create_box_content(Evas_Object *parent)
+{
+ Evas_Object *box, *box2, *label, *btn;
+
+ box = elm_box_add(parent);
+
+ label = elm_label_add(box);
+ evas_object_size_hint_weight_set(label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(label, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_label_wrap_width_set(label, 30);
+ elm_label_line_wrap_set(label, ELM_WRAP_MIXED);
+ elm_object_text_set(label, "EFL is a collection of libraries that are independent
+ or may build on top of each-other to provide useful
+ features that complement an OS's existing environment,
+ rather than wrap and abstract it, trying to be their
+ own environment and OS in its entirety.");
+ elm_box_pack_end(box, label);
+ evas_object_show(label);
+
+ box2 = elm_box_add(box);
+ evas_object_size_hint_weight_set(box2, EVAS_HINT_EXPAND, 0.3);
+ evas_object_size_hint_align_set(box2, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_box_horizontal_set(box2, EINA_TRUE);
+ elm_box_padding_set(box2, 15, 0);
+ elm_box_pack_end(box, box2);
+ evas_object_show(box2);
+
+ btn = elm_button_add(box2);
+ evas_object_size_hint_weight_set(btn, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(btn, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_text_set(btn, "I like it");
+ elm_box_pack_end(box2, btn);
+ evas_object_show(btn);
+ evas_object_show(box);
+
+ return box;
+}
+</pre>
+<p>The descriptions of the second, third, and fourth view are omitted.</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>[UI Sample] StringShare Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] StringShare Sample Overview</h1>
+ <p>The StringShare sample demonstrates how to store a string and use it in multiple places throughout a program.</p>
+
+ <p>The following log shows the result of the StringShare sample.</p>
+
+<pre class="prettyprint">
+D/stringshare( 2975): The Cylons were created by man.
+D/stringshare( 2975): length : 31
+D/stringshare( 2975): 12 Cylon models. 7 are known. 4 live in secret. 1 will be revealed.
+D/stringshare( 2975): There are many copies. And they have a plan
+</pre>
+
+<h2>Implementation</h2>
+
+<p>The following code snippet demonstrates how to make a part of a string shared.</p>
+
+<pre class="prettyprint">
+const char *str1, *str2;
+const char *prologe1 = "The Cylons were created by man. They rebelled. They evolved.";
+
+str1 = eina_stringshare_add_length(prologe1, 31);
+</pre>
+
+<p>The following code snippet demonstrates many ways of creating shared strings including an equivalent to sprint.</p>
+
+<pre class="prettyprint">
+const char *prologe2 = "%d Cylon models. %d are known. %d live in secret. %d will be revealed.";
+str1 = eina_stringshare_printf(prologe2, 12, 7, 4, 1);
+
+const char *prologe3 = "There are many copies. And they have a plan";
+str1 = eina_stringshare_nprintf(45, "%s", prologe3);
+
+str2 = eina_stringshare_add(prologe3);
+dlog_print(DLOG_DEBUG, LOG_TAG, "%s", str2);
+</pre>
+
+<p>The following code snippet demonstrates how to delete and increase the stringshare.</p>
+
+<pre class="prettyprint">
+eina_stringshare_ref(str2);
+
+eina_stringshare_del(str1);
+eina_stringshare_del(str2);
+</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
--- /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 Sample] ThemeExtension Sample Overview</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"/></p>
+ </div>
+
+<h1>[UI Sample] ThemeExtension Sample Overview</h1>
+
+<p>The [UI Sample] ThemeExtension sample application demonstrates how to customize the look and feel of your application with custom styles that are not provided by default. You can use custom styles to change the default appearance of UI components. You need to provide all extra elements, such as image files, in separate Edje files.</p>
+
+<p>This sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for view management and <span style="font-family: Courier New,Courier,monospace">elm_button</span> for the content of the view.</p>
+
+<p>The following figure illustrates the main view of the [UI Sample] ThemeExtension sample application, its wireframe structure, and the UI component tree.</p>
+
+<p class="figure">Figure: [UI Sample] ThemeExtension screen</p>
+<p align="center"><img alt="[UI Sample] ThemeExtension screen" src="../images/ui_theme_extension_sd.png" /></p>
+<p align="center"><img alt="[UI Sample] ThemeExtension screen" src="../images/ui_theme_extension_sd_tree.png" /></p>
+
+<p>Use the following methods to customize the UI component theme in the application:</p>
+
+<pre class="prettyprint">
+elm_theme_extension_add(NULL, "/usr/apps/org.tizen.app/data/app_theme.edj");
+elm_object_style_set(button, "new_style");
+</pre>
+
+<p class="figure">Figure: Customized style</p>
+<p align="center"><img alt="Customized style" src="../images/ui_theme_extension_sd_style.png" /></p>
+
+<h2>Application Layout</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout:</p>
+
+<pre class="prettyprint">static void
+create_base_gui(appdata_s *ad)
+{
+ char edj_path[PATH_MAX] = {0, };
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ // Base layout
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ // Appends a theme extension to the list of extensions
+ elm_theme_extension_add(NULL, edj_path);
+
+ create_content(ad);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<p>The function starts by creating a window and then adds <span style="font-family: Courier New,Courier,monospace">elm_layout</span> to create the main view.</p>
+
+<p>The application uses an Edje file that contains custom themes. To apply a custom theme, the <span style="font-family: Courier New,Courier,monospace">app_get_resource()</span> function is called to retrieve the Edje file, and then the <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function is called to append a theme from the file to the application UI.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_theme_extension_add()</span> function adds the Edje file to the theme search path, which is used to search for themes beyond the default theme. The function takes the following parameters:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">NULL</span>: Theme to add (<span style="font-family: Courier New,Courier,monospace">NULL</span> means that the default theme is added)</li>
+ <li><span style="font-family: Courier New,Courier,monospace">edj_path</span>: Path of the Edje file containing the theme to add</li>
+</ul>
+
+<h2>Default and Customized Buttons</h2>
+
+<p>The following code adds 2 buttons to the layout:</p>
+
+<pre class="prettyprint">static void
+create_content(appdata_s *ad)
+{
+ Evas_Object *grid, *btn_origin, *btn_customized;
+
+ grid = elm_grid_add(ad->win);
+ elm_win_resize_object_add(ad->win, grid);
+ evas_object_show(grid);
+
+ btn_origin = elm_button_add(grid);
+ elm_object_text_set(btn_origin, "Default style");
+ elm_grid_pack(grid, btn_origin, 25, 30, 50, 10);
+ evas_object_show(btn_origin);
+
+ btn_customized = elm_button_add(ad->win);
+ // Sets the style to be used by a button
+ elm_object_style_set(btn_customized, "customized");
+ elm_object_text_set(btn_customized, "Customized style");
+ elm_grid_pack(grid, btn_customized, 25, 60, 50, 20);
+ evas_object_show(btn_customized);
+}</pre>
+
+<p>The first is a default button and the second a customized button. Use the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function to apply a custom style to the button. The style defines the button appearance.</p>
+
+<p>Styles vary from UI component to UI component and can also be defined by other themes by means of extensions and overlays.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function takes the following parameters:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace">btn_customized</span>: UI component that the style is applied to</li>
+ <li><span style="font-family: Courier New,Courier,monospace">customized</span>: Name of the style to apply to the UI component</li>
+</ul>
+
+<p>The following table shows a code comparison for a default button and customized button. The default code comes from the <span style="font-family: Courier New,Courier,monospace">efl-theme-tizen/2.3-mobile/widget/button.edc</span> file, and the customized code comes from the <span style="font-family: Courier New,Courier,monospace">efl-theme-tizen/2.3-mobile/WVGA-inc.edc</span> file.</p>
+
+<table>
+ <caption>
+ Table: Default and customized button
+ </caption>
+ <tbody>
+ <tr>
+ <th>Default code</th>
+ <th>Customized code</th>
+ </tr>
+ <tr>
+ <td><pre class="prettyprint">
+
+
+ group
+ {
+ name: "elm/button/base/default";
+ script
+ {
+ public mouse_down = 0;
+ public multi_down = 0;
+ }
+ images
+ {
+ image: "core_list_button_bg.#.png" COMP;
+ image: "core_list_button_effect_normal.#.png" COMP;
+ image: "core_list_button_effect_pressed.#.png" COMP;
+ }
+ parts
+ {
+ part
+ {
+ name: "base";
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: BUTTON_MIN_WIDTH BUTTON_MIN_HEIGHT;
+ image.normal: "core_list_button_bg.#.png";
+ color_class: "W012E1";
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ visible: 0;
+ }
+ }
+ part
+ {
+ name: "bg";
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1.to: "base";
+ rel2.to: "base";
+ image.normal: "core_list_button_bg.#.png";
+ color_class: "W012";
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ color_class: "W012P";
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ color_class: "W012D";
+ }
+ }
+ part
+ {
+ name: "bg_effect";
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1.to: "bg";
+ rel2.to: "bg";
+ image.normal: "core_list_button_effect_normal.#.png";
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ image.normal: "core_list_button_effect_pressed.#.png";
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ visible:0;
+ }
+ }
+ part
+ {
+ name: "padding_left_top";
+...
+...
+...
+ programs
+ {
+ program
+ {
+ name: "pressed";
+ signal: "mouse,down,1*";
+ source: "event";
+ script
+ {
+ if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0))
+ {
+ set_int(mouse_down, 1);
+ run_program(PROGRAM:"button_press1");
+ }
+ }
+ }
+ program
+ {
+ name: "button_press1";
+ script
+ {
+ new st[31];
+ new Float:vl;
+ get_state(PART:"bg", st, 30, vl);
+ if (strcmp(st, "disabled"))
+ {
+ set_state(PART:"base", "pressed", 0.0);
+ set_state(PART:"bg", "pressed", 0.0);
+ set_state(PART:"bg_effect", "pressed", 0.0);
+ set_state(PART:"elm.text", "pressed", 0.0);
+ emit("elm,action,press", "");
+ }
+ }
+ }
+ program
+ {
+ name: "unpressed";
+ signal: "mouse,up,1";
+ source: "event";
+ script
+ {
+ if (get_int(mouse_down) == 1)
+ {
+ set_int(mouse_down, 0);
+ run_program(PROGRAM:"button_unpress1");
+ }
+ }
+ }
+ program
+ {
+ name: "button_unpress1";
+ script
+ {
+ new st[31];
+ new Float:vl;
+ get_state(PART:"bg", st, 30, vl);
+ if (strcmp(st, "disabled"))
+ {
+ set_state(PART:"base", "default", 0.0);
+ set_state(PART:"bg", "default", 0.0);
+ set_state(PART:"bg_effect", "default", 0.0);
+ set_state(PART:"elm.text", "default", 0.0);
+ emit("elm,action,unpress", "");
+ }
+ }
+ }
+ program
+ {
+ name: "touch_snd";
+ signal: "mouse,clicked,1";
+ source: "event";
+ script
+ {
+ new st[31];
+ new Float:vl;
+ if (get_int(multi_down) == 0)
+ {
+ get_state(PART:"bg", st, 30, vl);
+ if (strcmp(st, "disabled"))
+ {
+ run_program(PROGRAM:"touch_sound");
+ emit("elm,action,click", "");
+ }
+ }
+ }
+ }
+ program
+ {
+ name: "touch_sound";
+ action: RUN_PLUGIN "touch_sound";
+ }
+...
+...
+...
+ program
+ {
+ name: "disable";
+ signal: "elm,state,disabled";
+ source: "elm";
+ action: STATE_SET "disabled" 0.0;
+ target: "bg";
+ target: "bg_effect";
+ target: "elm.text";
+ }
+ program
+ {
+ name: "enable";
+ signal: "elm,state,enabled";
+ source: "elm";
+ action: STATE_SET "default" 0.0;
+ target: "bg";
+ target: "bg_effect";
+ target: "elm.text";
+ }
+</pre></td>
+ <td><pre class="prettyprint">
+// Define value, button styles come from efl-theme-tizen/2.3-mobile/WVGA-inc.edc
+#define BUTTON_MIN_WIDTH 142
+#define BUTTON_MIN_HEIGHT 56
+#define BUTTON_PADDING_LEFT_RIGHT 8
+#define BUTTON_ICON_HEIGHT 46
+#define BUTTON_ICON_WIDTH 46
+#define BUTTON_TEXT_SIZE 30
+
+#define STYLE_TAGS \
+ tag: "br" "\n";\
+ tag: "ps" "ps";\
+ tag: "tab" "\t";\
+ tag: "b" "+ font_weight=Bold";
+
+styles
+{
+ style
+ {
+ name: "button_main";
+ base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
+ STYLE_TAGS
+ }
+ style
+ {
+ name: "button_main_dim";
+ base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
+ STYLE_TAGS
+ }
+ style
+ {
+ name: "button_main_press";
+ base: "font=Tizen:style=Regular font_size="BUTTON_TEXT_SIZE" color=#ffffff ellipsis=1.0";
+ STYLE_TAGS
+ }
+}
+
+collections
+{
+ group
+ {
+ name: "elm/button/base/customized";
+ script
+ {
+ public mouse_down = 0;
+ public multi_down = 0;
+ }
+ images
+ {
+ image: "green.png" COMP;
+ image: "red.png" COMP;
+ }
+ parts
+ {
+ part
+ {
+ name: "base";
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ min: BUTTON_MIN_WIDTH BUTTON_MIN_HEIGHT;
+ image.normal: "green.png";
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ visible: 0;
+ }
+ }
+ part
+ {
+ name: "bg";
+ scale: 1;
+ description
+ {
+ state: "default" 0.0;
+ rel1.to: "base";
+ rel2.to: "base";
+ image.normal: "green.png";
+ }
+ description
+ {
+ state: "pressed" 0.0;
+ inherit: "default" 0.0;
+ image.normal: "red.png";
+ }
+ description
+ {
+ state: "disabled" 0.0;
+ inherit: "default" 0.0;
+ visible:0;
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ part
+ {
+ name: "padding_left_top";
+...
+...
+...
+ programs
+ {
+ program
+ {
+ name: "pressed";
+ signal: "mouse,down,1*";
+ source: "event";
+ script
+ {
+ if ((get_int(multi_down) == 0) && (get_int(mouse_down) == 0))
+ {
+ set_int(mouse_down, 1);
+ run_program(PROGRAM:"button_press1");
+ }
+ }
+ }
+ program
+ {
+ name: "button_press1";
+ script
+ {
+ new st[31];
+ new Float:vl;
+ get_state(PART:"bg", st, 30, vl);
+ if (strcmp(st, "disabled"))
+ {
+ set_state(PART:"base", "pressed", 0.0);
+ set_state(PART:"bg", "pressed", 0.0);
+ set_state(PART:"elm.text", "pressed", 0.0);
+ emit("elm,action,press", "");
+ }
+ }
+ }
+ program
+ {
+ name: "unpressed";
+ signal: "mouse,up,1";
+ source: "event";
+ script
+ {
+ if (get_int(mouse_down) == 1)
+ {
+ set_int(mouse_down, 0);
+ run_program(PROGRAM:"button_unpress1");
+ }
+ }
+ }
+ program
+ {
+ name: "button_unpress1";
+ script
+ {
+ new st[31];
+ new Float:vl;
+ get_state(PART:"bg", st, 30, vl);
+ if (strcmp(st, "disabled"))
+ {
+ set_state(PART:"base", "default", 0.0);
+ set_state(PART:"bg", "default", 0.0);
+ set_state(PART:"elm.text", "default", 0.0);
+ emit("elm,action,unpress", "");
+ }
+ }
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+...
+...
+...
+ program
+ {
+ name: "disable";
+ signal: "elm,state,disabled";
+ source: "elm";
+ action: STATE_SET "disabled" 0.0;
+ target: "bg";
+ target: "elm.text";
+ }
+ program
+ {
+ name: "enable";
+ signal: "elm,state,enabled";
+ source: "elm";
+ action: STATE_SET "default" 0.0;
+ target: "bg";
+ target: "elm.text";
+ }
+
+
+
+</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>
+
+<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 Sample] Timer Sample Overview</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"/></p>
+ </div>
+
+ <h1>[UI Sample] Timer Sample Overview</h1>
+
+ <p>The Timer sample demonstrates how to use the Ecore timer and adjust the specific timers in the timer list.</p>
+
+ <p>The sample uses Ecore timer functions, such as <span style="font-family: Courier New,Courier,monospace">ecore_timer_add()</span> for creating a timer to call the given function in the given period of time, <span style="font-family: Courier New,Courier,monospace">ecore_timer_del()</span> to delete the specific timer from the timer list, <span style="font-family: Courier New,Courier,monospace">ecore_timer_freeze()</span> and <span style="font-family: Courier New,Courier,monospace">ecore_timer_thaw()</span> for freezing and thawing the specific timer, and <span style="font-family: Courier New,Courier,monospace">ecore_timer_interval_set()</span> for changing the interval time to the given timer.</p>
+
+ <p>The following log shows the result of the Timer sample.</p>
+
+<pre class="prettyprint">
+I/USR_TAG ( 2652): start the main loop.
+I/USR_TAG ( 2652): Timer1 expired after 1.001 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 2.001 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 3.001 seconds.
+I/USR_TAG ( 2652): Timer2 expired after 3.001 seconds.
+I/USR_TAG ( 2652): Adding delay of 3.000 seconds to timer1.
+I/USR_TAG ( 2652): Timer1 expired after 7.004 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 8.001 seconds.
+I/USR_TAG ( 2652): Timer3 expired after 8.201 seconds.
+I/USR_TAG ( 2652): Freezing timer1.
+I/USR_TAG ( 2652): Timer4 expired after 11.003 seconds.
+I/USR_TAG ( 2652): Resuming timer1, which has 0.799 seconds left to expire.
+I/USR_TAG ( 2652): Timer1 expired after 11.804 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 12.804 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 13.804 seconds.
+I/USR_TAG ( 2652): Timer5 expired after 14.001 seconds.
+I/USR_TAG ( 2652): Changing interval of timer1 from 1.000 to 2.000 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 14.804 seconds.
+I/USR_TAG ( 2652): Timer1 expired after 16.805 seconds.
+I/USR_TAG ( 2652): Timer6 expired after 18.002 seconds.
+I/USR_TAG ( 2652): Stopping timer1.
+I/USR_TAG ( 2652): Starting timer7 (1.100s) and timer8 (1.200s).
+I/USR_TAG ( 2652): Timer7 expired after 19.203 seconds.
+I/USR_TAG ( 2652): Timer8 expired after 19.203 seconds.
+</pre>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function creates the window that does not do anything in this sample application. However, it contains timer functions and you can see the result in the log output.</p>
+
+<pre class="prettyprint">
+#define TIMEOUT_1 1.0 // Interval for timer1
+#define TIMEOUT_2 3.0 // timer2 - delay timer1
+#define TIMEOUT_3 8.2 // timer3 - pause timer1
+#define TIMEOUT_4 11.0 // timer4 - resume timer1
+#define TIMEOUT_5 14.0 // timer5 - change interval of timer1
+#define TIMEOUT_6 18.0 // Top timer1 and start timer7 and timer8 with changed precision
+#define TIMEOUT_7 1.1 // Interval for timer7
+#define TIMEOUT_8 1.2 // Interval for timer8
+#define DELAY_1 3.0 // Delay time for timer1 - used by timer2
+#define INTERVAL1 2.0 // New interval for timer1 - used by timer5
+
+static double _initial_time = 0;
+
+struct context
+{
+ Ecore_Timer *timer1;
+ Ecore_Timer *timer2;
+ Ecore_Timer *timer3;
+ Ecore_Timer *timer4;
+ Ecore_Timer *timer5;
+ Ecore_Timer *timer6;
+ Ecore_Timer *timer7;
+ Ecore_Timer *timer8;
+};
+
+static double
+_get_current_time(void)
+{
+ return ecore_time_get() - _initial_time;
+}
+
+static Eina_Bool
+_timer1_cb(void *data EINA_UNUSED)
+{
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer1 expired after %0.3f seconds.", _get_current_time());
+
+ return ECORE_CALLBACK_RENEW;
+}
+
+static Eina_Bool
+_timer2_cb(void *data EINA_UNUSED)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer2 expired after %0.3f seconds.", _get_current_time());
+ dlog_print(DLOG_INFO, "USR_TAG", "Adding delay of %0.3f seconds to timer1.", DELAY_1);
+
+ ecore_timer_delay(ctxt->timer1, DELAY_1);
+
+ ctxt->timer2 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer3_cb(void *data)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer3 expired after %0.3f seconds.", _get_current_time());
+ dlog_print(DLOG_INFO, "USR_TAG", "Freezing timer1.");
+
+ ecore_timer_freeze(ctxt->timer1);
+
+ ctxt->timer3 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer4_cb(void *data)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer4 expired after %0.3f seconds.", _get_current_time());
+ dlog_print(DLOG_INFO, "USR_TAG", "Resuming timer1, which has %0.3f seconds left to expire.", ecore_timer_pending_get(ctxt->timer1));
+
+ ecore_timer_thaw(ctxt->timer1);
+
+ ctxt->timer4 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer5_cb(void *data)
+{
+ struct context *ctxt = data;
+ double interval = ecore_timer_interval_get(ctxt->timer1);
+
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer5 expired after %0.3f seconds.", _get_current_time());
+ dlog_print(DLOG_INFO, "USR_TAG", "Changing interval of timer1 from %0.3f to %0.3f seconds.", interval, INTERVAL1);
+
+ ecore_timer_interval_set(ctxt->timer1, INTERVAL1);
+
+ ctxt->timer5 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer7_cb(void *data)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer7 expired after %0.3f seconds.", _get_current_time());
+
+ ctxt->timer7 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer8_cb(void *data)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer8 expired after %0.3f seconds.", _get_current_time());
+
+ ctxt->timer8 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+static Eina_Bool
+_timer6_cb(void *data)
+{
+ struct context *ctxt = data;
+ dlog_print(DLOG_INFO, "USR_TAG", "Timer6 expired after %0.3f seconds.", _get_current_time());
+
+ dlog_print(DLOG_INFO, "USR_TAG", "Stopping timer1.");
+
+ ecore_timer_del(ctxt->timer1);
+ ctxt->timer1 = NULL;
+
+ dlog_print(DLOG_INFO, "USR_TAG", "Starting timer7 (%0.3fs) and timer8 (%0.3fs).", TIMEOUT_7, TIMEOUT_8);
+
+ ctxt->timer7 = ecore_timer_add(TIMEOUT_7, _timer7_cb, ctxt);
+ ctxt->timer8 = ecore_timer_add(TIMEOUT_8, _timer8_cb, ctxt);
+
+ ecore_timer_precision_set(0.2);
+
+ ctxt->timer6 = NULL;
+
+ return ECORE_CALLBACK_CANCEL;
+}
+
+struct context ctxt = {0};
+
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ 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 };
+ 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);
+ 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);
+
+ // Timer
+ _initial_time = ecore_time_get();
+ ctxt.timer1 = ecore_timer_add(TIMEOUT_1, _timer1_cb, &ctxt);
+ ctxt.timer2 = ecore_timer_add(TIMEOUT_2, _timer2_cb, &ctxt);
+ ctxt.timer3 = ecore_timer_add(TIMEOUT_3, _timer3_cb, &ctxt);
+ ctxt.timer4 = ecore_timer_add(TIMEOUT_4, _timer4_cb, &ctxt);
+ ctxt.timer5 = ecore_timer_add(TIMEOUT_5, _timer5_cb, &ctxt);
+ ctxt.timer6 = ecore_timer_add(TIMEOUT_6, _timer6_cb, &ctxt);
+
+ dlog_print(DLOG_INFO, "USR_TAG", "start the main loop.");
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+
+static void
+app_terminate(void *data)
+{
+ // Release all resources
+ if (ctxt.timer1)
+ ecore_timer_del(ctxt.timer1);
+ if (ctxt.timer2)
+ ecore_timer_del(ctxt.timer2);
+ if (ctxt.timer3)
+ ecore_timer_del(ctxt.timer3);
+ if (ctxt.timer4)
+ ecore_timer_del(ctxt.timer4);
+ if (ctxt.timer5)
+ ecore_timer_del(ctxt.timer5);
+ if (ctxt.timer6)
+ ecore_timer_del(ctxt.timer6);
+ if (ctxt.timer7)
+ ecore_timer_del(ctxt.timer7);
+ if (ctxt.timer8)
+ ecore_timer_del(ctxt.timer8);
+}
+</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
--- /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>AppCaller and AppCallee Sample Overview</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"/></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/application/application_w.htm">Application Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>AppCaller and AppCallee Sample Overview</h1>
+ <p>The AppCaller and AppCallee sample applications demonstrate how you can use the application control to call other applications based on the operation type.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the AppCaller and AppCallee.</p>
+ <p class="figure">Figure: AppCaller and AppCallee screens</p>
+ <p align="center"><img alt="AppCaller and AppCallee screens" src="../images/appcalleecaller_mw.png" /> </p>
+
+
+ <p>The AppCaller application is used to call the AppCallee application, which returns an emoji to the AppCaller:</p>
+
+<ol><li>In the AppCaller, make the call by clicking <strong>Call App</strong>.
+<p>In the AppCallee, information about the call is displayed on the screen along with a list of emojis. </p></li>
+<li>In the AppCallee, click the emoji you want to return to the AppCaller.
+<p>The AppCaller displays the selected emoji.</p></li></ol>
+
+<h2>Prerequisites</h2>
+
+<ul><li><p>Since the AppCaller and AppCallee applications work best along with each other, both applications must be installed before you try to run either of them.</p></li></ul>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the operation type of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/image/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/image/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The Emoji set used in this application was designed and offered free by Emoji One. For more information on their license terms, see the <a href="http://emojione.com/" target="_blank">Emoji One</a> site.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>In the AppCallee application, the <span style="font-family: Courier New, Courier,monospace"><tizen:app-control/></span> element of the configuration file provides a service description for the application control. The operation name describes an action to be performed by the application.</p>
+ <pre class="prettyprint">
+<tizen:app-control>
+ <tizen:src name="index.html">
+ <tizen:operation name="http://tizen.org/appcontrol/operation/appcall"/>
+</tizen:app-control> </pre>
+
+<p>In the AppCaller application, the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#ApplicationControl">ApplicationControl</a> interface (consisting of an operation, URI, MIME type, and data) describes an action to be performed by the Callee application. When the system gets the application control request, it finds the corresponding application to perform the requested application control and launches the selected application.</p>
+<pre class="prettyprint">
+AppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/appcall',
+ null, null, null);
+</pre>
+<p>In the AppCallee application, the <span style="font-family: Courier New,Courier,monospace">replyAppCaller()</span> function replies back to the AppCaller with the data on the selected emoji:</p>
+<ul><li>The application control request passed to the AppCallee can be accessed by the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function. The passed application control contains the reason the application was launched and information about what the application is doing.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> interface defines the key-value pair used to pass data between applications, and it is sent to the AppCaller through the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html#RequestedApplicationControl">RequestedApplicationControl</a> interface.</li></ul>
+<pre class="prettyprint">
+function replyAppCaller(text)
+{
+ reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+
+ /* Construct result data */
+ data = new tizen.ApplicationControlData("text", [text]);
+
+ /* Reply to caller */
+ reqAppControl.replyResult([data]);
+ tizen.application.getCurrentApplication().exit();
+}</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>ArchiveManager Sample Overview</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"/></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/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</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ArchiveManager Sample Overview</h1>
+ <p>The ArchiveManager sample application demonstrates how you can create and manage archive files. You can browse the filesystem, select files to be archived, start the compression process, browse the content of the archive file, extract the archive file, and control the compression or extraction process.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+
+ <p>The user interface of the application is divided logically into 3 modes. Each mode is associated with specific main screen elements, such as header, footer, and content with list elements representing the filesystem elements.</p>
+ <ul>
+<li>Standard mode
+<p>The standard mode is used to browse the filesystem and during the file compression. The following figure illustrates the root folders, file browsing, and file compression.</p>
+
+ <p class="figure">Figure: Standard mode screens</p>
+ <p align="center"><img alt="Root folders" src="../images/archivemanager_root_mw.png" /> <img alt="Browsing files" src="../images/archivemanager_browse_mw.png" /> <img alt="Input screen" src="../images/archivemanager_input_mw.png" /> <img alt="Compressing files" src="../images/archivemanager_compress_mw.png" /></p>
+
+ <p>To create a new archive, click <strong>Create archive</strong> and select the files in the archive mode. Enter the archive name in the input screen, and click <strong>Done</strong>.The progress of the compression process is indicated by a progress bar.</p>
+ <p>To abort the compression process, click <strong>Abort</strong>.</p></li>
+
+
+<li>Archive mode
+<p>The archive mode is used to select the files to be archived.</p>
+
+ <p class="figure">Figure: Archive mode screen</p>
+ <p align="center"><img alt="Archive mode" src="../images/archivemanager_archive_mw.png" /></p>
+
+ <p>After selecting the files, start the compression process by clicking <strong>Compress</strong>. To return to the standard mode without compression, click <strong>Back</strong>.</p></li>
+<li>Preview mode
+<p>The preview mode is used to browse the archives and during the file extraction. The following figure illustrates the archive browsing and file extraction.</p>
+
+ <p class="figure">Figure: Preview mode screens</p>
+ <p align="center"><img alt="Browsing archive entries" src="../images/archivemanager_browse_archive_mw.png" /> <img alt="Extracting confirmation" src="../images/archivemanager_confirm_mw.png" /> <img alt="Extracting files" src="../images/archivemanager_extract_mw.png" /></p>
+
+<p>To browse the archives, click the zipped file you want to browse. The application goes to the preview mode and shows the content of the zipped file. The navigation path starts with the name of the browsed archive. You can browse deeper, if there are folders in the archive. However, you cannot browse another archive file that is an element of the currently browsed archive.</p>
+ <p>You can extract ZIP files that have been prepared using any packaging software. To start the extraction process, click <strong>Extract</strong> and, in the confirmation popup, <strong>OK</strong>. Wait until the archive is extracted to a new folder. The name of the new folder corresponds to the name of the archive. If the name is already in use, the application creates another folder with the name expanded using an appropriate index in parentheses.</p></li>
+</ul>
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains CSS styles for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the layouts of the application screens and templates for smaller UI elements.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="implementation" name="implementation">Implementation</h2>
+
+<h3 id="layout" name="layout">Application Layout</h3>
+<p>The application has a main screen layout, an archive name input screen layout, and a template for the filesystem item view.</p>
+
+<p>The main screen layout consists of multiple UI elements:</p>
+
+<ol><li><p>The main screen elements are arranged as follows:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<div data-role="page" id="main">
+ <!--header (with a title, navigation buttons, and navigation bar)-->
+ <!--content (with a list of filesystem items)-->
+ <!--footer (with action buttons)-->
+ <!--popup (for displaying progress bars and messages)-->
+</div>
+</pre> </li>
+
+<li>
+<p>The header element contains a title, 2 navigation buttons (<strong>Home</strong> and <strong>Up</strong>), and a navigation bar. The navigation buttons are visible only in the standard mode. The navigation bar with the current filesystem path is visible in the standard and preview modes. In the archive mode, the navigation bar displays a checkbox.</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div data-role="header" data-position="fixed">
+ <h1>Archive</h1>
+ <div data-role="button" class="naviframe-button hidden" id="home-button">Home</div>
+ <div data-role="button" class="naviframe-button hidden" id="up-button">Up</div>
+ <div class="navigation">
+ <div class="navigation-background"></div>
+ <p class="navigation-path" id="navigation-path">/<span id="navigation-path-text"></span></p>
+ <form id="select-all" class="hidden">
+ <ul data-role="listview">
+ <li class="ui-li-has-checkbox">
+ <a href="#" id="select-all-area">
+ <input type="checkbox"/>Select all
+ </a>
+ </li>
+ </ul>
+ </form>
+ </div>
+</div>
+</pre></li>
+<li>
+<p>The content element contains a list of files. Depending on the current application mode, the list can display:</p>
+<ul>
+<li>Filesystem items without checkboxes (standard mode)</li>
+<li>Filesystem items with checkboxes (archive mode)</li>
+<li>Archive entries (preview mode)</li>
+</ul>
+<pre class="prettyprint">
+<!--index.html-->
+<div data-role="content">
+ <form>
+ <ul id="files-list" data-role="listview"
+ class="standard-mode"></ul>
+ </form>
+</div>
+</pre>
+<p>The template being used defines the appearance of the list items:</p>
+<pre class="prettyprint lang-html">
+/* templates/row.tpl */
+<li id="row{{index}}" label="{{label}}" class="{{type}}" url="{{url}}" isDirectory="{{isDirectory}}">
+ <a href="#">
+ <input type="checkbox"/>
+ <img class="ui-li-bigicon">{{label}}
+ <div class="clickable"></div>
+ </a>
+</li>
+</pre></li>
+<li>
+<p>The main screen uses 3 footers, which all contain different buttons. At any time, only a single footer is visible, depending on the current application mode:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div data-role="footer" data-position="fixed" id="footer-create"
+ class="ui-disabled">
+ <div data-role="button" id="create-button">Create archive</div>
+</div>
+<div data-role="footer" data-position="fixed" id="footer-compress"
+ class="hidden">
+ <div data-role="button" id="compress-button">Compress</div>
+ <div data-role="button" id="back-compress-button">Back</div>
+</div>
+<div data-role="footer" data-position="fixed" id="footer-preview"
+ class="hidden">
+ <div data-role="button" id="extract-preview-button">Extract</div>
+</div>
+</pre></li>
+
+<li>
+<p>The pop-up element can be displayed with a progress bar during the compression and extraction process, with progress circles while preparing data to be archived, or with a message as a message popup:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div id="main-popup" data-role="popup" data-transition="none"
+ data-position-to="window" class="center_title_1btn">
+ <div class="ui-popup-title">
+ <h1 id="main-popup-title"></h1>
+ </div>
+ <div class="ui-popup-text">
+ <div id="total-frame" class="progress-frame hidden">
+ <div data-role="progressbar" id="total-progress"></div>
+ <div id="total-value" class="progress-value"></div>
+ </div>
+ <div id="partial-frame" class="progress-frame hidden">
+ <div data-role="progressbar" id="partial-progress"></div>
+ <div id="partial-value" class="progress-value"></div>
+ </div>
+ <div id="preprogress-frame" class="preprogress-frame">
+ <div data-role="progress" data-style="circle"
+ id="preprogress-progress"></div>
+ </div>
+ <span id="main-popup-message" class="hidden"></span>
+ </div>
+ <div class="ui-popup-button-bg">
+ <a data-role="button" data-rel="back" data-inline="true" id="main-popup-ok-button" class="hidden">OK</a>
+ <a data-role="button" data-rel="back" data-inline="true" id="main-popup-cancel-button" class="hidden">Cancel</a>
+ <a data-role="button" data-rel="back" data-inline="true" id="main-popup-abort-button" class="hidden">Abort</a>
+ </div>
+</div>
+</pre></li></ol>
+
+<p>The archive name input screen allows the user to enter a name for the selected data to be archived. If an archive with the typed name already exists or the name contains invalid characters, an appropriate message is displayed. When the name is valid, clicking <strong>Done</strong> on the keyboard starts the archiving process.</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<div data-role="page" id="name">
+ <div data-role="header" id="name-header" data-position="fixed">
+ <h1>Input archive name</h1>
+ </div>
+ <div data-role="content">
+ <div id="name-text-frame">
+ <div>
+ <input type="text" id="name-text"
+ placeholder="Enter name" class="hidden invisible">
+ </div>
+ </div>
+ <div id="name-error-message"></div>
+ </div>
+</div>
+</pre>
+
+<h3 id="mode_switch" name="mode_switch">Mode Switching</h3>
+
+<p>The switching between the application modes is controlled by the router module defined in the <span style="font-family: Courier New,Courier,monospace">js/helpers/router.js</span> file. It provides the following methods:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">register()</span> method registers callbacks for a given path.
+<p>All routes responsible for switching between modes are registered with this method in the <span style="font-family: Courier New,Courier,monospace">js/views/pages/main.js</span> file:</p>
+<pre class="prettyprint">
+function registerRoutes()
+{
+ router.register('views/modes/standard/show', showStandardMode);
+ router.register('views/modes/preview/show', showPreviewMode);
+ router.register('views/modes/archive/show', showArchiveMode);
+}
+</pre></li>
+<li><span style="font-family: Courier New,Courier,monospace">navigate()</span> calls the registered callbacks later on using a proper path as parameter.
+<p>The <span style="font-family: Courier New,Courier,monospace">navigate()</span> method can be called from anywhere in the application code. The following example shows the code that changes the current mode from standard to archive when the user clicks <strong>Create archive</strong> in the standard mode:</p>
+<pre class="prettyprint">
+/* js/views/modes/standard.js */
+function onCreateBtnClick()
+{
+ router.navigate('views/modes/archive/show');
+}
+</pre></li>
+</ul>
+
+<p>The following example shows other important code snippets in the router module:</p>
+<pre class="prettyprint">
+/* js/helpers/router.js */
+var routes = [],
+ currentRoute = {},
+ Error = window.Error;
+
+function Route(load, unload)
+{
+ this.load = load;
+ this.unload = unload;
+}
+
+function register(path, load, unload)
+{
+ if (routes[path])
+ {
+ throw new Error('Route ' + path + ' is already registered');
+ }
+ routes[path] = new Route(load, unload);
+}
+
+function navigate(path, options)
+{
+ var route = routes[path];
+
+ if (typeof route !== 'object' || typeof route.load !== 'function')
+ {
+ throw new Error('Route ' + path + ' does not exist');
+ }
+
+ if (typeof currentRoute.unload === 'function')
+ {
+ currentRoute.unload();
+ }
+
+ currentRoute = route;
+
+ return route.load(options || {});
+}
+</pre>
+
+<h3 id="compression" name="compression">File Compression</h3>
+
+<p>To compress files:</p>
+
+<ol><li><p>The compression process starts when the user clicks <strong>Done</strong> on the keyboard displayed on the input screen, and the keyboard gets hidden. To make sure that the keyboard is not visible, the application uses code from the <span style="font-family: Courier New,Courier,monospace">js/helpers/keyboard.js</span> file.</p>
+
+<p>When initialized, the keyboard module registers an event listener, which triggers the <span style="font-family: Courier New,Courier,monospace">onKeyboardChange()</span> method every time the state of the keyboard changes. Depending on the keyboard state, the <span style="font-family: Courier New,Courier,monospace">helpers.keyboard.opened</span> or <span style="font-family: Courier New,Courier,monospace">helpers.keyboard.closed</span> event is triggered.</p>
+
+<pre class="prettyprint">
+function onKeyboardChange(ev)
+{
+ if (ev.state === 'on')
+ {
+ e.fire('opened');
+ }
+ else
+ {
+ e.fire('closed');
+ }
+}
+
+function init()
+{
+ window.addEventListener('softkeyboardchange', onKeyboardChange);
+}
+</pre></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">js/views/pages/name.js</span> module that controls the input screen behavior, listens for the <span style="font-family: Courier New,Courier,monospace">helpers.keyboard.opened</span> and <span style="font-family: Courier New,Courier,monospace">helpers.keyboard.closed</span> events.</p>
+<pre class="prettyprint">
+/* helpers.keyboard.closed event triggered */
+function onKeyboardClosed()
+{
+ if (enterPressed)
+ {
+ enterPressed = false;
+ router.navigate('views/modes/standard/show', {start: true});
+ }
+}
+
+e.listeners(
+{
+ 'helpers.keyboard.closed': onKeyboardClosed,
+ (...)
+});
+</pre></li>
+
+<li><p>Every time the <span style="font-family: Courier New,Courier,monospace">onKeyboardClosed()</span> method is called (because the keyboard gets hidden and the <span style="font-family: Courier New,Courier,monospace">helpers.keyboard.closed</span> event is triggered), the <span style="font-family: Courier New,Courier,monospace">router.navigate()</span> method is also called with the <span style="font-family: Courier New,Courier,monospace">views/modes/standard/show</span> string path as its first parameter. The <span style="font-family: Courier New,Courier,monospace">start</span> option is also set to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+
+<p>Since the <span style="font-family: Courier New,Courier,monospace">options.start</span> returns <span style="font-family: Courier New,Courier,monospace">true</span>, both the <span style="font-family: Courier New,Courier,monospace">activateStandardMode()</span> and <span style="font-family: Courier New,Courier,monospace">startArchiving()</span> methods are called. The <span style="font-family: Courier New,Courier,monospace">activateStandardMode()</span> method simply activates the standard mode by calling the <span style="font-family: Courier New,Courier,monospace">activate()</span> method on the <span style="font-family: Courier New,Courier,monospace">standardMode</span> object (a reference to the <span style="font-family: Courier New,Courier,monospace">views/modes/standard</span> module). It triggers a pop-up with an animated circle displaying the waiting progress. The circle is shown for as long as it takes to count the data to be archived.</p>
+
+<pre class="prettyprint">
+/* js/views/pages/main.js */
+function activateStandardMode(animate)
+{
+ standardMode.activate(animate);
+}
+
+function startArchiving()
+{
+ popupView.showPreProgress();
+ countNumberOfArchivedData();
+}
+
+function showStandardMode(options)
+{
+ if (options.start)
+ {
+ activateStandardMode(false);
+ /* Start archiving */
+ startArchiving();
+ }
+ else
+ {
+ /* Show the standard mode */
+ activateStandardMode(true);
+ }
+}
+
+function registerRoutes()
+{
+ router.register('views/modes/standard/show', showStandardMode);
+ (...)
+}
+</pre></li>
+
+<li><p>The application must know the amount of data to properly show the progress bar for each file being archived. The <span style="font-family: Courier New,Courier,monospace">countNumberOfArchivedData()</span> method calls the <span style="font-family: Courier New,Courier,monospace">countNumberOfData()</span> method from the <span style="font-family: Courier New,Courier,monospace">filesystem</span> module. It requires 2 parameters supplied by the <span style="font-family: Courier New,Courier,monospace">getSelectedFiles()</span> and <span style="font-family: Courier New,Courier,monospace">getPath()</span> methods from the <span style="font-family: Courier New,Courier,monospace">fileList</span> module. The <span style="font-family: Courier New,Courier,monospace">fileList</span> module contains methods that allow the application to manage the appearance of the main screen (including current path, filesystem list elements, and mode activation).</p>
+<p>At the end, the <span style="font-family: Courier New,Courier,monospace">countNumberOfData()</span> method triggers the <span style="font-family: Courier New,Courier,monospace">foldersize.read</span> event.</p>
+<pre class="prettyprint">
+/* js/views/pages/main.js */
+function countNumberOfArchivedData()
+{
+ var files = fileList.getSelectedFiles();
+
+ filesystem.countNumberOfData(fileList.getPath().toString(), files);
+}
+
+function createArchive(name, sizes)
+{
+ var list = fileList.getSelectedFiles(sizes),
+ archiveName = fileList.getPath().toString() +
+ '/' + name + '.zip';
+
+ archivingDescriptor = archive.createArchive(list, archiveName);
+}
+
+function onFolderSizeRead(ev)
+{
+ createArchive(
+ nameView.getName(),
+ ev.detail.sizes
+ );
+}
+
+e.listeners(
+{
+ (...)
+ 'model.filesystem.foldersize.read': onFolderSizeRead,
+ (...)
+});
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">createArchive()</span> method from the archive module is called during the <span style="font-family: Courier New,Courier,monospace">foldersize.read</span> event to create an archive. This method requires 2 parameters, a list of files to be archived and the archive name, supplied by methods from the <span style="font-family: Courier New,Courier,monospace">fileList</span> module. It returns an <span style="font-family: Courier New,Courier,monospace">archivingDescriptor</span> object that contains information about progress and is useful when there is a need to abort the compression process. The <span style="font-family: Courier New,Courier,monospace">Progress </span> object constructor is used to create an object displaying the whole compression process.</p>
+
+<p>The archive module located in <span style="font-family: Courier New,Courier,monospace">js/model/archive.js</span> file provides methods that have access to the Archive API. The module gives all necessary functionality for the compression process. It also supports browsing through an archive, extraction processes and abort action.</p>
+
+<pre class="prettyprint">
+/* js/model/archive.js */
+function Progress(max, hasPartialInfo)
+{
+ this.hasPartialInfo = !!hasPartialInfo;
+
+ /* Total progress */
+ this.id = 0;
+ this.current = 0;
+ this.subTotal = 0;
+ this.max = max;
+
+ /* Partial progress */
+ this.partialId = 0;
+ this.partialMax = 0;
+ this.value = 0.0;
+ this.filename = '';
+
+ this.getPartial = getPartial;
+ this.getTotal = getTotal;
+}
+
+function createArchive(files, destination)
+{
+ files = files.slice(0);
+
+ var progress = null,
+ len = files.length,
+ i = 0,
+ totalSize = 0;
+
+ for (i; i < len; i += 1)
+ {
+ totalSize += files[i].filesize;
+ }
+
+ progress = new Progress(totalSize, true);
+
+ try
+ {
+ progress.id = tizen.archive.open(destination, WRITE_MODE, function onCreateSuccess(archive)
+ {
+ e.fire('create.started');
+ e.fire('progress', progress);
+ progress.archive = archive;
+ progress.destination = destination;
+ addToArchive(files, archive, progress);
+ });
+ }
+ catch (ev)
+ {
+ e.fire('open.error', ev);
+ }
+
+ return progress;
+}
+</pre></li>
+<li>
+<p>The above example shows that before the first call to the Archive API, the application creates a <span style="font-family: Courier New,Courier,monospace">progress</span> object. The application calls the <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> method, which opens the archive file.</p>
+<p>After the archive creation operation, you can add or get files to and from the archive. The <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> method requires 3 mandatory parameters. The first one is a string path describing the archive file to be opened, and the second is also a string describing the file mode for the opened archive. The file mode determines which operations on the archive are available (the application can use <span style="font-family: Courier New,Courier,monospace">w()</span> for the write mode and <span style="font-family: Courier New,Courier,monospace">r()</span> for the read mode). The third parameter is a callback method to be invoked when the archive is opened successfully. It takes 1 parameter, the reference to the archive object. This callback fires the <span style="font-family: Courier New,Courier,monospace">create.started()</span> and <span style="font-family: Courier New,Courier,monospace">progress()</span> events, updates progress parameters, and calls the <span style="font-family: Courier New,Courier,monospace">addToArchive()</span> method to add files to the created archive.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">addToArchive()</span> method calls itself recursively as long as it is finished with each file list with file object items, which is passed as the first argument. Every time it is called, the application checks whether the compression process was aborted or whether the process is finished, and updates the progress object and calls the <span style="font-family: Courier New,Courier,monospace">add()</span> method.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">add()</span> method adds a new member file to the archive file. It requires a single parameter, the location of the archived file. Optional parameters include the callback method to be invoked when the adding operation is completed successfully. After completion, the application updates the progress object, calls the <span style="font-family: Courier New,Courier,monospace">addToArchive()</span> method, and triggers the progress event.</p>
+
+<pre class="prettyprint">
+/* js/model/archive.js */
+function addToArchive(files, archive, progress)
+{
+ var file = files.shift(),
+ size = 0,
+ progressHandler = null;
+
+ if (progress.aborted)
+ {
+ return;
+ }
+
+ if (!file)
+ {
+ e.fire('completed', progress);
+ return;
+ }
+
+ size = file.filesize;
+ if (file.isDirectory)
+ {
+ progressHandler = new ArchiveDirectoryProgressHandler(size, file.path, progress);
+ }
+ else
+ {
+ progressHandler = new ArchiveFileProgressHandler(size, progress);
+ }
+
+ progress.value = 0;
+ progress.filename = '';
+ progress.partialId = 0;
+ progress.partialId = archive.add(file.path,
+ function onAddSuccess()
+ {
+ progress.subTotal += size;
+
+ /* Add the rest of the files */
+ addToArchive(files, archive, progress);
+
+ e.fire('progress', progress);
+ },
+ function errorHandler(ev)
+ {
+ progress.partialId = 0;
+ onError(ev);
+ },
+ progressHandler.handle,
+ {stripSourceDirectory: true});
+}
+</pre></li>
+
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">main.js</span> module listens to events to make necessary changes in the application UI:</p>
+<ul><li>
+The <span style="font-family: Courier New,Courier,monospace">onArchiveCreateStarted()</span> method is called at the beginning of the compression process. It changes the pop-up appearance to show 2 progress bars, partial and overall. </li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onArchiveProgress()</span> method updates the progress bar values and is called once at the beginning of the compression process and every time a new file is added to the archive.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onArchiveCompleted()</span> method is called at the end of the compression process to hide the popup. It also updates the list of filesystem elements on the main screen.</li></ul>
+
+<pre class="prettyprint">
+/* js/views/pages/main.js */
+function onArchiveCreateStarted()
+{
+ popupView.activateCreateProgress();
+}
+
+function onArchiveProgress(ev)
+{
+ popupView.setProgress(ev.detail);
+}
+
+function onArchiveCompleted()
+{
+ popupView.hide();
+ if (fileList.getMode() === fileList.PREVIEW_MODE)
+ {
+ router.navigate('views/modes/standard/show');
+ fileList.getPath().goToArchiveDirectory();
+ }
+ else
+ {
+ filesystem.getFiles(fileList.getPath().toString());
+ }
+}
+
+e.listeners(
+{
+ 'model.archive.progress': onArchiveProgress,
+ 'model.archive.create.started': onArchiveCreateStarted,
+
+ 'model.archive.completed': onArchiveCompleted,
+});
+</pre></li></ol>
+
+
+
+<h3 id="browse" name="browse">Archive Browsing</h3>
+
+<p>The list of filesystem items is wrapped in a <span style="font-family: Courier New,Courier,monospace"><ul></span> element with the <span style="font-family: Courier New,Courier,monospace">id="files-list"</span> attribute. The appearance and behavior of the list is controlled by the <span style="font-family: Courier New,Courier,monospace">js/views/filelist.js</span> module.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">onFilesListClick()</span> method is called every time a filesystem item on the content list is tapped. In the preview mode, the application triggers the <span style="font-family: Courier New,Courier,monospace">selected</span> event with the <span style="font-family: Courier New,Courier,monospace">object type</span> parameter. This parameter contains information about the selected file.</p>
+<pre class="prettyprint">
+/* js/views/filelist.js */
+var filesList = null;
+
+function onFilesListClick(ev)
+{
+ var element = domHelper.findParent(ev.target, 'li'),
+ label = element.getAttribute('label'),
+ url = element.getAttribute('url'),
+ file = null;
+
+ if (mode === ARCHIVE_MODE)
+ {
+ e.fire('selection.changed');
+ return;
+ }
+
+ file =
+ {
+ label: label,
+ url: url,
+ type: ''
+ };
+
+ if (element.classList.contains(FOLDER_CLASS))
+ {
+ file.type = FOLDER_CLASS;
+ }
+ else if (element.classList.contains(FILE_CLASS))
+ {
+ file.type = FILE_CLASS;
+ }
+ else if (element.classList.contains(ZIP_CLASS))
+ {
+ file.type = ZIP_CLASS;
+ }
+
+ e.fire('selected', {file: file, mode: mode});
+}
+
+function bindEvents()
+{
+ filesList.addEventListener('click', onFilesListClick);
+}
+
+function init()
+{
+ filesList = document.getElementById('files-list');
+
+ bindEvents();
+}
+</pre>
+
+<p>When the preview mode is active, the <span style="font-family: Courier New,Courier,monospace">views.filelist.selected</span> event is listened to by the <span style="font-family: Courier New,Courier,monospace">js/views/modes/preview.js</span> module, and triggers the <span style="font-family: Courier New,Courier,monospace">onFilelistElementSelected()</span> method, which has the following condition statements:</p>
+<ul>
+<li>Starting browsing: executed when the selected list element is an archive and the application is in the standard mode.</li>
+<li>Browsing deeper: executed when the selected list element is a folder and the application is in the preview mode.
+<p>When browsing deeper through the archive, the application calls the <span style="font-family: Courier New,Courier,monospace">goDown()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/path.js</span> module. The path and the UI update are realized in the same way as in the starting browsing condition.</p></li>
+</ul>
+<pre class="prettyprint">
+/* js/views/modes/preview.js */
+function onFilelistElementSelected(ev)
+{
+ var data = ev.detail,
+ fileInfo = data.file;
+
+ if (fileInfo.type === fileList.ZIP_CLASS &&
+ data.mode === fileList.STANDARD_MODE)
+ {
+ archive.loadEntries(fileInfo.url);
+ }
+
+ if (fileInfo.type === fileList.FOLDER_CLASS &&
+ data.mode === fileList.PREVIEW_MODE)
+ {
+ fileList.getPath().goDown(fileInfo.label);
+ }
+}
+
+e.listen(
+{
+ 'views.filelist.selected': onFilelistElementSelected,
+ (...)
+});
+</pre>
+
+<p>To handle the starting browsing condition:</p>
+
+<ol><li>
+<p>To start the browsing process, the application calls the <span style="font-family: Courier New,Courier,monospace">loadEntries()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/archive.js</span> module.</p>
+<p>The application calls the <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> method from the Archive API. The archive is opened in the read mode to access the archived entries. When the archive is opened, the application uses the reference to the archive object to call the <span style="font-family: Courier New,Courier,monospace">getEntries()</span> method from the Archive API.</p>
+<pre class="prettyprint">
+function loadEntries(url)
+{
+ try
+ {
+ tizen.archive.open(url, READ_MODE, function onOpenSuccess(archive)
+ {
+ archive.getEntries(function onGetEntriesSuccess(entries)
+ {
+ prepareEntriesObject(url.split('/').pop(), entries);
+ },
+ onError);
+ },
+ onError);
+ }
+ catch (ev)
+ {
+ e.fire('open.error', ev);
+ }
+}
+</pre></li>
+<li>
+<p>Now the application has access to the list of archived objects used by the <span style="font-family: Courier New,Courier,monospace">prepareEntriesObject()</span> method. The purpose of this method is to prepare 2 important data structures: <span style="font-family: Courier New,Courier,monospace">entriesArray</span> and <span style="font-family: Courier New,Courier,monospace">entriesMap</span>.</p>
+<p>The application uses the API methods only once to obtain information about the entries in the browsed archive. This information is useful to browse deeper in the archive contents. The <span style="font-family: Courier New,Courier,monospace">entriesArray</span> contains the <span style="font-family: Courier New,Courier,monospace">entries</span> object from the root level of the archive. Each entry has a <span style="font-family: Courier New,Courier,monospace">list</span> property that contains an <span style="font-family: Courier New,Courier,monospace">entries</span> object from the second level of the archive for this root entry, and so on. As a result, the array contains all information about the archive files, directories, and structure. The <span style="font-family: Courier New,Courier,monospace">entriesMap</span> array is string-indexed and contains the same objects as the <span style="font-family: Courier New,Courier,monospace">entriesArray</span> array. It gives the application access to these objects using a URL path string.</p>
+<pre class="prettyprint">
+/* js/model/archive.js */
+function prepareEntriesObject(name, entries)
+{
+ var lenI = entries.length,
+ lenJ = 0,
+ i = 0,
+ j = 0,
+ entry = null,
+ entryName = '',
+ entrySize = 0,
+ entryArray = null,
+ currentArray = null,
+ currentObject = null,
+ currentIndex = 0,
+ endsWithSeparator = false;
+
+ entriesArray = [];
+ entriesMap = {};
+
+ for (i; i < lenI; i += 1)
+ {
+ entry = entries[i];
+ entrySize = entry.size;
+ endsWithSeparator = SLASH_AT_THE_END_REGEXP.test(entry.name);
+ entryName = entry.name.replace(SLASH_AT_THE_END_REGEXP, '');
+ entryArray = entryName.split('/');
+ lenJ = entryArray.length;
+ currentArray = entriesArray;
+ for (j = 0; j < lenJ; j += 1)
+ {
+ currentIndex = findObjectInArray(currentArray, 'name', entryArray[j]);
+ if (currentIndex === -1)
+ {
+ currentObject =
+ {
+ name: entryArray[j],
+ list: [],
+ fullPath: entryName,
+ isFile: !((j < lenJ - 1) || endsWithSeparator),
+ isDirectory: (j < lenJ - 1) || endsWithSeparator
+ };
+ entriesMap[entryName] = currentObject;
+ currentArray.push(currentObject);
+ }
+ else
+ {
+ currentArray = currentArray[currentIndex].list;
+ }
+ }
+ }
+ e.fire('entries.loaded', {name: name});
+}
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">entries.loaded</span> event is triggered and activates the preview mode:</p>
+<pre class="prettyprint">
+/* js/views/pages/main.js */
+function activatePreviewMode(data)
+{
+ previewMode.activate(data);
+}
+
+function showPreviewMode(data)
+{
+ activatePreviewMode(data);
+}
+
+function onArchiveEntriesLoaded(ev)
+{
+ router.navigate('views/modes/preview/show', ev.detail);
+}
+
+function registerRoutes()
+{
+ router.register('views/modes/preview/show', showPreviewMode);
+}
+
+e.listeners(
+{
+ 'model.archive.entries.loaded': onArchiveEntriesLoaded,
+});
+</pre>
+
+<p>The application activates the preview mode by calling the <span style="font-family: Courier New,Courier,monospace">activate()</span> method on the <span style="font-family: Courier New,Courier,monospace">previewMode</span> object (a reference to <span style="font-family: Courier New,Courier,monospace">views/modes/preview</span> module).</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">activate()</span> method calls the <span style="font-family: Courier New,Courier,monospace">activatePreviewMode()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/views/filelist.js</span> module.</p>
+<pre class="prettyprint">
+/* js/views/modes/preview.js */
+function activate(data)
+{
+ fileList.activatePreviewMode(data);
+ showFooterPreview();
+}
+
+/* js/views/filelist.js */
+function activatePreviewMode(data)
+{
+ if (!data)
+ {
+ return;
+ }
+ mode = PREVIEW_MODE;
+ path.goDown(data.name, true);
+}
+</pre></li>
+<li>
+<p>The application calls the <span style="font-family: Courier New,Courier,monospace">goDown()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/path.js</span> module. This module contains the <span style="font-family: Courier New,Courier,monospace">Path</span> class that provides functionalities for maintaining the URL path of the current filesystem location.</p>
+<p>At this point, any path change in this module triggers the <span style="font-family: Courier New,Courier,monospace">changed</span>event. This event is listened to by the <span style="font-family: Courier New,Courier,monospace">js/views/filelist.js</span> module:</p>
+<pre class="prettyprint">
+/* js/views/filelist.js */
+function onPathChanged(ev)
+{
+ var currentPath = ev.detail.toString();
+
+ if (mode === STANDARD_MODE)
+ {
+ if (currentPath === '')
+ {
+ modelFilesystem.getStorages();
+ }
+ else
+ {
+ modelFilesystem.getFiles(currentPath);
+ }
+ }
+ else if (mode === PREVIEW_MODE)
+ {
+ if (currentPath !== '')
+ {
+ showFiles(archive.getEntry(currentPath).list);
+ }
+ else
+ {
+ showFiles(archive.getRootEntries());
+ }
+ }
+
+ updateHeader();
+ updatePath();
+}
+
+e.listeners(
+{
+ 'model.path.changed': onPathChanged,
+});
+</pre></li>
+<li>
+<p>If the application is in the preview mode, the <span style="font-family: Courier New,Courier,monospace">showFiles()</span> method is called. This method is responsible for updating the UI and takes the list of archived entries as a parameter. This list can be returned by the <span style="font-family: Courier New,Courier,monospace">getEntry()</span> or <span style="font-family: Courier New,Courier,monospace">getRootEntries()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/archive.js</span> module. These methods return the <span style="font-family: Courier New,Courier,monospace">entriesArray</span> and <span style="font-family: Courier New,Courier,monospace">entriesMap</span> data structures.</p>
+<pre class="prettyprint">
+/* js/model/archive.js */
+function getEntry(path)
+{
+ return entriesMap[path];
+}
+
+function getRootEntries()
+{
+ return entriesArray;
+}
+</pre></li></ol>
+
+
+<h2 id="extraction" name="extraction">File Extraction</h2>
+
+<p>To extract files:</p>
+
+<ol><li>
+<p>The extraction process starts when the user clicks <strong>Extract</strong>. The <strong>Extract</strong> button behavior is handled by the <span style="font-family: Courier New,Courier,monospace">js/views/modes/preview.js</span> module:</p>
+<pre class="prettyprint">
+var extractPreviewBtn = null;
+
+function onExtractPreviewBtnClick()
+{
+ popupView.showExtractConfirm( fileList.getPath().getFullArchiveName() );
+}
+
+function bindEvents()
+{
+ extractPreviewBtn.addEventListener('click', onExtractPreviewBtnClick
+ );
+}
+
+function init()
+{
+ extractPreviewBtn = document.getElementById('extract-preview-button');
+ bindEvents();
+}
+</pre></li>
+<li>
+<p>The confirmation popup is displayed by the <span style="font-family: Courier New,Courier,monospace">showExtractConfirm()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/views/popup.js</span> module.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">showExtractConfirm()</span>method is responsible for showing the confirm popup and its appearance. It takes the name of the extracted archive as a parameter. The name is displayed in the pop-up header.</p>
+<pre class="prettyprint">
+/* js/views/popup.js */
+function showExtractConfirm(name)
+{
+ activateMessage(ZIP_ARCHIVE_EXTRACT_MESSAGE, name);
+ activateOKCancelButtons();
+ show();
+}
+</pre></li>
+
+<li>
+<p>The user can interrupt the extraction process by clicking <strong>Cancel</strong> in the popup. If they click <strong>OK</strong>, the extraction process continues and the <span style="font-family: Courier New,Courier,monospace">ok.button.click</span> event is triggered:</p>
+<pre class="prettyprint">
+/* js/views/popup.js */
+function onOkBtnClick()
+{
+ if (isExitPopup)
+ {
+ isExitPopup = false;
+ e.fire('exit.button.click');
+ }
+ else
+ {
+ e.fire('ok.button.click');
+ }
+}
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">ok.button.click</span> event is listened to by the <span style="font-family: Courier New,Courier,monospace">js/views/modes/preview.js</span> module. When the vent occurs, the application tries to resolve the name of the folder to which the archive entries are extracted:</p>
+<pre class="prettyprint">
+/* js/views/modes/preview.js */
+function onOkBtnClick()
+{
+ if (fileList.getMode() === fileList.PREVIEW_MODE)
+ {
+ modelFilesystem.resolveNameForPath(fileList.getPath().getArchiveName(),
+ fileList.getPath().getArchivePath());
+ }
+}
+
+e.listen(
+{
+ 'views.popup.ok.button.click': onOkBtnClick,
+});
+</pre></li>
+<li>
+<p>If the application is in preview mode, the <span style="font-family: Courier New,Courier,monospace">resolveNameForPath()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/filesystem.js</span> module is called. It takes the name of the archive (without extension) and the archive file path as parameters.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">resolveNameForPath()</span> method uses the <span style="font-family: Courier New,Courier,monospace">js/core/core/filesystem.js</span> module to call the <span style="font-family: Courier New,Courier,monospace">dir()</span> method to retrieve the list of files in a given location path.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">dir()</span> method calls a function that takes the archived list of files as a parameter. Then, the <span style="font-family: Courier New,Courier,monospace">resolveName()</span> method is called to determine the name of the folder to which the archive entries are extracted.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">resolveName()</span> method operates in 2 phases. First, the method iterates through the list of files and prepares the <span style="font-family: Courier New,Courier,monospace">namesObject</span> object (associative array) indexed by file names with any value. Then, the method performs the <span style="font-family: Courier New,Courier,monospace">while</span> loop that modifies the original name of the archive as long as this name is identical to the one in the <span style="font-family: Courier New,Courier,monospace">namesObject</span> object parameters. If the original name of the archive is unique for the current filesystem location, the <span style="font-family: Courier New,Courier,monospace">while</span> loop is not performed at all and the new folder has the name that corresponds to the name of the extracted archive.</p>
+<pre class="prettyprint">
+/* js/model/filesystem.js */
+function resolveName(name, files)
+{
+ var namesObject = {},
+ length = files.length,
+ newName = '',
+ i = 0;
+
+ for (i = 0; i < length; i += 1)
+ {
+ namesObject[files[i].name] = true;
+ }
+
+ i = 2;
+ newName = name;
+
+ while (namesObject.hasOwnProperty(newName))
+ {
+ newName = name + ' (' + i + ')';
+ i += 1;
+ }
+
+ e.fire('name.resolved', {name: newName});
+}
+
+function resolveNameForPath(name, path)
+{
+ coreFilesystem.dir(path, function onDirSuccess(files)
+ {
+ resolveName(name, files);
+ });
+}
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">resolveName()</span> method triggers the <span style="font-family: Courier New,Courier,monospace">name.resolved</span> event with the resolved name string for the new folder as a parameter.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model.filesystem.name.resolved</span> event is listened to by the <span style="font-family: Courier New,Courier,monospace">js/views/modes/preview.js</span> module. When it occurs, the application creates a new folder with the given name:</p>
+<pre class="prettyprint">
+/* js/views/modes/preview.js */
+function onNameResolved(ev)
+{
+ modelFilesystem.createDir(ev.detail.name,
+ fileList.getPath().getArchivePath());
+}
+
+e.listen(
+{
+ 'model.filesystem.name.resolved': onNameResolved,
+});
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">onNameResolved()</span> method calls the <span style="font-family: Courier New,Courier,monospace">createDir()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/model/filesystem.js</span> module. This method takes the resolved name for the new folder and a location path where this folder is to be created as parameters.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">createDir()</span> method uses the <span style="font-family: Courier New,Courier,monospace">js/core/core/filesystem.js</span> module to call the <span style="font-family: Courier New,Courier,monospace">openDir()</span> method, which opens the folder located on the given path. It also calls a callback function to call the <span style="font-family: Courier New,Courier,monospace">createDir()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/core/core/filesystem.js</span> module.</p>
+
+<pre class="prettyprint">
+/* js/model/filesystem.js */
+function createDir(name, path)
+{
+ coreFilesystem.openDir(path, function onOpenDirSuccess(dir)
+ {
+ e.fire('dir.created',
+ {
+ dir: coreFilesystem.createDir(dir, name)
+ });
+ },
+ onError);
+}
+</pre></li>
+<li>
+<p>The callback function triggers the <span style="font-family: Courier New,Courier,monospace">dir.created</span> event containing the reference to the new folder.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model.filesystem.dir.created</span> event is listened to by the <span style="font-family: Courier New,Courier,monospace">js/views/modes/preview.js</span> module. When it occurs, the application tries to extract the archived entries into the new created folder.</p>
+<pre class="prettyprint">
+/* js/views/modes/preview.js */
+function onDirCreated(ev)
+{
+ archive.extractArchive(fileList.getPath().getFullArchivePath(),
+ ev.detail.dir);
+}
+
+e.listen(
+{
+ 'model.filesystem.dir.created': onDirCreated
+});
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">extractArchive()</span> method from the <span style="font-family: Courier New,Courier,monospace">js/core/core/archive.js</span> module is called. This method takes the full string path to the archive file and the reference to the folder as parameters.</p>
+
+<p>Before the first call to the Archive API, the application creates a <span style="font-family: Courier New,Courier,monospace">progress</span> object, which is used during the whole extraction process. The application then calls the <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> method from the Archive API. This method opens the archive file in the read mode. When the archive file is opened, the application triggers the <span style="font-family: Courier New,Courier,monospace">extract.started</span> event and calls the <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method of the archive object from the API.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">extractAll()</span> method extracts every file from the archive file to a given directory. It takes the location of the folder where the extracted files are stored as parameter.</p>
+
+<pre class="prettyprint">
+/* js/core/core/archive.js */
+function extractArchive(archiveFullPath, destinationFolder)
+{
+ var progress = new Progress(100, false);
+
+ try
+ {
+ tizen.archive.open(archiveFullPath, READ_MODE, function onOpenSuccess(archive)
+ {
+ e.fire('extract.started', archive.extractAll(
+ destinationFolder,
+ function extractSuccess()
+ {
+ e.fire('completed', progress);
+ },
+ onError,
+ function onProgress(operationId, value, filename)
+ {
+ progress.partialId = operationId;
+ progress.value = value;
+ progress.filename = filename;
+ e.fire('progress', progress);
+ }));
+ },
+ onError);
+ }
+ catch (ev)
+ {
+ e.fire('open.error', ev);
+ }
+}
+</pre></li>
+<li>
+<p>The <span style="font-family: Courier New,Courier,monospace">main.js</span> module listens various events to make the necessary changes in application UI:</p>
+<ul><li>The <span style="font-family: Courier New,Courier,monospace">onArchiveExtractStarted()</span> method is called to change the popup appearance to show a progress bar.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onArchiveProgress()</span> method updates the progress bar values for each progress callback during the extraction process.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">onArchiveCompleted()</span> method is called at the end of the extraction process to hide the progress popup.</li></ul>
+<pre class="prettyprint">
+/* js/views/pages/main.js */
+function onArchiveExtractStarted(ev)
+{
+ extractionTaskId = ev.detail;
+ popupView.showExtractProgress();
+}
+
+function onArchiveProgress(ev)
+{
+ popupView.setProgress(ev.detail);
+}
+
+function onArchiveCompleted()
+{
+ popupView.hide();
+ if (fileList.getMode() === fileList.PREVIEW_MODE)
+ {
+ router.navigate('views/modes/standard/show');
+ fileList.getPath().goToArchiveDirectory();
+ }
+ else
+ {
+ filesystem.getFiles(fileList.getPath().toString());
+ }
+}
+
+e.listeners(
+{
+ 'model.archive.progress': onArchiveProgress,
+
+ 'model.archive. extract.started ': onArchiveExtractStarted,
+ 'model.archive.completed': onArchiveCompleted,
+});
+</pre></li></ol>
+
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http:/*creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https:/*www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https:/*www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https:/*ssl' : 'http:/*www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>BluetoothChat Overview</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"/></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/bluetooth_w.htm">Bluetooth Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/communication/bluetooth_tutorial_w.htm">Bluetooth Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>BluetoothChat Overview</h1>
+ <p>The BluetoothChat sample application demonstrates how you can create a chat application that uses a Bluetooth connection for sending messages.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm">Bluetooth Chat task</a>.</p>
+ <p>The following figure illustrates the main screens of the BluetoothChat. </p>
+ <p class="figure">Figure: BluetoothChat screens</p>
+ <p align="center"><img alt="BluetoothChat screens" src="../images/bluetoothchat.png" /> </p>
+ <p>The application opens with the Bluetooth chat main screen. If Bluetooth is disabled, the <strong>Turn bluetooth on</strong> button appears and you must click it before you can create or join a server.</p>
+<p>On the main screen:</p>
+ <ul>
+ <li>To use your device as a chat server, click <strong>Create server</strong>. Enter the server name and click <strong>OK</strong> to start the server. When a client wants to join your chat, accept their passkey by clicking <strong>Yes</strong>, and then allow their connection by clicking <strong>Yes</strong> again.
+ <p>Remember that to be a server, you must make your Bluetooth radio visible.</p></li>
+ <li>To join a chat as a client, click <strong>Join server</strong>. Enter your client name, select the correct server from the list, and click <strong>OK</strong> to accept the passkey to confirm the connection to the server.</li>
+ </ul>
+ <p>On the chat screen, you can see the messages from other participants. To write your own messages, enter the message and click <strong>Send</strong>.</p>
+
+ <h2>Prerequisites</h2>
+ <ul>
+ <li>Target device (the Emulator does not support Bluetooth functions)</li>
+ <li>Peer device with which to connect</li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.client.js</span></td>
+ <td>This file contains the code for handling the client functionality of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.client.model.js</span></td>
+ <td>This file handles the data used by the client part of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span></td>
+ <td>This file allows storing the configuration values.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.helpers.js</span></td>
+ <td>This file contains the helper functions used by the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the main application class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file handles the data used by the common part of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.server.js</span></td>
+ <td>This file contains the code for handling the server functionality of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.server.model.js</span></td>
+ <td>This file handles the data used by the server part of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.events.js</span></td>
+ <td>This file handles the user interface events.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file handles the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></td>
+ <td>This file contains the <span style="font-family: Courier New,Courier,monospace">TemplateManager</span> class, which manages, caches, and provides HTML templates.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file starts the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="implementation" name="implementation">Implementation</h2>
+
+<p>The implementation of Bluetooth communication can be split into three parts:</p>
+
+<ol>
+<li>Bluetooth device management implementation</li>
+<li>Server side implementation</li>
+<li>Client side implementation</li>
+</ol>
+
+<h3 id="device" name="device">Bluetooth Device Management Implementation</h3>
+
+<p>The functionality of the Bluetooth device management module can be implemented as a JavaScript class:</p>
+<pre class="prettyprint">
+/* app.model.js */
+function Model()
+{
+ 'use strict';
+ this.adapter = null;
+ this.serviceUUID = '5BCE9431-6C75-32AB-AFE0-2EC108A30860';
+}
+
+(function strict()
+{
+ 'use strict';
+ Model.prototype =
+ {
+ init: function Model_init(callback)
+ {
+ (...)
+ },
+
+ powerOn: function Model_powerOn(callback)
+ {
+ (...)
+ },
+
+ powerOff: function Model_powerOff(callback)
+ {
+ (...)
+ },
+
+ setAdapterName: function Model_setAdapterName(changeName, callback)
+ {
+ (...)
+ }
+ };
+}());
+</pre>
+
+<p>The prototype of the class has the following functions:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">init</span> – initializes the bluetooth module.</li>
+<li><span style="font-family: Courier New,Courier,monospace">powerOn</span> – turns on the module.</li>
+<li><span style="font-family: Courier New,Courier,monospace">powerOff</span> – turns off the module.</li>
+<li><span style="font-family: Courier New,Courier,monospace">setAdapterName</span> – sets bluetooth device name.</li>
+</ul>
+<p>There are also defined two private variables:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">adapter</span> – a reference to the Bluetooth adapter object obtained from Bluetooth API.</li>
+<li><span style="font-family: Courier New,Courier,monospace">serviceUUID</span> – a unique string identifying the Bluetooth service.</li>
+</ul>
+<p>The constructor of this class defines the <span style="font-family: Courier New,Courier,monospace">serviceUUID</span> string variable that is a unique Bluetooth service identifier.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">init</span> function obtains the default Bluetooth adapter and registers a state change listener on it. The listener gives a notification that the connection is lost by calling <span style="font-family: Courier New,Courier,monospace">app.connectionLost()</span> when the adapter is powered off and there is no operation in progress.</p>
+<p>If initialization fails, the suitable alert appears and the application closes.</p>
+<pre class="prettyprint">
+/* app.model.js */
+init: function Model_init(callback)
+{
+ try
+ {
+ if (tizen.bluetooth === undefined)
+ {
+ throw new ReferenceError('tizen.bluetooth is not available');
+ }
+ this.adapter = tizen.bluetooth.getDefaultAdapter();
+
+ this.adapter.setChangeListener(
+ {
+ onstatechanged: function onAdapterStateChanged(powered)
+ {
+ if (!powered)
+ {
+ /* Notify that the connection is lost */
+ }
+ }
+ });
+
+ callback();
+ }
+ catch (error)
+ {
+ /* Shows the caught error */
+ tizen.application.getCurrentApplication().exit();
+ }
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">powerOn</span> function turns on the Bluetooth device if it is turned off. After that the callback function is executed.</p>
+<pre class="prettyprint">
+/* app.model.js */
+powerOn: function Model_powerOn(callback)
+{
+ if (!this.adapter.powered)
+ {
+ try
+ {
+ this.adapter.setPowered(true, function onAdapterPowerOnSuccess()
+ {
+ /* Notify UI that the adapter is on */
+ callback();
+ },
+
+ function onAdapterPowerOnError()
+ {
+ this.operationInProgress = false;
+ });
+ }
+ catch (error)
+ {
+ /* Handle the error */
+ }
+ } else
+ {
+ callback();
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">powerOff</span> function turns off the Bluetooth device if it was turned on. After that the given callback is called.</p>
+
+<pre class="prettyprint">
+/* app.model.js */
+powerOff: function Model_powerOff(callback)
+{
+ if (this.adapter.powered)
+ {
+ this.adapter.setPowered(false, function onAdapterPowerOffSuccess()
+ {
+ callback();
+ },
+
+ function onAdapterPowerOffError()
+ {
+ callback();
+ });
+ }
+ else
+ {
+ callback();
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">setAdapterName</span> function sets the Bluetooth device name as provided by the input parameter.</p>
+<pre class="prettyprint">
+/* app.model.js */
+setAdapterName: function setAdapterName(name, onSuccess)
+{
+ this.adapter.setName(name, onSuccess);
+}
+</pre>
+
+
+<h3 id="server" name="server">Server Side Implementation</h3>
+
+<p>The server side functionality can be implemented as a JavaScript class:</p>
+<pre class="prettyprint">
+/* app.server.model.js */
+/* Constructor */
+function ServerModel(parent)
+{
+ 'use strict';
+}
+
+(function strict()
+{
+ 'use strict';
+ ServerModel.prototype =
+ {
+ registerServer: function ServerModel_registerServer(adapter, serviceUUID, callback) {},
+
+ unregisterChatServer: function ServerModel_unregisterChatServer(globalRecordHandler, successCallback,
+ errorCallback, showButtonsCallback) {},
+
+ sendMessage: function ServerModel_sendMessage(name, socket, message, callback) {}
+ };
+
+}());
+</pre>
+<p>The prototype of the class has the following functions:</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">registerServer</span> – turns on the server and makes it visible.</li>
+<li><span style="font-family: Courier New,Courier,monospace">unregisterChatServer</span> – turns off the server.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sendMessage</span> – sends a message to the client.</li>
+</ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">registerServer</span> function calls the <span style="font-family: Courier New,Courier,monospace">registerRFCOMMServiceByUUID</span> method from the Bluetooth API in order to register a service record in the device service record database. After this method is successfully executed, the callback function is called with the service handler as an input parameter.</p>
+<pre class="prettyprint">
+/* app.server.model.js */
+registerServer: function ServerModel_registerServer(adapter, serviceUUID, callback)
+{
+ try
+ {
+ adapter.registerRFCOMMServiceByUUID(serviceUUID, 'Chat service', callback,
+
+ function onregisterRFCOMMServiceError(error)
+ {
+ console.error(error.message);
+ });
+ }
+ catch (error)
+ {
+ console.error(error.message);
+ }
+}
+</pre>
+
+<p>If any remote device tries to connect to this service, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> function held in the service handler object is called. Therefore, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> function needs to be implemented to handle the connections. The following code illustrates the implementation of the <span style="font-family: Courier New,Courier,monospace">registerServer</span> function.</p>
+<p>As shown below, the <span style="font-family: Courier New,Courier,monospace">onconnect</span> function is a callback that gets a socket object as an input parameter. There are several callback functions that can be added to the socket object to handle socket events. The following code demonstrates how to add functions to receive a message from the client (<span style="font-family: Courier New,Courier,monospace">onmessage</span>), to handle connection errors (<span style="font-family: Courier New,Courier,monospace">onerror</span>), and to handle closing the socket (<span style="font-family: Courier New,Courier,monospace">onclose</span>).</p>
+<pre class="prettyprint">
+/* app.server.js */
+registerServerSuccess: function Server_registerServerSuccess(recordHandler)
+{
+ recordHandler.onconnect = function onServerSocketConnect(socket)
+ {
+ socket.onmessage = function onServerSocketMessage()
+ {
+ var data, (...);
+ data = socket.readData();
+ /* Here is code parsing a client message and handling it */
+ };
+ socket.onerror = function onServerSocketError()
+ {
+ /* Handle error event */
+ };
+ socket.onclose = function onServerSocketClose()
+ {
+ /* Handle close socket event */
+ };
+ };
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">unregisterChatServer</span> function unregisters the service identified by the record handler.</p>
+<pre class="prettyprint">
+/* app.server.model.js */
+unregisterChatServer: function ServerModel_unregisterChatServer(globalRecordHandler, successCallback, errorCallback)
+{
+ try
+ {
+ globalRecordHandler.unregister(successCallback, errorCallback);
+ }
+ catch (error)
+ {
+ errorCallback(error);
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">sendMessage</span> function encodes the specified message and writes it to the socket.</p>
+<pre class="prettyprint">
+/* app.server.model.js */
+sendMessage: function ServerModel_sendMessage(name, socket, message, callback)
+{
+ /* Create a JSON message from input parameters, encode it */
+ /* and change to an array of chars - sendTextMsg */
+
+ try
+ {
+ if (socket !== null && socket.state === 'OPEN')
+ {
+ socket.writeData(sendTextMsg);
+ callback(message);
+ }
+ }
+ catch (error)
+ {
+ console.error('sendMessage: ' + error.message);
+ }
+}
+</pre>
+
+<h3 id="client" name ="client">Client Side Implementation</h3>
+
+<p>The client side functionality can be implemented as a JavaScript class:</p>
+
+<pre class="prettyprint">
+/* app.client.model.js */
+function ClientModel(parent)
+{
+ 'use strict';
+
+ /* Allows communicating with other models of the application */
+ this.client = parent;
+}
+
+(function strict()
+{
+ 'use strict';
+
+ ClientModel.prototype =
+ {
+
+ searchServer: function ClientModel_searchServer() { (...) },
+ stopServerSearching: function ClientModel_stopServerSearching(callback{ (...) },
+ startBonding: function ClientModel_startBonding(address, callback) { (...) },
+ destroyBonding: function ClientModel_destroyBonding(device, restartCallback) { (...) },
+ connectToService: function ClientModel_connectToService(device, serviceUUID,
+ successCallback, errorCallback) {},
+ sendMessage: function ClientModel_sendMessage(name, socket, message, callback) { (...) }
+ };
+}());
+</pre>
+<p>Prototype of the class has the following functions:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">searchServer</span> – Searches Bluetooth devices.</li>
+<li><span style="font-family: Courier New,Courier,monospace">stopServerSearching</span> – Stops searching.</li>
+<li><span style="font-family: Courier New,Courier,monospace">startBonding</span> – Ask the specified Bluetooth device to bond.</li>
+<li><span style="font-family: Courier New,Courier,monospace">destroyBonding</span> – Destroys bonding.</li>
+<li><span style="font-family: Courier New,Courier,monospace">connectToService</span> – Connects to the service on the bonded device.</li>
+<li><span style="font-family: Courier New,Courier,monospace">sendMessage</span> – Sends a message to the connected server.</li>
+</ul>
+
+<p>The constructor of this class gets the parent object as an input parameter. This object allows communicating with other modules of the application. The full implementation of the object is in the <span style="font-family: Courier New,Courier,monospace">app.client.js</span> file. For the purposes of this guide there is only needed to show the initialization of the adapter variable in the controller class:</p>
+<pre class="prettyprint">
+/* app.model.js */
+this.adapter = tizen.bluetooth.getDefaultAdapter();
+</pre>
+
+<p>This is the adapter variable from the <span style="font-family: Courier New,Courier,monospace">app.model.js</span>. This variable is passed to app.client.js after initialization.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">searchServer</span> function defines the set of callback functions and passes it to the <span style="font-family: Courier New,Courier,monospace">adapter.discoverDevices</span> function of the Bluetooth API.</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+/* Starts server searching */
+searchServer: function ClientModel_searchServer()
+{
+ var discoverDevicesSuccessCallback =
+ {
+ onstarted: function onDevicesDiscoverStarted()
+ {
+ /* Handle searching started event */
+ },
+ ondevicefound: function onDeviceFound(device)
+ {
+ /* Handle device found event */
+ },
+ ondevicedisappeared: function onDeviceDisappeared()
+ {
+ /* Handle device disappeared event */
+
+ return;
+ },
+ onfinished: function onDevicesDiscoverFinished()
+ {
+ /* Handle searching finished event */
+ }
+ };
+ this.client.adapter.discoverDevices(
+ discoverDevicesSuccessCallback,
+ function onDiscoverDevicesError()
+ {
+ /* Handle searching error */
+ });
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">stopServerSearchings</span> stops the searching by calling the <span style="font-family: Courier New,Courier,monospace">adapter.stopDiscovery</span> function of the Bluetooth API. When operation succeeds the given callback is executed.</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+stopServerSearching: function ClientModel_stopServerSearching(callback)
+{
+ this.client.adapter.stopDiscovery(function onStopDiscovery()
+ {
+ /* Handle stop searching succeeded */
+ callback();
+ }
+ .bind(this), function onStopDiscoveryError(e)
+ {
+ console.error('Error while stopDiscovery:' + e.message);
+ });
+}
+</pre>
+
+<p>To connect to a found Bluetooth device it is necessary to bond with this device. Bonding is implemented in the following function. The function gets an address of the device and a success callback as input parameters. The address can be obtained by calling the <span style="font-family: Courier New,Courier,monospace">searchServer</span> function described above.</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+startBonding: function ClientModel_startBonding(address, callback)
+{
+ this.client.adapter.createBonding(address, function onCreateBondingSuccess(device)
+ {
+ callback(device);
+ },
+
+ function onCreateBondingError(error)
+ {
+ console.error('bondError: ' + error.message);
+ });
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">destroyBonding</span> function gets a device object and a success callback as input parameters. It destroys bonding by executing the <span style="font-family: Courier New,Courier,monospace">adapter.destroyBonding</span> function from the Bluetooth API and executes the given success callback when the operation succeeds.</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+destroyBonding: function ClientModel_destroyBonding(device, successCallback)
+{
+ if (device.isBonded)
+ {
+ this.client.adapter.destroyBonding(device.address, successCallback, function onDestroyBondingError(error)
+ {
+ console.error('ClientModel_destroyBonding: ' + error);
+ });
+ }
+ else
+ {
+ successCallback();
+ }
+}
+</pre>
+
+<p>When the devices are bonded, it is possible to make a connection with a service identified by the UUID string. The <span style="font-family: Courier New,Courier,monospace">connectToService</span> function makes such connection. The function takes a device object, UUID string and callbacks as input parameters. In order to make a connection the <span style="font-family: Courier New,Courier,monospace">connectToServiceByUUID</span> method is called on the device object.</p>
+<p>When the operation succeeds, the success callback is executed with a socket object passed as an input parameter. Otherwise an error callback is executed.</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+connectToService: function ClientModel_connectToService(device, serviceUUID, successCallback, errorCallback)
+{
+ try
+ {
+ device.connectToServiceByUUID(serviceUUID, successCallback, errorCallback);
+ }
+ catch (error)
+ {
+ console.error('connectToServiceByUUID ERROR: ' + error.message);
+ errorCallback();
+ }
+}
+</pre>
+<p>After executing the connection to the service, the socket element can be accessed. It is possible to send and receive messages using this socket. The following function illustrates how to send a message to the server:</p>
+<pre class="prettyprint">
+/* app.client.model.js */
+sendMessage: function ClientModel_sendMessage(name, socket, message, callback)
+{
+ /* Create a JSON message from input parameters, encode it */
+ /* and change to an array of chars - sendTextMsg */
+ try
+ {
+ if (socket !== null && socket.state === 'OPEN')
+ {
+ socket.writeData(sendTextMsg);
+ callback(message);
+ }
+ }
+ catch (error)
+ {
+ console.error('sendMessage: ' + error.message);
+ }
+}
+</pre>
+
+<p>In order to receive events from the socket, a bunch of callbacks need to be implemented. These callbacks must be added to the socket element as its fields. The following code illustrates a success callback function passed to the <span style="font-family: Courier New,Courier,monospace">connectToService</span> function discussed above. This function gets a socket element and adds three callbacks to it:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">onmessage</span>, receiving a message from the server.</li>
+<li><span style="font-family: Courier New,Courier,monospace">onerror</span>, handling errors.</li>
+<li><span style="font-family: Courier New,Courier,monospace">onclose</span>, handling socket close event.</li>
+</ul>
+<pre class="prettyprint">
+/* app.client.js */
+connectToServiceSuccess:
+function Client_connectToServiceSuccess(device, socket)
+{
+ /* Callback function receiving a message */
+ socket.onmessage = function onSocketMessage()
+ {
+ var data, recvmsg = '', i, len, messageObj;
+ data = socket.readData();
+ len = data.length;
+ for (i = 0; i < len; i += 1)
+ {
+ recvmsg += String.fromCharCode(data[i]);
+ }
+ messageObj = JSON.parse(recvmsg);
+ /* Utilize received and parsed JSON message */
+ };
+
+ /* Callback function handling errors */
+ socket.onerror = function onSocketError()
+ {
+ console.error('Client onerror');
+ socket.close();
+ };
+
+ /* Callback function handling socket close event */
+ socket.onclose = function onSocketClose()
+ {
+ /* Handle event */
+ };
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">onmessage</span> callback reads and parses messages received from the socket using the socket.readData() function provided by the Bluetooth API.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">onerror</span> callback closes the socket using the socket.close() function provided by the Bluetooth API.</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>Calculator Sample Overview</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"/></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/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Calculator Sample Overview</h1>
+ <p>The Calculator sample application demonstrates how you can create a calculator with basic mathematical operations.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Calculator.</p>
+ <p class="figure">Figure: Calculator screen</p>
+ <p align="center"><img alt="Calculator screen" src="../images/calculator_sd_mw.png" /> </p>
+ <p>The application opens with the Calculator screen, where you can perform mathematical operations by clicking the applicable buttons.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+
+ <p>The application uses a simple MVC (Model-View-Controller) architectural model.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the code for the main application module used for initialization (Controller layer).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/model.js</span></td>
+ <td>This file contains the application model for handling mathematical operations (Model Layer).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/systeminfo.js</span></td>
+ <td>This file contains the battery state handling code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/ui.js</span></td>
+ <td>This file contains the implementation code for the user interface (View layer).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>All JavaScript files are loaded directly from the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. There is also initialization started by calling the <span style="font-family: Courier New,Courier,monospace">init()</span> method of the <span style="font-family: Courier New,Courier,monospace">app</span> module, which acts as an application controller.</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<script src="js/systeminfo.js"></script>
+<script src="js/app.js"></script>
+<script src="js/ui.js"></script>
+<script src="js/model.js"></script>
+<script>
+ app.init();
+</script>
+</pre>
+
+<p>The loaded application modules are used for specific actions:</p>
+
+<ul><li>
+<p><span style="font-family: Courier New,Courier,monospace">app</span> module initializes all other modules:</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+init: function init()
+{
+ 'use strict';
+ systeminfo.init();
+ model.init();
+ ui.init();
+ this.refreshEquation();
+},
+
+refreshEquation: function refreshEquation()
+{
+ 'use strict';
+ ui.showEquation(model.equation);
+}
+</pre></li>
+<li>
+<p><span style="font-family: Courier New,Courier,monospace">systeminfo</span> module is responsible for checking the battery. If the <span style="font-family: Courier New,Courier,monospace">level.battery</span> status is lower than 4% and the battery is not charging, the application terminates.</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+
+/* Add listener for low battery level */
+listenBatteryLowState: function listenBatteryLowState()
+{
+ 'use strict';
+ this.systeminfo.addPropertyValueChangeListener('BATTERY', function change(battery)
+ {
+ if (!battery.isCharging)
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ },
+ {
+ lowThreshold: 0.04
+ });
+},
+
+/* Check low battery state */
+checkBatteryLowState: function checkBatteryLowState()
+{
+ 'use strict';
+ this.systeminfo.getPropertyValue('BATTERY', function onBatteryRead(battery)
+ {
+ if (battery.level < 0.04 && !battery.isCharging)
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ },
+ null);
+},
+
+/* Initialize the systeminfo module */
+init: function init()
+{
+ 'use strict';
+ if (typeof tizen === 'object' &&
+ typeof tizen.systeminfo === 'object')
+ {
+ this.systeminfo = tizen.systeminfo;
+ this.checkBatteryLowState();
+ this.listenBatteryLowState();
+ }
+ else
+ {
+ console.warn('tizen.systeminfo not available');
+ }
+}
+</pre></li>
+<li>
+<p><span style="font-family: Courier New,Courier,monospace">model</span> module encapsulates the calculator logic (equation state and mathematical operations).</p></li>
+<li>
+<p><span style="font-family: Courier New,Courier,monospace">ui</span> module is responsible for managing the UI (updating and listening to events):</p>
+
+<ol><li>Register the event listeners:
+
+<pre class="prettyprint">
+/* js/ui.js */
+
+/* Initialize the UI module */
+init: function init()
+{
+ 'use strict';
+ this.resultElement = document.getElementById('result');
+ this.resultValueElement = document.getElementById('resultvalue');
+ this.equationElement = document.getElementById('equation');
+ this.preloadImages();
+ this.bindEvents();
+ this.error = false;
+ this.result = false;
+ /* Disable multitouch */
+ document.body.addEventListener('touchstart', this.filterTap, true);
+ document.body.addEventListener('touchend', this.filterTap, true);
+},</pre></li>
+<li>
+<p>Load the images and push them to the cache:</p>
+<pre class="prettyprint">
+preloadImages: function preloadImages()
+{
+ 'use strict';
+ var i, image;
+ for (i = this.imagesToPreload.length - 1; i >= 0; i -= 1)
+ {
+ image = new Image();
+ image.src = this.imagesToPreload[i];
+ this.imagesCache.push(image);
+ }
+},
+</pre></li>
+<li>
+<p>Bound the registered listeners to the calculator numeric keyboard:</p>
+
+<pre class="prettyprint">
+bindEvents: function bindEvents()
+{
+ 'use strict';
+ var numpad = document.getElementById('numpad'),
+ self = this;
+
+ numpad.addEventListener('touchstart', function onTouchStart(e)
+ {
+ /* Handle event */
+ });
+ numpad.addEventListener('touchend', function onTouchEnd(e)
+ {
+ /* Handle event */
+ });
+ numpad.addEventListener('touchcancel', function onTouchCancel(e)
+ {
+ /* Handle event */
+ });
+ document.addEventListener('tizenhwkey', function onTizenHwKey(e)
+ {
+ if (e.keyName === 'back')
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ });
+},
+</pre></li>
+<li>
+<p>Update the equation field with a value obtained from the <span style="font-family: Courier New,Courier,monospace">model</span> module. Now, the application is ready for use and waits for user actions.</p></li></ol></li></ul>
+
+<h3>Layout Implementation</h3>
+
+<p>The Calculator screen displays the basic keyboard and equation:</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<table id=...screen...>
+ <tr>
+ <td id=...display... valign=...middle...>
+ <div id=...overflow_top...></div>
+ <div id=...overflow_bottom...></div>
+ <div id=...equation...></div>
+ <div id=...result... class=...empty...><span id=...resultvalue...></span></div>
+ </td>
+ </tr>
+</table>
+
+<div id=...numpad...>
+ <div id=...key_7... class=...key... style=...clear: both;...></div>
+ <div id=...key_8... class=...key...></div>
+ <div id=...key_9... class=...key...></div>
+ <div id=...key_c... class=...key...></div>
+ <div id=...key_del... class=...key long-tap-repeat...></div>
+
+ <div id=...key_4... class=...key... style=...clear: both;...></div>
+ <div id=...key_5... class=...key...></div>
+ <div id=...key_6... class=...key...></div>
+ <div id=...key_div... class=...key...></div>
+ <div id=...key_mul... class=...key...></div>
+
+ <div id=...key_1... class=...key... style=...clear: both;...></div>
+ <div id=...key_2... class=...key...></div>
+ <div id=...key_3... class=...key...></div>
+ <div id=...key_sub... class=...key...></div>
+ <div id=...key_add... class=...key...></div>
+
+ <div id=...key_0... class=...key... style=...clear: both;...></div>
+ <div id=...key_dec... class=...key...></div>
+ <div id=...key_sign... class=...key...></div>
+ <div id=...key_eql... class=...longkey...></div>
+</div>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">ui</span> module manages the layout by listening to touch events on the calculator buttons, updating their press state, and passing control to the <span style="font-family: Courier New,Courier,monospace">app</span> module to run a proper action. The <span style="font-family: Courier New,Courier,monospace">ui</span> module also allows the <span style="font-family: Courier New,Courier,monospace">app</span> module to update the equation and its result, and formats those fields.</p>
+
+<pre class="prettyprint">
+/* js/ui.js */
+showEquation: function showEquation(equation)
+{
+ 'use strict';
+ var e, element, elementText, span, equationElement, length;
+
+ equationElement = document.getElementById('equation');
+
+ equationElement.innerHTML = '';
+
+ length = equation.length;
+ for (e = 0; e < length; e += 1)
+ {
+ element = equation[e];
+ span = document.createElement('span');
+ elementText = element;
+ if (Object.keys(this.operatorDisplays).indexOf(element) !== -1)
+ {
+ span.className = 'operator';
+ elementText = this.operatorDisplays[element];
+ }
+ else
+ {
+ elementText = app.addSeparators(elementText);
+ }
+ elementText = elementText.replace(/-/g, '&minus;');
+ span.innerHTML = elementText;
+ equationElement.appendChild(span);
+ }
+},
+
+show: function show(result)
+{
+ 'use strict';
+
+ if (result === '')
+ {
+ return this.clear();
+ }
+ this.equationElement.classList.add('top');
+ this.resultValueElement.innerHTML = result.replace(/-/g, '&minus;');
+},
+
+showResult: function showResult(result)
+{
+ 'use strict';
+ this.show(result);
+ this.result = true;
+},
+</pre>
+
+<h3>Equation Logic Implementation</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model</span> module handles the calculator logic. Its internal implementation of the equation is based on an array that stores each component (such as a number or operator) as a separate string. </p>
+
+<pre class="prettyprint">
+/* js/model.js */
+formatValue: function formatValue(value)
+{
+ 'use strict';
+ var formatted = '',
+ textValue = '',
+ dotIndex = 0;
+
+ textValue = value.toString();
+ dotIndex = textValue.indexOf('.');
+ if (dotIndex >= this.MAX_DIGITS)
+ {
+ /* If 2 first digits of the mantissa are higher than 95, round the result */
+ /* This is the behavior of the Calculator app in Samsung phones */
+ if (parseInt(textValue.substr(dotIndex + 1, Math.min(textValue.length, 2)), 10) >= 95)
+ {
+ value += 1;
+ }
+ }
+ /* Set precision to match 10-digit limit */
+ formatted = value.toFixed(this.MAX_DIGITS).toString();
+ formatted = formatted.substr(0,
+ this.MAX_DIGITS + formatted.replace(/\d/g, '').length).replace(/(\.(0*[1-9])*)0+$/, '$1').replace(/\.$/, '');
+
+ /* If the number is too big (exceeds digits limit) */
+ /* or is too small (rounds to zero) */
+ /* or has scientific notation without decimals (1E23 vs 1.00000E23) */
+ /* use properly formatted scientific notation */
+ if ((formatted === '0' && value !== 0) ||
+ value.toString().match(/[eE]/) ||
+ Math.abs(value) >= Math.pow(10, 10))
+ {
+ formatted = value.toExponential(5).toString();
+ }
+ /* Uppercase 'E', remove optional '+' from exponent */
+ formatted = formatted.toUpperCase().replace('E+', 'E');
+
+ return formatted;
+},
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model</span> module contains the following functions to modify the equation and compute its value. It also keeps the equation state valid by refusing to add wrong components.</p>
+
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">addDigit()</span> adds a single digit to the equation:
+
+<pre class="prettyprint">/* js/model.js */
+addDigit: function addDigit(digit)
+{
+ 'use strict';
+ var last = null;
+
+ if (this.calculated)
+ {
+ this.resetEquation();
+ }
+
+ last = this.getLastComponent();
+
+ /* If the previous component is not a number */
+ /* start a new component */
+ /* if there is only a minus before */
+ if ((!last || this.isOperator(last)) &&
+ (last !== '-' || this.equation.length > 1))
+ {
+ this.addComponent(digit);
+
+ return true;
+ }
+ this.replaceLastComponent(this.checkNegativeFormat(last));
+
+ if (this.isNegativeComponent(last) || last === '-')
+ {
+ last = '(-' +
+ (RegExp.$2 === '0' ? '' : RegExp.$2) +
+ digit + ')';
+ }
+ else if (last === '0')
+ {
+ last = digit;
+ }
+ else
+ {
+ last = last + digit;
+ }
+ if (last.replace(new RegExp('[^\\d]', 'g'), '').length <= this.MAX_DIGITS)
+ {
+ this.replaceLastComponent(last);
+
+ return true;
+ }
+
+ return false;
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">addOperator()</span> adds an operator (+, -, *, /) to the equation:
+
+<pre class="prettyprint">/* js/model.js */
+addOperator: function addOperator(operator)
+{
+ 'use strict';
+ var last = null;
+
+ if (this.calculated)
+ {
+ this.resetEquation();
+ this.addComponent(this.lastCalculationResult);
+ }
+
+ last = this.getLastComponent(true);
+
+ /* Operators other than '-' cannot be added to empty equations */
+ if (!last && operator !== '-')
+ {
+ return;
+ }
+ /* Cannot replace minus if on first position */
+ if (last === '-' && this.equation.length === 1)
+ {
+ return;
+ }
+
+ this.replaceLastComponent(this.checkNegativeFormat(last));
+
+ if (this.isOperator(last))
+ {
+ /* Replace the last operator with a new one */
+ this.replaceLastComponent(operator);
+ }
+ else
+ {
+ /* Check for 'E' being the last character of the equation */
+ if (last && last.match(/E$/))
+ {
+ /* Add '-' to the number and ignore other operators */
+ if (operator === '-')
+ {
+ this.replaceLastComponent(last + '-');
+ }
+ }
+ else
+ {
+ /* Add operator */
+ this.addComponent(operator);
+ }
+ }
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">addDecimal()</span> adds a decimal point to the equation:
+<pre class="prettyprint">/* js/model.js */
+addDecimal: function addDecimal()
+{
+ 'use strict';
+ var last = this.getLastComponent();
+
+ if (!last || this.isOperator(last))
+ {
+ this.addComponent('0' + this.DECIMAL);
+ }
+ else
+ {
+ this.replaceLastComponent(this.checkNegativeFormat(last));
+ if (last.indexOf(this.DECIMAL) === -1)
+ {
+ if (this.isNegativeComponent(last))
+ {
+ last = '(-' + RegExp.$2 + this.DECIMAL + ')';
+ }
+ else
+ {
+ last += this.DECIMAL;
+ }
+ this.replaceLastComponent(last);
+ }
+ }
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">deleteLast()</span> Deletes the last digit or operator:
+
+<pre class="prettyprint">/* js/model.js */
+removeLastChar: function removeLastChar(str)
+{
+ 'use strict';
+ return str.substring(0, str.length - 1).replace(this.EXPONENTIAL_REGEXP, '');
+},
+
+/* Delete the last element from equation (digit or operator) */
+deleteLast: function deleteLast()
+{
+ 'use strict';
+ var last = null, lastPositive;
+
+ if (this.calculated)
+ {
+ this.resetEquation();
+ this.addComponent(this.lastCalculationResult);
+
+ return;
+ }
+
+ last = this.getLastComponent();
+
+ if (!last)
+ {
+ return;
+ }
+
+ this.replaceLastComponent(this.checkNegativeFormat(last));
+
+ if (this.isNegativeComponent(last))
+ {
+ lastPositive = RegExp.$2;
+ if (lastPositive.length === 1)
+ {
+ this.equation.pop();
+ }
+ else
+ {
+ this.replaceLastComponent('(-' + this.removeLastChar(lastPositive) + ')');
+ }
+ }
+ else if (last.length === 1 || last.match(/^\-[0-9]$/))
+ {
+ this.equation.pop();
+ }
+ else
+ {
+ this.replaceLastComponent(this.removeLastChar(last));
+ }
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">resetEquation()</span> Clears the whole equation:
+
+<pre class="prettyprint">/* js/model.js */
+resetEquation: function resetEquation()
+{
+ 'use strict';
+ this.equation = [];
+ this.calculated = false;
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">changeSign()</span> changes the sign of the last equation component:
+
+<pre class="prettyprint">/* js/model.js */
+isNegativeComponent: function isNegativeComponent(component)
+{
+ 'use strict';
+
+ return (new RegExp('(\\()\\-(.*?)(\\))')).test(component);
+},
+
+changeSign: function changeSign()
+{
+ 'use strict';
+ var last;
+
+ if (this.calculated)
+ {
+ this.resetEquation();
+ this.addComponent(this.lastCalculationResult);
+ }
+
+ last = this.getLastComponent();
+ /* If there is at least one component and last component not an operator or zero */
+ if (last && !this.isOperator(last) && last !== '0')
+ {
+ if ((/^\-/).test(last))
+ {
+ last = '(' + last + ')';
+ }
+ if (this.isNegativeComponent(last))
+ {
+ last = RegExp.$2;
+ /* Assign the last matched value */
+ }
+ else
+ {
+ last = '(-' + last + ')';
+ }
+ this.replaceLastComponent(last);
+
+ return true;
+ }
+
+ return false;
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">isEmpty()</span> Returns <span style="font-family: Courier New,Courier,monospace">true</span> if the equation does not contain any components:
+
+<pre class="prettyprint">/* js/model.js */
+isEmpty: function isEmpty()
+{
+ 'use strict';
+
+ return this.equation.length === 0;
+},
+</pre>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">calculate()</span> calculates the equation value.
+<p>When the user touches a button, the <span style="font-family: Courier New,Courier,monospace">ui</span> module notifies the <span style="font-family: Courier New,Courier,monospace">app</span> module by calling its <span style="font-family: Courier New,Courier,monospace">processKey()</span> function. The request is dispatched and finally the <span style="font-family: Courier New,Courier,monospace">calculate()</span> function of the <span style="font-family: Courier New,Courier,monospace">model</span> module is called. When the result is obtained, the <span style="font-family: Courier New,Courier,monospace">app</span> module requests the <span style="font-family: Courier New,Courier,monospace">ui</span> module to update the applicable field in the UI by calling the <span style="font-family: Courier New,Courier,monospace">showResult()</span> function.</p>
+<pre class="prettyprint">/* js/app.js */
+processKey: function processKey(key)
+{
+ 'use strict';
+ var keys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+ if (ui.isResultVisible())
+ {
+ if (Object.keys(this.operatorKeys).indexOf(key) === -1 &&
+ key !== 'del' &&
+ key !== 'eql' &&
+ key !== 'sign')
+ {
+ model.resetEquation();
+ }
+ }
+ ui.clearResult();
+ if (keys.indexOf(key) !== -1)
+ {
+ this.pushDigits(key);
+ }
+ else if (Object.keys(this.operatorKeys).indexOf(key) !== -1)
+ {
+ model.addOperator(this.operatorKeys[key]);
+ }
+ else if (key === 'dec')
+ {
+ model.addDecimal();
+ }
+ else if (key === 'del')
+ {
+ model.deleteLast();
+ }
+ else if (key === 'c')
+ {
+ model.resetEquation();
+ }
+ else if (key === 'sign')
+ {
+ model.changeSign();
+ }
+ if (key === 'eql' && !model.isEmpty())
+ {
+ this.calculate();
+ }
+ this.refreshEquation();
+},
+
+calculate: function calculate()
+{
+ 'use strict';
+ var result = '';
+ try
+ {
+ result = model.calculate();
+ result = this.addSeparators(result);
+ ui.showResult('=&nbsp;' + result);
+ }
+ catch (e)
+ {
+ if (e instanceof EquationInvalidFormatError)
+ {
+ ui.showResult('Wrong format');
+ }
+ else if (e instanceof CalculationError)
+ {
+ ui.showResult('Invalid operation');
+ }
+ else if (e instanceof InfinityError)
+ {
+ ui.showResult((e.positive ? '' : '&minus;') + '&infin;');
+ }
+ else
+ {
+ ui.showError('Unknown error.');
+ console.warn(e);
+ }
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">calculate()</span> function checks the equation correctness and finally merges all its components into a single string and runs it as a JavaScript expression to obtain its value. The equation result is returned:</p>
+
+<pre class="prettyprint">/* js/model.js */
+calculate: function calculate()
+{
+ 'use strict';
+ /* jslint evil:true */
+ /* jslint unparam: true */
+ var evaluation = '',
+ result,
+ /* Checks whether the matched number is zero */
+ checkDivisionByZero = function checkDivisionByZero(m, p1, number)
+ {
+ if (parseFloat(number) === 0)
+ {
+ throw new DivisionByZeroError();
+ }
+ return '/ ' + number;
+ };
+
+ if (this.calculated)
+ {
+ this.replaceLeftOperand(this.lastCalculationResult);
+ }
+
+ if (!this.isValidEquation())
+ {
+ throw new EquationInvalidFormatError();
+ }
+
+ this.calculated = false;
+
+ /* Evaluate the equation */
+ try
+ {
+ evaluation = this.equation.join(' ');
+ evaluation = evaluation.replace(/\/ *(\(?\-?([0-9\.]+)\)?)/g, checkDivisionByZero);
+
+ result = eval('(' + evaluation + ')');
+ if (Math.abs(result) < 1.0E-300)
+ {
+ result = 0;
+ }
+ }
+ catch (e)
+ {
+ console.error(e);
+ throw new CalculationError();
+ }
+
+ if (isNaN(result))
+ {
+ throw new CalculationError();
+ }
+ if (result === Infinity || result === -Infinity)
+ {
+ throw new InfinityError(result === Infinity);
+ }
+
+ this.calculated = true;
+ /* Format the result value */
+ result = this.formatValue(result);
+ /* Save the calculated result */
+ this.lastCalculationResult = result;
+
+ return result;
+}
+</pre></li>
+</ul>
+
+<p>The following example shows the support functions for the <span style="font-family: Courier New,Courier,monospace">model</span> module:</p>
+
+<pre class="prettyprint">/* js/model.js */
+
+/* Returns the last component of equation*/
+getLastComponent: function getLastComponent(correct)
+{
+ 'use strict';
+ var last = this.equation[this.equation.length - 1] || null;
+ if (correct && last && last.slice(-1) === this.DECIMAL)
+ {
+ last = last.slice(0, -1);
+ last.replace('.)', ')');
+ this.equation[this.equation.length - 1] = last;
+ }
+
+ return last;
+},
+
+/* Replaces the last equation component with specified value */
+replaceLastComponent: function replaceLastComponent(value)
+{
+ 'use strict';
+ var length = this.equation.length;
+
+ if (length > 0)
+ {
+ this.equation[length - 1] = value;
+ this.calculated = false;
+ }
+},
+
+/* Adds a new component to the equation */
+addComponent: function addComponent(value)
+{
+ 'use strict';
+ this.equation.push(value);
+ this.calculated = false;
+},
+
+/* Returns true if the specified value is an operator */
+isOperator: function isOperator(value)
+{
+ 'use strict';
+
+ return this.OPERATORS.indexOf(value) !== -1;
+},
+
+/* Returns true if the equation can be calculated */
+isValidEquation: function isValidEquation()
+{
+ 'use strict';
+ var last = this.getLastComponent(true);
+
+ return (!this.isOperator(last) && !last.match(/E-?$/));
+},
+
+/* Replaces the left operand with specified value*/
+replaceLeftOperand: function replaceLeftOperand(value)
+{
+ 'use strict';
+ var length = this.equation.length,
+ leftOperandSize = 0;
+
+ if (length === 0)
+ {
+ return;
+ }
+ if (length === 1)
+ {
+ leftOperandSize = 0;
+ }
+ else if (length === 2)
+ {
+ leftOperandSize = 1;
+ }
+ else
+ {
+ leftOperandSize = length - 3;
+ }
+
+ this.equation.splice(0, leftOperandSize);
+ this.equation[0] = value;
+ this.calculated = false;
+}
+
+/* Checks whether the component represents a negative digit */
+isNegativeComponent: function isNegativeComponent(component)
+{
+ 'use strict';
+
+ return (new RegExp('(\\()\\-(.*?)(\\))')).test(component);
+},
+
+/* Checks whether the component is negative and fixes its format */
+checkNegativeFormat: function checkNegativeFormat(component)
+{
+ 'use strict';
+ if (component && component.match(/^\-d+/))
+ {
+ component = '(' + component + ')';
+ }
+
+ return component;
+},
+
+/* Changes the sign of the last component (if applicable) */
+/* Returns true if sign was changed */
+changeSign: function changeSign()
+{
+ 'use strict';
+ var last;
+
+ if (this.calculated)
+ {
+ this.resetEquation();
+ this.addComponent(this.lastCalculationResult);
+ }
+
+ last = this.getLastComponent();
+ /* If there is at least one component and last component not an operator or zero */
+ if (last && !this.isOperator(last) && last !== '0')
+ {
+ if ((/^\-/).test(last))
+ {
+ last = '(' + last + ')';
+ }
+ if (this.isNegativeComponent(last))
+ {
+ last = RegExp.$2;
+ /* Assign the last matched value */
+ }
+ else
+ {
+ last = '(-' + last + ')';
+ }
+ this.replaceLastComponent(last);
+
+ return true;
+ }
+
+ return false;
+},
+</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>Calendar Sample Overview</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"/></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/system/time_w.htm">Time Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Calendar Sample Overview</h1>
+ <p>The Calendar sample application demonstrates how you can display the calendar month by month in your application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Calendar. </p>
+ <p class="figure">Figure: Calendar screen</p>
+ <p align="center"><img alt="Calendar screen" src="../images/calendar_sd_mw.png" /> </p>
+ <p>The application contains one screen that displays the selected month. After the application starts, the current month is displayed. Click the <strong>Prev</strong> and <strong>Next</strong> buttons to view the previous and next month respectively. The <strong>Today</strong> button shows the current month.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/date.js</span></td>
+ <td>This file contains functions related to the date operations.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/date.js</span></td>
+ <td>This file contains functions related to the current date.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/month.js</span></td>
+ <td>This file contains the function that returns the month matrix.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/init.js</span></td>
+ <td>This file contains code that initializes the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/monthPage.js</span></td>
+ <td>This file contains code that handles the interaction with the month page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the layouts of the application screens and templates for the smaller elements of the user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">getDaysMatrix()</span> method is called after the application start and after every button click. It fills the data matrix with the day numbers. The length of the matrix is constant and equals the week length.</p>
+
+<pre class="prettyprint">
+/* js/models/month.js */
+
+var DAYS_IN_WEEK = 7;
+
+/**
+* Creates a matrix of days in months
+* Example: [ [29,30,1,2,3,4,5], [6,7,8,9,10,11,12], ...]
+* @param {Date} date Date object.
+* @return {array} daysMatrix Days matrix.
+*/
+function getDaysMatrix(date)
+{
+ var daysNumber = d.daysInMonth(date),
+ daysPad = d.getFirstDay(date),
+ previous = d.getPreviousMonth(date),
+ previousDaysNumber = d.daysInMonth(previous),
+ rowsLength = Math.ceil((daysNumber + daysPad) / DAYS_IN_WEEK),
+ data = [],
+ daysMatrix = [],
+ start = 0,
+ next = 1,
+ i = 1,
+ j = 0;
+
+ /* Previous month's days */
+ while (daysPad--)
+ {
+ data.push(getDayData(date, previousDaysNumber - daysPad, -1));
+ }
+
+ /* Current month's days */
+ for (i; i <= daysNumber; i = i + 1)
+ {
+ data.push(getDayData(date, i, 0));
+ }
+
+ /* Next month's days */
+ while (data.length % DAYS_IN_WEEK)
+ {
+ data.push(getDayData(date, next++, 1));
+ }
+
+ for (j = 0; j < rowsLength; j = j + 1)
+ {
+ start = j * DAYS_IN_WEEK;
+ daysMatrix.push(data.slice(start, start + DAYS_IN_WEEK));
+ }
+
+ return daysMatrix;
+}</pre>
+
+<h3>Layout Implementation</h3>
+
+<p>The Calendar sample application contains a single screen that organizes the calendar data in the monthly view.</p>
+<p>The screen contains the following elements:</p>
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">month-header</span> id displays the name of the month and the number of the year.</li>
+<li><span style="font-family: Courier New,Courier,monospace">div</span> element with the <span style="font-family: Courier New,Courier,monospace">month-content</span> id displays the days of the selected month.</li>
+<li><span style="font-family: Courier New,Courier,monospace">div</span> element with <span style="font-family: Courier New,Courier,monospace">month-footer</span> id displays the navigation buttons that enable switching between months.</li>
+</ul>
+<pre class="prettyprint"><!--index.html-->
+<div class="ui-page ui-page-active invisible" id="month-page">
+ <div class="ui-header" id="month-header" data-position="fixed">
+ <h2 id="month-name" class="ui-title"></h2>
+ </div>
+ <div class="ui-content" id="month-content"></div>
+ <div class="ui-footer" id="month-footer">
+ <div class="ui-tabbar">
+ <ul>
+ <li><a id="prev-month-btn">Prev</a></li>
+ <li><a id="current-month-btn">Today</a></li>
+ <li><a id="next-month-btn">Next</a></li>
+ </ul>
+ </div>
+ </div>
+</div>
+</pre>
+
+<h3>Navigation between Months</h3>
+
+<p>To switch between months, the user clicks the buttons in the application footer. To handle the month switching, the application registers event listeners to the navigation buttons.</p>
+
+<p>When a button is clicked, the application updates the current date using the <span style="font-family: Courier New,Courier,monospace">setCurrentDate()</span> method of the <span style="font-family: Courier New,Courier,monospace">js/models/date.js</span> module. The application uses the <span style="font-family: Courier New,Courier,monospace">getPreviousMonth()</span>, <span style="font-family: Courier New,Courier,monospace">getNextMonth()</span>, and <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> methods of the <span style="font-family: Courier New,Courier,monospace">js/helpers/date.js</span> module to get the month information.</p>
+
+<pre class="prettyprint">/* js/views/monthPage.js */
+var prevBtn = null,
+ currentBtn = null,
+ nextBtn = null;
+
+function onPrevMonthBtnTap()
+{
+ var currentDate = dateModel.getCurrentDate(),
+ prevMonthDate = d.getPreviousMonth(currentDate);
+
+ dateModel.setCurrentDate(prevMonthDate);
+ createView();
+}
+
+function onNextMonthBtnTap()
+{
+ var currentDate = dateModel.getCurrentDate(),
+ nextMonthDate = d.getNextMonth(currentDate);
+
+ dateModel.setCurrentDate(nextMonthDate);
+ createView();
+}
+
+function onCurrentMonthBtnTap()
+{
+ dateModel.setCurrentDate(d.getCurrentDateTime());
+ createView();
+}
+
+function bindEvents()
+{
+ prevBtn.addEventListener('click', onPrevMonthBtnTap);
+ currentBtn.addEventListener('click', onCurrentMonthBtnTap);
+ nextBtn.addEventListener('click', onNextMonthBtnTap);
+}
+
+function init()
+{
+ prevBtn = document.getElementById('prev-month-btn');
+ currentBtn = document.getElementById('current-month-btn');
+ nextBtn = document.getElementById('next-month-btn');
+ bindEvents();
+}
+</pre>
+
+<p>When the current date is set, the application calls the <span style="font-family: Courier New,Courier,monospace">createView()</span> method to perform the UI update:</p>
+<ul>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">setHeader()</span> method updates the information displayed in the application header. It obtains the current date using the <span style="font-family: Courier New,Courier,monospace">getCurrentDate()</span> method of the <span style="font-family: Courier New,Courier,monospace">js/helpers/date.js</span> module. When the current date is known, the <span style="font-family: Courier New,Courier,monospace">innerHTML</span> attribute of the <span style="font-family: Courier New,Courier,monospace">monthName</span> HTML element is updated using the <span style="font-family: Courier New,Courier,monospace">getMonthName()</span> method of the <span style="font-family: Courier New,Courier,monospace">js/helpers/date.js</span> module and the <span style="font-family: Courier New,Courier,monospace">getFullYear()</span> method provided by the JavaScript API.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">prepareTables()</span> method uses an empty <span style="font-family: Courier New,Courier,monospace">monthTable.tpl</span> template and adds it to the <span style="font-family: Courier New,Courier,monospace">innerHTML</span> property of the <span style="font-family: Courier New,Courier,monospace">monthContent</span> HTML element.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">fillTables()</span> method uses the empty table created using the <span style="font-family: Courier New,Courier,monospace">prepareTables()</span> method and fills it with values corresponding to the days of the selected month.</p></li>
+<li><p>The <span style="font-family: Courier New,Courier,monospace">markDay()</span> method displays the current day on the table. For this purpose, the application maintains the <span style="font-family: Courier New,Courier,monospace">data-date</span> attribute for each HTML element representing the day on the displayed table. The application finds the element that contains the <span style="font-family: Courier New,Courier,monospace">data-date</span> attribute with a value equal to the current day. If such an element exists on the displayed table, the <span style="font-family: Courier New,Courier,monospace">markDay()</span> method adds to it the CSS class.</p></li>
+ </ul>
+
+<pre class="prettyprint">/* js/views/monthPage.js */
+function setHeader()
+{
+ var date = dateModel.getCurrentDate();
+
+ monthName.innerHTML = d.getMonthName(date) + ' ' +
+ date.getFullYear();
+}
+
+function prepareTables()
+{
+ monthContent.innerHTML = t.get('monthTable', {id: 'month'});
+}
+
+function fillTables()
+{
+ var date = dateModel.getCurrentDate();
+ fillTable(date, 'month');
+}
+
+function markDay(date, className)
+{
+ var dateString = typeof date === 'string' ?
+ date : d.toDataString(date),
+ today = document.querySelector(
+ '[data-date="' + dateString + '"]'
+ );
+
+ if (today)
+ {
+ today.classList.add(className);
+ }
+}
+
+function createView()
+{
+ setHeader();
+ prepareTables();
+ fillTables();
+ markDay(d.getCurrentDateTime(), DAY_TODAY_CLS);
+}
+</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
--- /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>CallLog Overview</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"/></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/social/call_history_w.htm">Call History Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/social/call_history_tutorial_w.htm">Call History Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Callhistory API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API</a></li>
+
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>CallLog Overview</h1>
+ <p>The CallLog sample application demonstrates how you can view the detailed call history from the device or from a specific caller. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm">Call Log task</a>.</p>
+ <p>The following figure illustrates the main screens of the CallLog.</p>
+ <p class="figure">Figure: CallLog screens</p>
+ <p align="center"><img alt="CallLog screens" src="../images/calllog.png" /> </p>
+ <p>The application opens with the main screen that shows the recent call history. On the <strong>History for caller</strong> screen, click:</p>
+ <ul>
+ <li><strong>Call</strong> to make a call.</li>
+ <li><strong>Message</strong> to send an SMS.</li>
+ <li><strong>DELETE</strong> to delete call history items.</li>
+ </ul>
+ <h2>Prerequisites</h2>
+ <ul>
+ <li>An active SIM card</li>
+ <li>If the call history is empty, the application cannot be used.</li>
+ <li>The application does not work on the Emulator.</li>
+ </ul>
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span></td>
+ <td>This file allows storing the configuration values.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.helpers.js</span></td>
+ <td>This file contains the helper functions used by the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the main application class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file handles the data used by the common part of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file handles the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></td>
+ <td>This file contains the <span style="font-family: Courier New,Courier,monospace">TemplateManager</span> class that manages, caches, and provides HTML templates.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.modifiers.js</span></td>
+ <td>This file contains the filters used in the templates.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file starts the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the layout for the application screens, and templates for smaller UI components.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2 id="implementation">Implementation</h2>
+
+
+
+<p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+<pre class="prettyprint">
+<!--config.xml-->
+ <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+ <tizen:privilege name="http://tizen.org/privilege/callhistory.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/callhistory.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
+</pre>
+<p>On initialization of the application layout, the Contact API is used to get phone contacts.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+init: function Ui_init()
+{
+ /* Load contacts */
+ this.loadContacts();
+ this.templateManager = new TemplateManager();
+ this.helpers = new Helpers();
+ $(document).ready(this.domInit.bind(this));
+ $.mobile.tizen.disableSelection(document);
+},
+</pre>
+<p>On successfully getting contacts, they are assigned to UI class variable <span style="font-family: Courier New,Courier,monospace">contactsLoaded</span>.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+loadContacts: function Ui_loadContacts(callback)
+{
+ var contactsFoundCB, errorCB;
+
+ this.contactsLoaded = null;
+
+ contactsFoundCB = function onContactsFindSuccess(contacts)
+ {
+ this.contactsLoaded = contacts;
+ if (callback instanceof Function)
+ {
+ callback();
+ }
+ };
+
+ errorCB = function onContactFindError(error)
+ {
+ console.error('Model_loadContacts, problem with find() method: ' + error.message);
+ };
+
+/* Load contacts */
+this.addressBook.find(contactsFoundCB.bind(this), errorCB);
+},
+</pre>
+<p>The application main page uses the Callhistory API to display a list of made and received calls. The following method initializes the UI pages. The Callhistory API is used in the <span style="font-family: Courier New,Courier,monospace">app.showCallHistory()</span> method to get the call history.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+initPages: function Ui_initPages()
+{
+ var pages = [], body = $('body');
+
+ body
+ .append(this.templateManager.get('messageWindow'))
+ .append(this.templateManager.get('errorWindow'))
+ .trigger('create');
+ .append($(this.templateManager.get('callView')).children())
+ .trigger('pagecreate')
+ .trigger('pageshow');
+ pages.push(this.templateManager.get('callerHistory'));
+ body.append(pages.join(''));
+ this.removeSearchBarToHeader();
+
+ this.addEvents();
+
+ /* Show call history */
+ app.showCallHistory();
+
+ this.photoURIdefault = $('#header .photo').css('background-image');
+},
+</pre>
+
+<p>The following method calls the model method. The success function <span style="font-family: Courier New,Courier,monospace">this.ui.showCallHistory.bind(this.ui)</span> is rendering the call history list method (<span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span> <span style="font-family: Courier New,Courier,monospace">showCallHistory</span> shown lower).</p>
+<pre class="prettyprint">
+/* app.js */
+showCallHistory: function App_showCallHistory()
+{
+ this.model.getCallHistory(this.ui.showCallHistory.bind(this.ui));
+},
+</pre>
+<p>The method sorts the list of connections by start time, where each element is a collection of data, such as a remote phone number, call start time, or call duration (see interface of <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span>).</p>
+<pre class="prettyprint">
+/* app.model.js */
+getCallHistory: function Model_getCallHistory(onSuccess, onError)
+{
+ if (typeof onError !== 'function')
+ {
+ onError = function onCallHistoryFindError(e)
+ {
+ console.error('Model_getCallHistory error', e);
+ };
+ }
+
+ tizen.callhistory.find(onSuccess, onError, null,
+ new tizen.SortMode('startTime', 'DESC'));
+},
+</pre>
+
+<p>The following method call is the <span style="font-family: Courier New,Courier,monospace">onSuccess</span> function using <span style="font-family: Courier New,Courier,monospace">callEntries</span> to fill the call list. Callers are grouped by phone numbers.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+showCallHistory: function Ui_showCallHistory(callEntries)
+{
+ var self = this,
+
+ /* Return duplicated entries */
+ function filterForSameEntry(element)
+ {
+ return self.getNumber(current) === self.getNumber(element) &&
+ current.direction === element.direction;
+ }
+
+ for (i = 0; i < len; i = i + 1)
+ {
+ current = callEntries[i];
+ date = this.helpers.toNativeDate(current.startTime);
+
+ /* If the date is changed, create a new dayLog */
+
+ /* Group the entries by remote party */
+ filterResult = dayLog.entries.filter(filterForSameEntry);
+ }
+ /* Create UL list with dividers */
+ calllogListContentPos = this.helpers.getScrollPosition(calllogListContent);
+ calllogList.empty().append(elements);
+ /* Searching phrase */
+
+ setTimeout(this.helpers.scrollTo.bind(this, calllogListContent, calllogListContentPos), 10);
+},
+</pre>
+
+<p>By tapping on a list element on the main page, the page changes to the Caller details view with a list of connections. You can use a filter in the <span style="font-family: Courier New,Courier,monospace">find()</span> method to reduce the search result by a specified phone number.</p>
+<pre class="prettyprint">
+/* app.model.js */
+getCallHistoryForCaller: function Model_getCallHistoryForCaller(phoneNumber, onSuccess)
+{
+ var filter = null, success;
+ if (phoneNumber)
+ {
+ filter = new tizen.AttributeFilter('remoteParties.remoteParty', 'EXACTLY', phoneNumber);
+ success = onSuccess;
+ }
+ else
+ {
+ success = function onCallHistoryFindSuccess(calls)
+ {
+ onSuccess(calls.filter(function onIterate(element)
+ {
+ if (!element.remoteParties[0].remoteParty)
+ {
+ return element;
+ }
+ }));
+ };
+ }
+
+ tizen.callhistory.find(success, function onCallHistoryFindError(e)
+ {
+ console.error(e);
+ },
+ filter,
+ new tizen.SortMode('startTime', 'DESC'));
+},
+</pre>
+
+<p>On the Caller details view the following actions can be made:</p>
+
+<ul>
+<li><p>Calling by clicking the <strong>Call</strong> button. The Application API is used to make a call. The <span style="font-family: Courier New,Courier,monospace">ApplicationControl</span> interface is used to launch other applications. To respond to the call log by calling, specify the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/dial</span> operation and the contact number as parameters.</p>
+<pre class="prettyprint">
+/* app.uj.js */
+$('#callActionBtn').on('click', function onCallBtnClick()
+{
+ self.lockButtons('#callActionBtn, #smsActionBtn');
+ self.hideCheckboxes();
+ self.lockButtons('#deleteActionBtn');
+ app.makeCall($('#forCallerList').data('remoteParty'));
+});
+
+/* app.js */
+makeCall: function App_makeCall(phoneNumber)
+{
+ var self = this,
+ appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/call', 'tel:' + phoneNumber);
+ tizen.application.launchAppControl(
+ appControl,
+ null,
+ function onCallSuccess()
+ {
+ setTimeout(function unlockButtons()
+ {
+ self.ui.unlockButtons();
+ },
+ 1500);
+ },
+ function onCallError(e)
+ {
+ console.error('Call to ' + phoneNumber + ' failed. Call service is unavailable.', e);
+ self.ui.showErrorPopup('Call failed. ' + 'Call service is unavailable.'); self.ui.unlockButtons();
+ },
+ {
+ onsuccess: function onCallSuccess()
+ {
+ self.ui.unlockButtons();
+ },
+ onfailure: function onCallError(e)
+ {
+ console.log('App_makeCall: Call to ' + phoneNumber + ' failed. Call service was busy.', e);
+ .ui.unlockButtons();
+ }
+ });
+ },
+</pre>
+</li>
+<li><p>Sending a message by clicking the <strong>Message</strong> button.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+ $('#smsActionBtn').on('click', function onSmsBtnClick(event)
+{
+ event.stopPropagation();
+ event.preventDefault();
+ self.lockButtons('#smsActionBtn, #callActionBtn');
+ self.hideCheckboxes();
+ self.lockButtons('#deleteActionBtn');
+ /* Send SMS */
+ app.sendSms($('#forCallerList').data('remoteParty'));
+});
+</pre>
+
+<p>To respond to the call log by sending a message, specify the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/compose</span> operation and the contact number as parameters.</p>
+<pre class="prettyprint">
+/* app.js */
+sendSms: function App_sendSms(phoneNumber)
+{
+ var self = this,
+ appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/compose', 'sms:' + phoneNumber);
+
+ tizen.application.launchAppControl(appControl, null, null, function onSendMessageError(e)
+ {
+ console.error('Message launch error: ', e);
+ self.ui.showErrorPopup('Message service is unavailable');
+ app.ui.unlockOptionButtons();
+ },
+ {
+ onfailure: function onSendMessageError(er)
+ {
+ console.error('Message service launch error: ', er);
+ self.ui.showErrorPopup('Message service is unavailable');
+ app.ui.unlockOptionButtons();
+ }
+ });
+},
+</pre>
+</li>
+<li><p>Deleting the log entries by clicking the <strong>DELETE</strong> button on the bottom of the screen.</p>
+<p>To remove an entry from the call history, use the <span style="font-family: Courier New,Courier,monospace">tizen.callhistory.remove</span> method with <span style="font-family: Courier New,Courier,monospace">CallHistoryEntry</span> argument. Removing is realized in a loop that depends on the checked call logs to delete the checked call log entries.</p>
+<p>First, there is a call to an <span style="font-family: Courier New,Courier,monospace">app.js</span> method with the specified entry.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+deleteCheckedLogs: function Ui_deleteCheckedLogs(e)
+{
+ /* If there is popup open, close it */
+ this.closePopup();
+
+ /* Uncheck SelectAll checkbox */
+ this.selectCheckbox($('#selectAllDetails'), false);
+
+ /* Iterate through all entries */
+ $('#forCallerList li.call').each(function onCallEntryIterate()
+ {
+ /* If entry contains selected checkbox */
+ if ($(this).find('form label').hasClass('ui-checkbox-on'))
+ {
+ /* Remove that entry */
+ app.deleteLog($(this).data('entries')[0]);
+ /* Remove connected HTML element */
+ $(this).remove();
+ }
+ });
+}
+</pre>
+
+<p>Then, the following method calls for the model method.</p>
+<pre class="prettyprint">
+/* app.js */
+deleteLog: function App_deleteLogs(entry)
+{
+ this.model.deleteLog(entry);
+},
+</pre>
+<p>The following model method uses the API to delete a given entry from the call history.</p>
+<pre class="prettyprint">
+/* app.model.js */
+deleteLog: function Model_deleteLog(entry)
+{
+ try
+ {
+ tizen.callhistory.remove(entry);
+ }
+ catch (e)
+ {
+ console.error('Error on entry delete: ' + e.message);
+ }
+},
+</pre>
+<p>The Application API is used to exit the application in the exit method of the app module.</p>
+<pre class="prettyprint">
+/* app.js */
+exit: function App_exit(event)
+{
+ if (event instanceof Event)
+ {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ tizen.application.getCurrentApplication().exit();
+}
+</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>
\ 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>Chatter Overview</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"/></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/messaging_w.htm">Messaging Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/communication/messaging_tutorial_w.htm">Messaging Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Chatter Overview</h1>
+ <p>The Chatter sample application demonstrates how you can send and receive text messages between devices and view the message history of a specific caller. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm">Chatter task</a>.</p>
+ <p>The following figure illustrates the main screens of the Chatter.</p>
+ <p class="figure">Figure: Chatter screens</p>
+ <p align="center"><img alt="Chatter screens" src="../images/chatter.png" /> </p>
+ <p> The application opens with the Chatter main screen, where a caller list is displayed. To start a chat with a caller, click the caller name on the list.</p>
+ <p>On the message screen, enter a new message and click <strong>Send</strong>. </p>
+ <p>To chat with somebody who is not listed in the caller list on the main screen, click <strong>New chat</strong> on the main screen. Enter the phone number of the person you want to chat with and click <strong>Create Chat</strong>.</p>
+ <h2>Prerequisites</h2>
+ <ul>
+ <li>2 devices with active SIM cards</li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains CSS rules for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.helpers.js</span></td>
+ <td>This file contains the helper functions used by the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the main application class</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file handles the data used by the common part of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.events.js</span></td>
+ <td>This file handles the user interface events.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file handles the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></td>
+ <td>This file contains the <span style="font-family: Courier New,Courier,monospace">TemplateManager</span> class that manages, caches, and provides HTML templates.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file starts the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="implementation">Implementation</h2>
+
+ <p>The required privileges are declared in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file.</p>
+ <pre class="prettyprint">
+<!--config.xml-->
+ <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/contact.write"/>
+ <tizen:privilege name="http://tizen.org/privilege/messaging.read"/>
+ <tizen:privilege name="http://tizen.org/privilege/messaging.write"/>
+</pre>
+
+<p>On application launch during the creation of the <span style="font-family: Courier New,Courier,monospace">model</span> module, the Contact API is used to get contacts from the phone address book. The returned result is a unified address book object.</p>
+<pre class="prettyprint">
+/* app.model.js */
+function Model()
+{
+ 'use strict';
+
+ /* Unified addressbook object */
+ this.addressBook = tizen.contact.getUnifiedAddressBook();
+
+ /* (…) */
+}
+</pre>
+<p>After that, the SMS service is initialized.</p>
+<pre class="prettyprint">
+/* app.model.js */
+init: function Model_init()
+{
+ this.loadContacts();
+ this.initSmsService();
+},
+
+initSmsService: function Model_initSmsService()
+{
+ var self = this;
+ try
+ {
+ tizen.messaging.getMessageServices('messaging.sms', function onMessageServicesFound(s)
+ {
+ self.smsService = s[0];
+ /* Prepare the messages */
+ self.prepareMessages(app.fillUpMessagePage.bind(app));
+ /* Add the change listener */
+ self.messagesChangeListener();
+ });
+ }
+ catch (error)
+ {
+ console.error(error.message);
+ }
+},
+</pre>
+<p>On success available messages are prepared and message change listener is added.</p>
+<p>An event listener detects whether messages were changed, added, or removed using the <span style="font-family: Courier New,Courier,monospace">addMessagesChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface. When messages are added or removed, the <span style="font-family: Courier New,Courier,monospace">prepareMessages()</span> method is called to refresh the message list.</p>
+<p>In the <span style="font-family: Courier New,Courier,monospace">prepareMessage()</span> method the messages are retrieved using the <span style="font-family: Courier New,Courier,monospace">findMessages()</span> method of the <span style="font-family: Courier New,Courier,monospace">MessageStorage</span> interface. The first argument of the method is the <span style="font-family: Courier New,Courier,monospace">AttributeFilter</span> filter object of the Tizen API, and the second argument is an event handler for sorting the messages (the newest on top). The retrieved messages are saved in the <span style="font-family: Courier New,Courier,monospace">messagesList</span> variable and sorted by date.</p>
+
+<pre class="prettyprint">
+/* app.model.js */
+messagesChangeListener: function Model_initSmsService()
+{
+ var self = this,
+ messageChangeCallback =
+ {
+ messagesupdated: function onMessagesUpdated(messages)
+ {
+ if (messages[0].messageStatus !== 'SENDING')
+ {
+ app.ui.changeMessageStatus(messages[0]);
+ }
+ },
+ messagesadded: function onMessagesAdded()
+ {
+ self.prepareMessages(app.ui.showMessageChat);
+ },
+ messagesremoved: function onMessagesRemoved()
+ {
+ self.prepareMessages(app.ui.showMessageChat);
+ }
+ };
+ this.smsService.messageStorage.addMessagesChangeListener(messageChangeCallback);
+},
+
+prepareMessages: function Model_prepareMessages(callback)
+{
+ var self = this;
+ try
+ {
+ this.smsService.messageStorage.findMessages(new tizen.AttributeFilter('type', 'EXACTLY', 'messaging.sms'),
+ function onMessagesLoaded(messages)
+ {
+ function compare(a, b)
+ {
+ if (a.timestamp > b.timestamp)
+ {
+ return -1;
+ }
+ if (a.timestamp < b.timestamp)
+ {
+ return 1;
+ }
+ return 0;
+ }
+ messages.sort(compare);
+ self.messagesList = self.groupMessages(messages);
+ app.ui.loadCallerList();
+ callback();
+ },
+ function onError()
+ {
+ console.error('prepareMessage: error');
+ });
+ }
+ catch (err)
+ {
+ console.error(err);
+ }
+},
+</pre>
+
+<p>Messages in <span style="font-family: Courier New,Courier,monospace">messagesList</span> are grouped according to their recipient key. Each recipient object consists of a message array and the latest message. The grouped object can be used for both main and chat screens of the Chatter application.</p>
+
+<pre class="prettyprint">
+/* app.model.js */
+groupMessages: function Model_groupMessages(messages)
+{
+ var i, obj = {}, folderId;
+ for (i in messages)
+ {
+ if (messages.hasOwnProperty(i))
+ {
+ folderId = messages[i].folderId;
+ if ((folderId !== null &&
+ folderId !== this.DRAFTS_FOLDER) ||
+ messages[i].messageStatus === 'DRAFT')
+ {
+ if (messages.hasOwnProperty(i))
+ {
+ obj = this.groupMessagesSingle(messages[i], obj);
+ }
+ }
+ }
+ }
+
+ return obj;
+},
+
+groupMessagesSingle: function Model_groupMessagesSingle(message, obj)
+{
+ var key, j;
+ if (message.from)
+ {
+ key = message.from;
+ obj[key] = this.pushData(message, obj[key]);
+ } else
+ {
+ for (j in message.to)
+ {
+ if (message.to.hasOwnProperty(j))
+ {
+ key = message.to[j];
+ obj[key] = this.pushData(message, obj[key]);
+ }
+ }
+ }
+
+ return obj;
+},
+</pre>
+
+<p>The grouped messages are displayed as a list on the main page of the application.</p>
+<p>After the application starts, there are three ways to start a chat: </p>
+<ul>
+<li>By tapping on the list of started conversations from the list on the main page.
+<pre class="prettyprint">
+/* app.ui.js */
+onCallerListElementTap: function Ui_onCallerTap(event, element)
+{
+ event.preventDefault();
+ event.stopPropagation();
+ app.setCurrentNumber(element.attr('phone'));
+ app.setCurrentCaller(element.attr('caller'));
+ $.mobile.changePage('#chat');
+},
+</pre>
+<pre class="prettyprint">
+/* app.ui.events.js */
+$('#chat, #main').on('pageshow', function onMessagePageShow()
+{
+ app.fillUpMessagePage();
+});
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">app.fillUpMessagePage()</span>method is shown below.</p>
+</li>
+<li>
+By tapping the <strong>New chat</strong> button on the bottom of the screen, and then tapping on:
+<ul>
+<li>A contact from the sorted list based on <span style="font-family: Courier New,Courier,monospace">model.addressBook</span>.
+<pre class="prettyprint">
+/* app.js */
+showContactsLoaded: function App_showContactsLoaded()
+{
+ var i, len, sortedContactList = [];
+
+ if (this.model.contactsLoaded !== null &&
+ this.model.contactsLoaded.length)
+ {
+ len = this.model.contactsLoaded.length;
+ for (i = 0; i < len; i += 1)
+ {
+ if (this.model.contactsLoaded[i].phoneNumbers.length)
+ {
+ sortedContactList.push(
+ {
+ caller: this.helpers.getCallerName(this.model.contactsLoaded[i], 'no name'),
+ number: this.model.contactsLoaded[i].primaryNumber,
+ contact: this.model.contactsLoaded[i]
+ });
+ }
+ }
+
+ sortedContactList.sort(function compareContacts(a, b)
+ {
+ if (a.caller < b.caller)
+ {
+ return -1;
+ }
+ if (a.caller > b.caller)
+ {
+ return 1;
+ }
+
+ return 0;
+ });
+ }
+ this.ui.fillContactList(sortedContactList);
+},
+</pre>
+</li>
+<li>The <strong>Enter number</strong> button, and then entering and accepting the phone number.</li>
+</ul>
+</li>
+</ul>
+<p>When the application opens the chat page, the page is filled with messages content.</p>
+<pre class="prettyprint">
+/* app.js */
+fillUpMessagePage: function App_fillUpMessagePage()
+{
+ var activePageId = $.mobile.activePage.attr('id');
+ if (activePageId === 'main')
+ {
+ this.ui.loadCallerList();
+ }
+ else if (activePageId === 'contactSelect')
+ {
+ this.showContactsLoaded();
+ }
+ else
+ {
+ this.ui.showMessageChat();
+ }
+},
+</pre>
+
+<p>If there are messages, the message bubbles are shown.</p>
+<pre class="prettyprint">
+/* app.ui.js */
+showMessageChat: function Ui_showMessageChat()
+{
+ var ul, li, i, date, data,
+ key = app.getCurrentNumber(), messages;
+ if (document.webkitVisibilityState === 'visible' &&
+ $.mobile.activePage.attr('id') === 'chat')
+ {
+ /* Update name if changed */
+ /* Set the caller phone number */
+ app.setCurrentCaller(app.model.getNameByNumber(key));
+ $('#chat-title').text(app.getCurrentCaller());
+ ul = $('#message-chat').empty();
+
+ if (app.model.messagesList[key] !== undefined)
+ {
+ /* Get messages from prepared messages */
+ messages = app.model.messagesList[key].messages;
+ i = messages.length;
+ while (i--)
+ {
+ date = new Date(messages[i].timestamp);
+ data =
+ {
+ 'bubbleType': messages[i]
+ .to.length === 0 ? 'left' : 'right',
+ 'label': app
+ .model.getNameByNumber(messages[i].from),
+ 'caller': messages[i].caller,
+ 'id': messages[i].id,
+ 'plainBody': messages[i].body.plainBody,
+ 'date': app.helpers.getDate(date),
+ 'hour': date.getHours(),
+ 'minutes': app
+ .helpers.addZeroBefore(date.getMinutes()),
+ 'status': messages[i].messageStatus
+ };
+
+ if (!messages[i].isRead)
+ {
+ app.model.setRead(messages[i]);
+ }
+
+ li = $(app.ui.templateManager
+ .get('normalBubble', data));
+ if (messages[i].messageStatus === 'DRAFT')
+ {
+ li.one('click', app.model.editDraft
+ .bind(app.model, messages[i], li));
+ }
+ ul.append(li);
+ }
+ ul.listview('refresh');
+ app.ui.scrollToBottom();
+ }
+ }
+},
+</pre>
+
+<p>After the user writes the message and taps the <strong>Send</strong> button, the <span style="font-family: Courier New,Courier,monospace">sendMessage()</span> method is called to send the message using the <span style="font-family: Courier New,Courier,monospace">smsService</span> object. The message type and recipient information are included as arguments for the method.</p>
+<p>The message text is taken from the DOM element. The phone number was stored in a variable in the app module when the chat page was displayed (in the <span style="font-family: Courier New,Courier,monospace">showMessageChat()</span> method of the UI class).</p>
+
+<pre class="prettyprint">
+/* app.ui.events.js */
+$('#send').on('vclick', function onSendClick(event)
+{
+ var text = $('#text').blur().val();
+ event.stopPropagation();
+ self.ui.resetTextAreas();
+ self.ui.setChatCounterValue();
+ self.ui.checkChatSendButtonState();
+ /* Send message */
+ app.sendMessage(text, [app.getCurrentNumber()]);
+});
+</pre>
+
+<pre class="prettyprint">
+/* app.js */
+getCurrentNumber: function App_getCurrentNumber()
+{
+ return this.currentNumber;
+},
+
+sendMessage: function App_sendMessage(text, numbers)
+{
+ var onError = function onError(e)
+ {
+ var message = 'Unknown error.';
+ if (e)
+ {
+ if (e.type === 'NetworkError')
+ {
+ message = 'Network error.';
+ }
+ else if (e.type === '')
+ {
+ message = 'Invalid number.';
+ }
+ }
+ app.ui.showSendErrorPopup(message);
+ };
+ /* Send message */
+ this.model.sendMessage(numbers, text,app.model.prepareMessages.bind(
+ app.model,
+ app.ui.showMessageChat),
+ onError);
+}
+</pre>
+
+<pre class="prettyprint">
+/* app.model.js */
+sendMessage: function Model_sendMessage(num, text, onSuc, onErr)
+{
+ var message;
+ onSuc = onSuc || function noop()
+ {
+ return;
+ };
+ onErr = onErr || function noop()
+ {
+ return;
+ };
+
+ /* Send a message to specified number with entered text */
+ message = new tizen.Message('messaging.sms', {plainBody: text, to: [num]});
+ try
+ {
+ this.smsService.sendMessage(
+ message,
+ onSuc,
+ function onError(e)
+ {
+ onSuc();
+ console.error(
+ 'Could not send the message. Error: ' +
+ e.name + ': ' + e.message, e);
+ onErr(e);
+ });
+ }
+ catch (e)
+ {
+ onSuc();
+ console.error(
+ 'Could not send the message. Exception: ' +
+ e.name + ':' + e.message, e);
+ onErr(e);
+ }
+},
+</pre>
+<p>The Application API is used to exit the application in the <span style="font-family: Courier New,Courier,monospace">exit</span> method of the <span style="font-family: Courier New,Courier,monospace">App</span> module.</p>
+<pre class="prettyprint">
+/* app.js */
+exit: function App_exit()
+{
+ var application = tizen.application.getCurrentApplication();
+ application.exit();
+},
+</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
--- /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>Compass Overview</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"/></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/w3c/device/device_orientation_w.htm">DeviceOrientation Event Specification Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/w3c/device/device_orientation_tutorial_w.htm">DeviceOrientation Event Specification Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Compass Overview</h1>
+ <p>The Compass sample application demonstrates how you can use the W3C DeviceOrientation Event in your application to monitor the device orientation. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm">Compass task</a>.</p>
+ <p>The following figure illustrates the main screen of the Compass.</p>
+ <p class="figure">Figure: Compass screen</p>
+ <p align="center"><img alt="Compass screen" src="../images/compass.png" /> </p>
+ <p>The application opens with the main screen that shows the current device orientation.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the device orientation functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method, which is called when the whole DOM content is loaded, initializes the application. It defines three references to the UI elements and calls the <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> methods.</p>
+<pre class="prettyprint">
+/* main.js */
+var directionEl = null,
+ angleEl = null,
+ rotationEl = null;
+
+function init()
+{
+ directionEl = document.getElementById('direction');
+ angleEl = document.getElementById('angle');
+ rotationEl = document.getElementById('rotation');
+ bindEvents();
+}
+
+window.addEventListener('DOMContentLoaded', init);
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> method defines handler methods for <span style="font-family: Courier New,Courier,monospace">tizenhwkey</span> and <span style="font-family: Courier New,Courier,monospace">deviceorientation</span> events. The first one uses the <span style="font-family: Courier New,Courier,monospace">exit()</span> method and allows user to close application using device hardware back button. The other one defines the <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> method as a callback.</p>
+<pre class="prettyprint">
+/* main.js */
+function bindEvents()
+{
+ window.addEventListener('tizenhwkey', function onTizenHWKey(e)
+ {
+ if (e.keyName === 'back')
+ {
+ exit();
+ }
+ });
+ window.addEventListener('deviceorientation', onDeviceOrientation, false);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> method is responsible for updating the application UI (displayed degree and direction values and compass rotation animation) according to the information obtained from the W3C DeviceOrientation event. It takes an event object describing the physical orientation of the device. To get the compass heading data, the application uses the alpha parameter of this object. The alpha parameter provides a value expressed in degrees (ranged from 0 to 360) and allows easily calculating and displaying the correct direction.</p>
+<p>Another task of the <span style="font-family: Courier New,Courier,monospace">onDeviceOrientation()</span> method is to calculate the rotation of the compass. The application uses the <span style="font-family: Courier New,Courier,monospace">lastAngle</span> variable to store previously measured alpha angle in order to calculate the value of <span style="font-family: Courier New,Courier,monospace">deltaAngle</span> variable which represents the value change. Depending on the <span style="font-family: Courier New,Courier,monospace">deltaAngle</span> value, the application calculates the value of the rotation variable to provide the shortest path for the compass UI animation. The compass UI is animated using the <span style="font-family: Courier New,Courier,monospace">-webkit-transform</span> CSS property.</p>
+<pre class="prettyprint">
+/* main.js */
+var lastAngle = 0, /* Last measurement */
+ rotation = 0; /* Compass rotation */
+
+function onDeviceOrientation(eventData)
+{
+ var angle = eventData.alpha,
+ deltaAngle,
+ text = '';
+
+ /* Check whether the angle has changed since the last measurement */
+ if (isNaN(eventData.alpha) ||
+ eventData.alpha === lastAngle)
+ {
+ return;
+ }
+
+ /* Find direction from a given angle */
+ if (angle < 68 || angle > 292)
+ {
+ text = 'NORTH';
+ }
+ else if (angle > 112 && angle < 248)
+ {
+ text = 'SOUTH';
+ }
+ if (angle > 22 && angle < 158)
+ {
+ text += 'EAST';
+ }
+ else if (angle > 202 && angle < 338)
+ {
+ text += 'WEST';
+ }
+
+ /* Calculate the rotation of the compass */
+ deltaAngle = lastAngle - angle;
+ if (deltaAngle > 180)
+ {
+ rotation -= 360 - deltaAngle;
+ }
+ else if (deltaAngle < -180)
+ {
+ rotation += 360 + deltaAngle;
+ }
+ else
+ {
+ rotation += deltaAngle;
+ }
+
+ /* Save the current value */
+ lastAngle = angle;
+
+ /* Update the direction and angle labels */
+ directionEl.innerHTML = text;
+ angleEl.innerHTML =
+ Math.round(angle) + '°';
+ /* Rotate the compass image */
+ rotationEl.style['-webkit-transform'] = 'rotate(' + rotation + 'deg)';
+}
+</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
--- /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>ContactList Sample Overview</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"/></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/social/contact_w.htm">Contact Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ContactList Sample Overview</h1>
+ <p>The ContactList sample application demonstrates how you can get contact data stored in the device.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the ContactList.</p>
+ <p class="figure">Figure: ContactList screens</p>
+ <p align="center"><img alt="ContactList screens" src="../images/contactlist_mw.png" /> </p>
+ <p>The application opens with the main screen that shows the contact names in a list. To see more information on each contact, tap the name to open the detail screen.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span> </td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span> </td>
+ <td>This file contains the code for handling the main functionality of the application. </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/page.js</span> </td>
+ <td>This file handles page navigation and history.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/popup.js</span> </td>
+ <td>This file handles opening and closing a popup screen.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="implementation">Implementation</h2>
+
+ <p>When the application starts:</p>
+
+ <ol><li>The application reads the contact data:
+<pre class="prettyprint">
+addressbook = tizen.contact.getDefaultAddressBook();
+addressbook.find(function(result)
+ {
+ contacts = result;
+ setDefaultViews();
+ },
+ function()
+ {
+ setError("Failed to get contacts");
+ });
+</pre></li>
+
+<li>The main page is filled with the name list.
+<p>To get the full name of a contact, use <span style="font-family: Courier New,Courier,monospace">contact.name.displayname</span>:</p>
+<pre class="prettyprint">
+/* function setDefaultViews */
+for (i = 0; i < contacts.length; i++)
+{
+ dataContacts.push(
+ {
+ name:
+ {
+ data: contacts[i].name.displayName,
+ cb: createCallback(i)
+ }
+ });
+}
+
+showListView(dataContacts);
+</pre></li></ol>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">showContact()</span> function shows the detail screen, with information provided by the Contact API. Some information has multiple instances, so check the information length before referencing its value.</p>
+<pre class="prettyprint">
+data =
+{
+ name: contacts[index].name.displayName,
+ phone: ((contacts[index].phoneNumbers.length > 0) ? contacts[index].phoneNumbers[0].number : null),
+ address: ((contacts[index].addresses.length > 0) ? contacts[index].addresses[0].streetAddress : null),
+ email: ((contacts[index].emails.length > 0) ? contacts[index].emails[0].email : null),
+ note: ((contacts[index].notes.length > 0) ? contacts[index].notes[0] : null),
+ photo: contacts[index].photoURI || null
+};
+</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>ContactsExchanger Overview</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"/></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/nfc_w.htm">NFC Guide</a></li>
+ <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</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ContactsExchanger Overview</h1>
+ <p>The ContactsExchanger sample application demonstrates how you can share contact card details between 2 NFC (Near Field Communication) devices or through an NFC tag. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm">Contacts Exchanger task</a>.</p>
+ <p>The following figure illustrates the main screens of the ContactsExchanger.</p>
+ <p class="figure">Figure: ContactsExchanger screens</p>
+ <p align="center"><img alt="ContactsExchanger screens" src="../images/contactsexchanger.png" /> </p>
+ <p> The application opens with the main screen that shows your default contact card if you have already created one. To create a default contact card, click <strong>Create default card</strong> and select the default contact from your address book.</p>
+ <p> </p>
+ <p>When the default contact card has been created, the following tasks are available: </p>
+ <ul>
+ <li>To change the default contact, click <strong>Change your default contact</strong> and select a new contact form the address book.</li>
+ <li>To read contact data from an NFC tag, click <strong>Read from card</strong> and within 10 seconds place the device next to an NFC tag.</li>
+ <li>To write contact data to an NFC tag, click <strong>Write to card</strong> and within 10 seconds place the device next to an NFC tag.</li>
+ <li>To share the default contacts between 2 devices running the ContactsExchanger application, click <strong>Communicate with another device</strong> on both devices, and within 10 seconds, place the devices next to each other.</li>
+ </ul>
+ <p></p>
+ <h2>Prerequisites</h2>
+ <ul>
+ <li>2 NFC-enabled devices or 1 NFC-enabled device and 1 NFC tag</li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span> </td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span> </td>
+ <td>This file defines the main application class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span> </td>
+ <td>This file handles the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span> </td>
+ <td>This file allows storing the configuration values.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span> </td>
+ <td>This file contains the <span style="font-family: Courier New,Courier,monospace">TemplateManager</span> class that manages, caches, and provides HTML templates.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.nfc.js</span> </td>
+ <td>This file is the main controller for NFC communication.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.nfc.card.js</span> </td>
+ <td>This file handles communication with the NFC tags.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.nfc.peer.js</span> </td>
+ <td>This file handles communication between two peers with NFC on board.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span> </td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="implementation">Implementation</h2>
+
+ <p>The ContactsExchanger sample application defines the <span style="font-family: Courier New,Courier,monospace">App</span> class. The instance is created after the application starts.</p>
+<pre class="prettyprint">
+/* app.js */
+var App = null,
+ app = null; /* App instance */
+
+(function strict()
+{
+ 'use strict';
+
+ App = function App()
+ {
+ return;
+ };
+}());
+app = new App();
+</pre>
+
+<p>When the whole DOM content is loaded, the <span style="font-family: Courier New,Courier,monospace">init()</span> method of the <span style="font-family: Courier New,Courier,monospace">App</span> class is called. It is responsible for the application initialization. The <span style="font-family: Courier New,Courier,monospace">init()</span> method:</p>
+<ul>
+<li>Creates an object of the <span style="font-family: Courier New,Courier,monospace">Config</span> class which provides some important configuration data.</li>
+<li>Creates an object of the <span style="font-family: Courier New,Courier,monospace">App.Ui</span> class which is responsible for the UI appearance and behavior.</li>
+<li>Creates an object of the <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class which provides the NFC API functionality for the application.</li>
+<li>Calls the <span style="font-family: Courier New,Courier,monospace">defineEvents()</span> method of the <span style="font-family: Courier New,Courier,monospace">App.Ui</span> class to define the UI events and its handlers.</li>
+<li>Calls the <span style="font-family: Courier New,Courier,monospace">initAdressBook()</span> of the <span style="font-family: Courier New,Courier,monospace">App</span> class which uses the Contact API to obtain information about the contacts defined on the device database.</li>
+</ul>
+
+<pre class="prettyprint">
+/* app.js */
+(function strict()
+{
+ 'use strict';
+
+ App.prototype =
+ {
+ init: function appInit()
+ {
+ this.config = new Config();
+ this.ui = new App.Ui(this);
+ this.nfc = new App.NFCControl(this);
+ this.ui.defineEvents();
+ this.initAddressBook(this.nfc.turnOnNFC.bind(this.nfc));
+ },
+ }
+}());
+
+$(document).ready(app.init.bind(app));
+</pre>
+<p>The constructor of the <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class calls its <span style="font-family: Courier New,Courier,monospace">init()</span> method. At the beginning the <span style="font-family: Courier New,Courier,monospace">init()</span> method calls the <span style="font-family: Courier New,Courier,monospace">checkNfcCapabilities()</span> method to check whether the NFC functionality is supported by device. Most importantly, the <span style="font-family: Courier New,Courier,monospace">init()</span> method creates the objects of <span style="font-family: Courier New,Courier,monospace">App.NFCCard</span> and <span style="font-family: Courier New,Courier,monospace">App.NFCPeer</span> class. They provide the key functionality related to NFC communication.</p>
+
+<pre class="prettyprint">
+/* app.nfc.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCControl = function NFCControl(app)
+ {
+ this.app = app;
+ this.init();
+ };
+
+ App.NFCControl.prototype =
+ {
+ init: function nfc_init()
+ {
+ this.checkNfcCapabilities();
+ this.card = new App.NFCCard(this);
+ this.peer = new App.NFCPeer(this);
+ this.endOfText = String.fromCharCode(3);
+ },
+ }
+}());
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">checkNfcCapabilities()</span> method of <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class uses the System Information API to check whether the NFC functionality is supported by device. If NFC is not supported, the application displays a warning and after confirmation closes automatically.</p>
+
+<pre class="prettyprint">
+/* app.nfc.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCControl.prototype =
+ {
+ checkNfcCapabilities: function nfc_checkNfcCapabilities()
+ {
+ var isNfcSupported,
+ self = this;
+
+ try
+ {
+ isNfcSupported = tizen.systeminfo.getCapabilities().nfc;
+ }
+ catch (err)
+ {
+ console.error('nfc_checkNfcCapabilities: ', err.message);
+ isNfcSupported = false;
+ }
+ if (!isNfcSupported)
+ {
+ setTimeout(function notSupportedWarning()
+ {
+ self.app.ui.showPopupWarning('NFC is not supported on ' +
+ 'your device. Application will be closed.');
+ }, 500);
+ }
+ },
+ }
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">App.NFCCard</span> class provides functionality that allows application to exchange contacts data between the NFC device and the NFC tag. The details of the functionality are described in the following code snippets.</p>
+
+<pre class="prettyprint">
+/* app.nfc.card.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCCard = function nfc_NFCCard(nfc)
+ {
+ this.nfc = nfc;
+ };
+}());
+</pre>
+
+<p>When the user clicks the <strong>Read from card</strong> button, the application calls the <span style="font-family: Courier New,Courier,monospace">setTagDetectRead()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCCards</span> class. This method uses the <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method from the NFC API to define what should be done when the NFC tag is placed next to the NFC device. In this case, the <span style="font-family: Courier New,Courier,monospace">sucTagReadAttach()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCCard</span> class is called. The <span style="font-family: Courier New,Courier,monospace">sucTagReadAttach()</span> method takes the <span style="font-family: Courier New,Courier,monospace">NFCTag</span> type parameter and uses it to call the <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> method from the NFC API. The <span style="font-family: Courier New,Courier,monospace">readNDEF()</span> method takes two callbacks (in case of success or failure) as parameters. In case of success the application calls the <span style="font-family: Courier New,Courier,monospace">readMessage()</span> function from the <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class. Depending on the results, the interface of the application is updated accordingly.</p>
+
+<pre class="prettyprint">
+/* app.nfc.card.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCCard.prototype =
+ {
+ sucTagReadAttach: function nfc_card_sucTagReadAttach(tag)
+ {
+ try
+ {
+ if (!tag.isSupportedNDEF)
+ {
+ throw
+ {
+ message: 'This tag doesn\'t support NDEF'
+ };
+ }
+ tag.readNDEF(this.nfc.readMessage.bind(this.nfc),
+ this.readMessageErr.bind(this));
+ }
+ catch (e)
+ {
+ this.readMessageErr(e);
+ }
+ },
+
+ setTagDetectRead: function nfc_card_setTagDetectRead()
+ {
+ try
+ {
+ this.nfc.nfcAdapter.unsetTagListener();
+ this.nfc.nfcAdapter.setTagListener(
+ {
+ onattach: this.sucTagReadAttach.bind(this),
+ ondetach: this.nfc.sucDetach.bind(this.nfc)
+ });
+ }
+ catch (error)
+ {
+ this.readMessageErr(error);
+ }
+ },
+ }
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">readMessage()</span> function from the <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class takes the <span style="font-family: Courier New,Courier,monospace">NDEFMessages</span> type parameter and uses it to update the application data and the UI.</p>
+
+<pre class="prettyprint">
+/*app.nfc.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCControl.prototype =
+ {
+ readMessage: function nfc_readMessage(message)
+ {
+ try
+ {
+ this.fillRecordInfo(message.records[0]);
+ }
+ catch (err)
+ {
+ console.error('nfc_readMessage: ', err.message);
+ }
+ },
+ };
+}());
+</pre>
+
+<p>When the user clicks the <strong>Write to card</strong> button, the application calls the <span style="font-family: Courier New,Courier,monospace">setTagDetectWrite()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCCard</span> class. This method uses the <span style="font-family: Courier New,Courier,monospace">setTagListener()</span> method from the NFC API to define what should be done when the NFC tag is placed next to the NFC device. In this case, the <span style="font-family: Courier New,Courier,monospace">sucTagWriteAttach()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCCard</span> class is called. The <span style="font-family: Courier New,Courier,monospace">sucTagWriteAttach()</span> method takes the <span style="font-family: Courier New,Courier,monospace">NFCTag</span> type parameter and uses it to call the <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> method from the NFC API. The <span style="font-family: Courier New,Courier,monospace">writeNDEF()</span> method takes as parameters the previously prepared message (with contacts data) and two callbacks (in case of success or failure). Depending on the results, the interface of the application is updated accordingly.</p>
+<pre class="prettyprint">
+/* app.nfc.card.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCCard.prototype =
+ {
+ sucTagWriteAttach: function nfc_card_sucTagWriteAttach(tag)
+ {
+ var newMessage = null,
+ fullContact = '';
+
+ try
+ {
+ fullContact = this.nfc.prepareForNFC(localStorage);
+ newMessage = this.nfc.phoneNumber2NDEF(fullContact);
+ if (!tag.isSupportedNDEF)
+ {
+ throw
+ {
+ message: 'This tag doesn\'t support NDEF'
+ };
+ }
+ tag.writeNDEF(newMessage, this.sucSend.bind(this), this.errSend.bind(this));
+ }
+ catch (e)
+ {
+ this.errSend(e);
+ }
+ },
+
+ setTagDetectWrite: function nfc_card_setTagDetectWrite()
+ {
+ var suc =
+ {
+ onattach: this.sucTagWriteAttach.bind(this),
+ ondetach: this.nfc.sucDetach.bind(this.nfc)
+ };
+
+ try
+ {
+ this.nfc.nfcAdapter.unsetTagListener();
+ this.nfc.nfcAdapter.setTagListener(suc);
+ }
+ catch (error)
+ {
+ console.error(error);
+ }
+ }
+ }
+}());
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">App.NFCPeer</span> class provides functionality that allows the application to exchange contacts data between two NFC devices. The details of the functionality are described in the following code snippets.</p>
+<pre class="prettyprint">
+/* app.nfc.peer.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCPeer = function NFCPeer(nfc)
+ {
+ this.nfc = nfc;
+ };
+}());
+</pre>
+<p>When the user clicks the <strong>Communicate with another device</strong> button, the application calls the <span style="font-family: Courier New,Courier,monospace">setTargetDetect()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCPeer</span> class. This method uses <span style="font-family: Courier New,Courier,monospace">setPeerListener()</span> method from the NFC API to define what should be done when the NFC device is placed next to the other NFC device. In this case, the <span style="font-family: Courier New,Courier,monospace">sucTargetAttach()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCPeer</span> class is called. The <span style="font-family: Courier New,Courier,monospace">sucTargetAttach()</span> method takes the <span style="font-family: Courier New,Courier,monospace">NFCPeer</span> type parameter and uses it to call two other methods from the NFC API (<span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> and <span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span>). The <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method takes as parameters the previously prepared message (with contacts data) and two callbacks (in case of success or failure). Depending on the results of the <span style="font-family: Courier New,Courier,monospace">sendNDEF()</span> method, the interface of the application is updated accordingly. The <span style="font-family: Courier New,Courier,monospace">setReceiveNDEFListener()</span> method allows the application to read the message (with contacts data) sent by another device. It takes the <span style="font-family: Courier New,Courier,monospace">readMessage()</span> method from the <span style="font-family: Courier New,Courier,monospace">App.NFCControl</span> class to update application UI (this method was previously mentioned).</p>
+<pre class="prettyprint">
+/* app.nfc.peer.js */
+(function strict()
+{
+ 'use strict';
+
+ App.NFCPeer.prototype =
+ {
+ setReceiveFromTarget: function nfc_peer_setReceiveFromTarget()
+ {
+ try
+ {
+ if (!this.nfc.nfcTarget)
+ {
+ console.warn('app.nfc.nfcTarget not set');
+
+ return;
+ }
+ this.nfc.nfcTarget.unsetReceiveNDEFListener();
+ this.nfc.nfcTarget.setReceiveNDEFListener(
+ this.nfc.readMessage.bind(this.nfc));
+ }
+ catch (error)
+ {
+ console.error('setReceiveFromTarget error: ' + error.message);
+ }
+ },
+
+ sucTargetAttach: function nfc_peer_sucTargetAttach(target)
+ {
+ var newMessage = null,
+ fullContact = this.nfc.prepareForNFC(localStorage);
+ this.nfc.nfcTarget = target;
+ this.setReceiveFromTarget();
+
+ try
+ {
+ newMessage = this.nfc.phoneNumber2NDEF(fullContact);
+ target.sendNDEF(
+ newMessage,
+ this.sucSendToTarget.bind(this),
+ this.errSendToTarget.bind(this));
+ }
+ catch (e)
+ {
+ console.error('NDEFMessage problem: ' + e.message);
+ }
+ },
+
+ setTargetDetect: function nfc_peer_setTargetDetect()
+ {
+ var successCallbacks =
+ {
+ onattach: this.sucTargetAttach.bind(this),
+ ondetach: this.nfc.sucDetach.bind(this.nfc)
+ };
+
+ try
+ {
+ this.nfc.nfcAdapter.unsetPeerListener();
+ this.nfc.nfcAdapter.setPeerListener(successCallbacks);
+ }
+ catch (error)
+ {
+ console.error(error.message);
+ }
+ }
+ }
+}());
+</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
--- /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>DownloadManager Overview</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"/></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/content/download_w.htm">Download Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/content/download_tutorial_w.htm">Download Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>DownloadManager Overview</h1>
+ <p>The DownloadManager sample application demonstrates how you can asynchronously download the content of an URL to the device storage.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm">Download Manager task</a>.</p>
+ <p>The following figure illustrates the main screens of the DownloadManager. </p>
+ <p class="figure">Figure: DownloadManager screens</p>
+ <p align="center"><img alt="DownloadManager screens" src="../images/downloadmanager.png" /> </p>
+ <p>The application opens with the DownloadManager main screen, where the download history is displayed. To download a file, type its URL address in the input field at the top of the screen and click the <strong>OK</strong> button to initiate the process. The new download status item is added with a progress bar and buttons that allow pausing or canceling the process.</p>
+
+<p>When the specified content is downloaded, click the <strong>Open</strong> button to run an external application to view the content, or click the <strong>Remove</strong> button to remove the item from the download history.</p>
+
+<p>To clear the whole download history, click the <strong>Clear all finished</strong> button.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span></td>
+ <td>This file contains the configuration values.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.helpers.js</span></td>
+ <td>This file contains the helper functions, such as code for resolving the file extensions.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the main application code (Controller layer).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file contains calls to the Download API and code directly related to handling the basic operations on the downloaded items (Model layer).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.events.js</span>
+ <p><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.modifiers.js</span></p></td>
+ <td>These files contain code related to the user interface (View layer). The code mainly uses operations on the HTML document. The <span style="font-family: Courier New,Courier,monospace">templateManager</span> class is a part of the UI code, which handles loading and processing the files from the <span style="font-family: Courier New,Courier,monospace">templates</span> directory.
+</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file is a loader; the first Javascript file to be executed. It loads other files and triggers the application initialization.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains the layout for the application screens, and templates for smaller UI components.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+ <p>The download process starts when the user clicks <strong>OK</strong> next to the URL input field on the main screen. The button click indirectly invokes the <span style="font-family: Courier New,Courier,monospace">startDownloading()</span> method, which is responsible for starting the download process. A new <span style="font-family: Courier New,Courier,monospace">DownloadRequest</span> object is created and the download process is started through the <span style="font-family: Courier New,Courier,monospace">DownloadManager</span> object.</p>
+
+ <pre class="prettyprint">
+/* js/app.model.js */
+startDownloading: function Model_startDownloading(url, eventHandlers, onSuccess)
+{
+ var downloadRequest, downloadId;
+
+ try
+ {
+ downloadRequest = new tizen.DownloadRequest(url, 'downloads');
+ downloadId = tizen.download.start(downloadRequest, this.createDownloadCallback(eventHandlers));
+
+ this.onDownloadStarted(onSuccess, downloadId, url);
+ }
+ catch (error)
+ {
+ console.error('Start download error', error);
+ }
+},
+</pre>
+<p>After the download process is started successfully, the download item information is added to the local storage and the application user interface is updated. The <span style="font-family: Courier New,Courier,monospace">startDownloading()</span> method receives the <span style="font-family: Courier New,Courier,monospace">onDownloadStarted()</span> method as a callback.</p>
+<pre class="prettyprint">
+/* js/app.js */
+onDownloadStarted: function App_onDownloadStarted(id, url)
+{
+ var fileName = this.helpers.getSourceName(url);
+
+ this.ui.onDownloadStarted(id, url, fileName);
+},
+</pre>
+
+<p>To pause downloading, the application uses the <span style="font-family: Courier New,Courier,monospace">pauseDownloading()</span> method.</p>
+<pre class="prettyprint">
+/* app.model.js */
+pauseDownloading: function Model_pauseDownloading(downloadId)
+{
+ try
+ {
+ tizen.download.pause(downloadId);
+ }
+ catch (error)
+ {
+ console.error('Pause download error', error);
+ }
+},
+</pre>
+<p>To resume downloading, the application uses the <span style="font-family: Courier New,Courier,monospace">resumeDownloading()</span> method.</p>
+<pre class="prettyprint">
+/* app.model.js */
+resumeDownloading: function Model_resumeDownloading(downloadId, eventHandlers, listenerCallback)
+{
+ tizen.download.resume(downloadId);
+ if (eventHandlers !== null)
+ {
+ tizen.download.setListener(downloadId, this.createDownloadCallback(eventHandlers));
+ listenerCallback(downloadId);
+ }
+},
+</pre>
+<p>To cancel downloading, the application uses the <span style="font-family: Courier New,Courier,monospace">cancelDownloading()</span> method.</p>
+<pre class="prettyprint">
+/* app.model.js */
+cancelDownloading: function Model_cancelDownloading(downloadId)
+{
+ try
+ {
+ tizen.download.cancel(downloadId);
+ }
+ catch (error)
+ {
+ console.error('Cancel download error', error);
+ }
+},
+</pre>
+<p>To launch a specified file, the application uses the <span style="font-family: Courier New,Courier,monospace">launchFile()</span> method.</p>
+<pre class="prettyprint">
+/* app.model.js */
+launchFile: function Model_launchFile(fileName, mime)
+{
+ var service;
+ service = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view',
+ 'file:///opt/usr/media/Downloads/' + fileName, mime, null);
+ try
+ {
+ tizen.application.launchAppControl(service, null, function onLaunchFileSuccess()
+ {
+ console.log('Launch file success');
+ },
+ function onLaunchFileError(error)
+ {
+ console.error('Launch file launchAppControl error: ', error);
+ if (error.type === 'NotFoundError')
+ {
+ alert('There is no suitable application ' + 'to show this content. ' +
+ 'Please install application ' + 'that supports this content.');
+ }
+ });
+ }
+ catch (error)
+ {
+ console.error('Launch file error', error.message);
+ }
+},
+</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
--- /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>EventManager Overview</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"/></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/social/calendar_w.htm">Calendar Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/social/calendar_tutorial_w.htm">Calendar Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>EventManager Overview</h1>
+ <p>The EventManager sample application demonstrates how you can add, edit, and delete calendar events in your application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm">Event Manager task</a>.</p>
+ <p>The following figure illustrates the main screens of the EventManager. </p>
+ <p class="figure">Figure: EventManager screens</p>
+ <p align="center"><img alt="EventManager screens" src="../images/eventmanager.png" /> </p>
+ <p>The application opens with the Event Manager main screen, where all registered calendar events (for specified date) are displayed with detailed info including the event name, start date, and end date. Each list entry has two buttons that allow editing or removing the selected event.</p>
+
+<p>To show events for a specific date, click the date field below application header, select the date and confirm with the <strong>Set</strong> button. The application filters the events and shows the list for the selected date.</p>
+
+<p>To add a new event, click the <strong>New Event</strong> button. Enter the event name, select the event type (period, all day), and select the start and end dates. To set an alarm for the event, click the <strong>Set</strong> button and select the proper time on the <strong>Set alarm</strong> screen. Finally confirm the event data with the <strong>Save</strong> button. </p>
+
+<p>To edit an event, click the Edit icon next to the event entry on the main screen. Apply changes on the <strong>Event details</strong> screen and confirm them by clicking the <strong>Save</strong> button.</p>
+
+<p>To remove an event, click the Remove icon next to the event entry on the main screen.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application stars loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app.js</span></td>
+ <td>This is a starting file from which the JavaScript code stars loading.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/duration.js</span></td>
+ <td>This file contains functions that help with the conversion to and from <span style="font-family: Courier New,Courier,monospace">tizen.TimeDuration</span> object.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/calendar.js</span></td>
+ <td>This file contains functions that help working with the Calendar API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/date.js</span></td>
+ <td>This file contains functions that help working with the Time API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/filter.js</span></td>
+ <td>This file contains functions that help working with the filters.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/alarm.js</span></td>
+ <td>This file contains code that handles interaction with the alarm page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/edit.js</span></td>
+ <td>This file contains code that handles interaction with the edit page.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains code that handles interaction with the main page.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/popup.js</span></td>
+ <td>This file contains code that handles interaction with popups.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains layouts of the application screens and templates for smaller elements of the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+ <p>When the application starts, the calendar instance is retrieved.</p>
+<pre class="prettyprint">
+/* js/models/calendar.js */
+try
+{
+ defaultCalendar = tizen.calendar.getDefaultCalendar('EVENT');
+} catch (error)
+{
+ (...)
+}
+</pre>
+<p>After that, a change listener is registered using the <span style="font-family: Courier New,Courier,monospace">addChangeListener()</span> function.</p>
+
+<pre class="prettyprint">
+/* js/views/main.js */
+changeListener =
+{
+ /* Called when new items are added */
+ onitemsadded: function onItemsAdded()
+ {
+ getEvents();
+ },
+ /* Called when items are updated */
+ onitemsupdated: function onItemsUpdated()
+ {
+ getEvents();
+ },
+ /* Called when items are removed */
+ onitemsremoved: function onItemsRemoved()
+ {
+ getEvents();
+ }
+};
+
+/* js/models/calendar.js */
+/**
+* Adds a callback for the change listener
+* @param {object} changeCallback
+* @returns {number} Listener id
+*/
+function addChangeListener(changeCallback)
+{
+ try
+ {
+ return defaultCalendar.addChangeListener(changeCallback);
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</pre>
+<p>At the start of the application, the <span style="font-family: Courier New,Courier,monospace">getEvents()</span> function is also invoked. It reads the value of the date picker component placed in the header on the main screen. Afterwards the <span style="font-family: Courier New,Courier,monospace">find()</span> function from the calendar is invoked with the proper callback and date filter passed as parameters.</p>
+<pre class="prettyprint">
+/* js/views/main.js */
+/* Retrieves the filtered events from the calendar */
+function getEvents()
+{
+ var eventFilter = document.getElementById('event-filter');
+
+ calendar.find(onEventsFound, filter.getDateFilter(new Date(eventFilter.value)));
+}
+
+/* js/models/calendar.js */
+/**
+* Finds events in the calendar by a given filter
+* @param {function} successCB Called when find returns data
+* @param {tizen.CompositeFilter} filter Filter for returned events
+*/
+function find(successCB, filter)
+{
+ var sortingMode = null;
+ try
+ {
+ sortingMode = new tizen.SortMode('startDate', 'ASC');
+ defaultCalendar.find(successCB, errorCallback, filter, sortingMode);
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</pre>
+
+<p>The filters are very useful in finding events with a specific data. There are simple filters like <span style="font-family: Courier New,Courier,monospace">tizen.AttributeRangeFilter</span>, which is used to find data between two values. A more advanced filter, <span style="font-family: Courier New,Courier,monospace">tizen.CompositeFilter</span>, is used to group multiple filters into one.</p>
+
+<pre class="prettyprint">
+/* js/models/filter.js */
+/**
+* Creates a filter for selecting events on the given day
+* @param {Date} date
+* @return {tizen.CompositeFilter}
+*/
+function getDateFilter(date)
+{
+ try
+ {
+ var beginOfToday = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0),
+ endOfToday = new tizen.TZDate(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999),
+ startsBeforeEndOfToday = new tizen.AttributeRangeFilter('startDate', null, endOfToday),
+ endsAfterBeginOfToday = new tizen.AttributeRangeFilter('endDate', beginOfToday, null);
+
+ return filtersIntersection([startsBeforeEndOfToday, endsAfterBeginOfToday]);
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+
+/**
+* Creates an intersection of filters
+* @param {AbstractFilter[]} arr
+* @returns {tizen.CompositeFilter}
+*/
+function filtersIntersection(arr)
+{
+ try
+ {
+ return new tizen.CompositeFilter('INTERSECTION', arr);
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</pre>
+
+<p>New events can be added to the calendar by clicking the <strong>New Event</strong> button on the main page. This invokes the <span style="font-family: Courier New,Courier,monospace">add()</span> function in the Calendar API. Optionally, an alarm can be set to let you know about the event.</p>
+
+<pre class="prettyprint">
+/* js/models/calendar.js */
+/**
+* Adds new event to default calendar
+* @param {string} summary Event summary
+* @param {boolean} isAllDay Is event all day
+* @param {tizen.TZDate} startDate Event start date
+* @param {tizen.TZDate} endDate Event end date
+* @param {tizen.CalendarAlarm} alarm Event alarm
+* @returns {tizen.CalendarEvent} Created calendar event
+*/
+function add(summary, isAllDay, startDate, endDate, alarm)
+{
+ var item = null;
+ try
+ {
+ item = new tizen.CalendarEvent(
+ {
+ summary: summary,
+ isAllDay: isAllDay,
+ startDate: startDate,
+ endDate: endDate,
+ alarms: [alarm]
+ });
+ defaultCalendar.add(item);
+ return item;
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+
+/**
+* Returns an alarm object for the given time duration
+* @param {tizen.TimeDuration} timeDuration Time duration
+* @returns {tizen.CalendarAlarm} Created alarm
+*/
+function createAlarm(timeDuration)
+{
+ try
+ {
+ return new tizen.CalendarAlarm(timeDuration, 'SOUND');
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</pre>
+
+<p>The events can be also updated by retrieving an instance of the event from the calendar, updating the fields, and invoking the <span style="font-family: Courier New,Courier,monospace">update()</span> method.</p>
+<pre class="prettyprint">
+/* js/models/calendar.js */
+/**
+* Updates the calendar event
+* @param {number} id Id of event to update
+* @param {string} summary Event summary
+* @param {boolean} isAllDay Is event all day
+* @param {tizen.TZDate} startDate Event start date
+* @param {tizen.TZDate} endDate Event end date
+* @param {tizen.CalendarAlarm} alarm Event alarm
+*/
+function update(id, summary, isAllDay, startDate, endDate, alarm)
+{
+ var item = get(id);
+ try
+ {
+ item.summary = summary;
+ item.isAllDay = isAllDay;
+ item.startDate = startDate;
+ item.endDate = endDate;
+ item.alarms = [alarm];
+ defaultCalendar.update(item);
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+
+/**
+* Retrieves an event with the given ID from the calendar
+* @param {number} id Event id
+* @returns {tizen.CalendarEvent} Event retrieved from calendar
+*/
+function get(id)
+{
+ try
+ {
+ return defaultCalendar.get(new tizen.CalendarEventId(id));
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</pre>
+<p>Removing an event from the calendar can be done by simply passing the event ID to the <span style="font-family: Courier New,Courier,monospace">remove()</span> function.</p>
+
+<pre class="prettyprint">
+/* js/models/calendar.js */
+/**
+* Removes an event with the given ID from the calendar.
+* @param {number} id Event id
+*/
+function remove(id)
+{
+ try
+ {
+ defaultCalendar.remove(new tizen.CalendarEventId(id));
+ }
+ catch (error)
+ {
+ (...)
+ }
+}
+</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
--- /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>ExercisePlanner Overview</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"/></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/application/alarm_w.htm">Alarm Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">Alarm API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>ExercisePlanner Overview</h1>
+ <p>The ExercisePlanner sample application demonstrates how you can add or delete alarms in your application. Also it demonstrates how the application can react on those alarms.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the ExercisePlanner.</p>
+ <p class="figure">Figure: ExercisePlanner screens</p>
+ <p align="center"><img alt="ExercisePlanner screens" src="../images/exerciseplanner.png" /> </p>
+ <p> The application opens with the Exercise planner main screen that displays the scheduled exercises.</p>
+ <p>To define a new alarm, click the <strong>Add New Exercise</strong> button on the main screen. For each alarm you can define:</p>
+ <ul>
+ <li>The alarm name</li>
+ <li>The alarm frequency</li>
+ <li>The start time</li>
+ <li>A comment</li>
+ </ul>
+ <p>To activate the alarm, click the <strong>Save</strong> button on the new exercise screen. When the start time of the alarm is reached, the application displays a proper screen with application details where you can select the <strong>Exercises list</strong> to go to the main screen, or <strong>Exit</strong> to close the application.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application stars loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file acts as loader for the application and its dependencies.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file is responsible for application setup and interaction with the Application API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span></td>
+ <td>This file contains the application configuration.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.alarm.js</span></td>
+ <td>This file is responsible for interaction with the Alarm API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file is responsible for the application data storage.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file is responsible for handling the user interface interactions.</td>
+ </tr>
+ <tr>
+ <td><p><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.modifiers.js
+ </span></p></td>
+ <td>These files are responsible for template management.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains layouts of the application screens and templates for smaller elements of the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+
+<p>When the application starts, the application modules are initialized.</p>
+<pre class="prettyprint">
+/* js/app.js */
+this.model = new Model();
+this.ui = new Ui();
+this.model.init(this);
+this.ui.init(this, this.getRequestedAppControlData());
+</pre>
+
+<p>The main screen is shown with the currently active exercises. The exercises are stored in the local storage.</p>
+<pre class="prettyprint">
+/* js/app.model.js */
+var exercises = window.localStorage.getItem('exercises');
+</pre>
+<p>To create an exercise, it is necessary to create an alarm. The ID of the created alarm becomes the exercise ID. After the alarm is created, the local storage is updated.</p>
+<pre class="prettyprint">
+/* js/app.model.js */
+/**
+* Adds a new exercise, saves it in the local storage and sets a new alarm
+* @param {Object} exercise Exercise object
+* @return {Object|undefined} exercise object
+*/
+add: function Model_saveAlarm(exercise)
+{
+ var alarmId = this.alarmHelper.add(exercise);
+
+ if (alarmId)
+ {
+ exercise.id = alarmId;
+
+ /* Add to session storage */
+ this.exercises.push(exercise);
+
+ /* Add to localStorage */
+ this.updateStorage();
+
+ return exercise;
+ }
+}
+
+/* Saves the exercises in the local storage */
+updateStorage: function ()
+{
+ try
+ {
+ window.localStorage.setItem('exercises', JSON.stringify(this.exercises));
+ }
+ catch (e)
+ {
+ (...)
+ }
+}
+</pre>
+
+<p>To add an alarm that would start the application on time, the application ID and the application control URI are needed.</p>
+<pre class="prettyprint">
+/* js/app.js */
+
+APP_CONTROL_OPERATION_URI:'http://tizen.org/appcontrol/operation/exercise'
+
+/**
+* Returns this application ID
+* @return {number} application ID
+*/
+getId: function getId()
+{
+ return tizen.application.getCurrentApplication().appInfo.id;
+}
+
+/* js/app.alarm.js */
+
+/**
+* Creates a new system alarm connected with the exercise
+* @param {Object} exercise
+* @param {string} id of added alarm
+*/
+add: function addAlarm(exercise)
+{
+ var alarm = {}, date, appControl;
+
+ try
+ {
+ /* Change the datetimepicker returned object into Date type object */
+ date = this.datapickerValue2Date(exercise.startTime);
+ /* Create a new Alarm object */
+ alarm = new tizen.AlarmAbsolute(date, exercise.days);
+ /* Create an ApplicationControl object */
+ appControl = new tizen.ApplicationControl(app.APP_CONTROL_OPERATION_URI);
+
+ /* Add a new alarm and connect it with appControl object */
+ tizen.alarm.add(alarm, app.getId(), appControl);
+ }
+ catch (e)
+ {
+ console.error(e);
+ }
+ finally
+ {
+ return alarm.id;
+ }
+}
+</pre>
+<p>The application control data is checked to determine if the application was started by the user or by an alarm previously set up through the application. If the application was started by an alarm, the exercise ID is retrieved and returned.</p>
+<pre class="prettyprint">
+/* js/app.js */
+
+var reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl()
+
+if (reqAppControl)
+{
+ data = reqAppControl.appControl.data;
+ len = data.length - 1;
+
+ while (len >= 0)
+ {
+ if (data[len].key === this.APP_CONTROL_DATA_KEY)
+ {
+ exerciseId = data[len].value[0];
+ break;
+ }
+ len -= 1;
+ }
+
+ return exerciseId;
+}
+</pre>
+<p>For the application control to work, additional data in the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file is necessary.</p>
+<pre class="prettyprint">
+<!--confix.xml-->
+
+<tizen:app-control>
+<tizen:src name="index.html"/>
+<tizen:operation name="http://tizen.org/appcontrol/operation/exercise"/>
+>/tizen:app-control<
+</pre>
+<p>To remove an alarm, its ID is required.</p>
+<pre class="prettyprint">
+/* js/app.alarm.js */
+
+/**
+* Removes the system alarm connected to the exercise
+* @param {Object} exercise
+* @return {boolean} returns result of operation
+*/
+remove: function removeAlarm(exercise)
+{
+ try
+ {
+ tizen.alarm.remove(exercise.id);
+ }
+ catch (e)
+ {
+ console.error(e);
+
+ return false;
+ }
+
+ return 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>
\ 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>FileManager Overview</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"/></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/input_output/filesystem_w.htm">Filesystem Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/input_output/filesystem_tutorial_w.htm">Filesystem Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>FileManager Overview</h1>
+ <p>The FileManager sample application demonstrates how you can manage the files stored on the device.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm">File Manager task</a>.</p>
+ <p>The following figure illustrates the main screens of the FileManager. </p>
+ <p class="figure">Figure: FileManager screens</p>
+ <p align="center"><img alt="FileManager screens" src="../images/filemanager.png" /> </p>
+ <p>The application opens with the main screen that shows a list of the folders stored on your device. To open a folder or a file, click it on the list view.</p>
+ <p>To edit the content of the current folder, click the <strong>EDIT</strong> button. To see more options, for example, to create new folder or to paste to the current folder, click the <strong>MORE</strong> button.</p>
+ <p>To return to the parent folder or the start list of folders, click the <strong>Up</strong> or <strong>Home</strong> buttons, respectively. To close the application, click the <strong>EXIT</strong> button.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for starting the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file contains the code related to the Web Device API data.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file contains the code related to user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.config.js</span></td>
+ <td>This is the application configuration file.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.helpers.js</span></td>
+ <td>This file contains helpers used in the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.clipboard.js</span></td>
+ <td>This file contains methods for clipboard feature.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.systemIO.js</span></td>
+ <td>This file contains a set of helpers for the Filesystem API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.templateManager.js</span></td>
+ <td>This file contains the template manager class.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains layouts of the application screens and templates for smaller elements of the user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Implementation</h2>
+<p>To get the storage details, the application uses the <span style="font-family: Courier New,Courier,monospace">getStorages()</span> method. The success callback receives the array of <span style="font-family: Courier New,Courier,monospace">FileSystemStorage</span> objects containing the storage details as an input parameter.</p>
+
+<pre class="prettyprint">
+/* app.systemIO.js */
+getStorages: function SystemIO_getStorages(type, onSuccess, excluded)
+{
+ try
+ {
+ tizen.filesystem.listStorages(function success(storages)
+ {
+ var tmp = [],
+ len = storages.length,
+ i;
+
+ if (type !== undefined)
+ {
+ for (i = 0; i < len; i += 1)
+ {
+ if (storages[i].label !== excluded)
+ {
+ if (storages[i].type === 0 || storages[i].type === type)
+ {
+ tmp.push(storages[i]);
+ }
+ }
+ }
+ }
+ else
+ {
+ tmp = storages;
+ }
+
+ if (typeof onSuccess === 'function')
+ {
+ onSuccess(tmp);
+ }
+ });
+ }
+ catch (e)
+ {
+ console.error('SystemIO_getStorages error:' + e.message);
+ }
+},
+</pre>
+
+<p>To access a specific file or directory within the file system, the application uses the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> method.</p>
+<pre class="prettyprint">
+/* app.systemIO.js */
+openDir: function SystemIO_openDir(directoryPath, onSuccess, onError, openMode)
+{
+ openMode = openMode || 'rw';
+ onSuccess = onSuccess || function noop()
+ {
+ return;
+ };
+
+ try
+ {
+ tizen.filesystem.resolve(directoryPath, onSuccess, onError, openMode);
+ }
+ catch (e)
+ {
+ console.error(e.message);
+ }
+},
+</pre>
+
+<p>To retrieve a list of all the files and their directories located in a specified directory, the application uses the <span style="font-family: Courier New,Courier,monospace">listFiles()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> object.</p>
+<pre class="prettyprint">
+/* app.systemIO.js */
+getFilesList: function SystemIO_getFilesList(dir, onSuccess)
+{
+ try
+ {
+ dir.listFiles(
+ function success(files)
+ {
+ var tmp = [],
+ len = files.length,
+ i;
+
+ for (i = 0; i < len; i += 1)
+ {
+ tmp.push(
+ {
+ name: files[i].name,
+ isDirectory: files[i].isDirectory
+ });
+ }
+
+ if (typeof onSuccess === 'function')
+ {
+ onSuccess(tmp);
+ }
+ },
+ function error(e)
+ {
+ console.error('SystemIO_getFilesList dir.listFiles() error:', e);
+ });
+ }
+ catch (e)
+ {
+ console.error('SystemIO_getFilesList error:', e.message);
+ }
+}
+</pre>
+<p>To create a file in the specified location, the application uses the <span style="font-family: Courier New,Courier,monospace">createFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> object.</p>
+<pre class="prettyprint">
+/* app.systemIO.js */
+createFile: function SystemIO_createFile(directoryHandle, fileName)
+{
+ try
+ {
+ return directoryHandle.createFile(fileName);
+ }
+ catch (e)
+ {
+ console.error('SystemIO_createFile error:' + e.message);
+
+ return false;
+ }
+},
+</pre>
+
+<p>To create a directory within the file system, the application uses the <span style="font-family: Courier New,Courier,monospace">createDir()</span> method. The directory is created relative to the current directory where the operation is performed.</p>
+<pre class="prettyprint">
+/* app.js */
+createDir: function App_createDir(dirName, callback)
+{
+ var status = true;
+ if (this.currentDirPath !== '')
+ {
+ try
+ {
+ this.currentDirHandle.createDirectory(dirName);
+ }
+ catch (e)
+ {
+ status = false;
+ app.ui.alertPopup(e.message, callback);
+ }
+ this.refreshCurrentPage();
+ }
+ else
+ {
+ status = false;
+ app.ui.alertPopup('You can\'t create new nodes in the main view');
+ }
+
+ return status;
+},
+</pre>
+<p>To delete a file, the application uses the <span style="font-family: Courier New,Courier,monospace">deleteFile()</span> method of the <span style="font-family: Courier New,Courier,monospace">File</span> object.</p>
+<pre class="prettyprint">
+/* app.systemIO.js */
+deleteFile: function SystemIO_deleteFile(dir, filePath, onDeleteSuccess, onDeleteError)
+{
+ try
+ {
+ dir.deleteFile(filePath, onDeleteSuccess, onDeleteError);
+ }
+ catch (e)
+ {
+ console.error('SystemIO_deleteFile error: ' + e.message);
+
+ return false;
+ }
+},
+</pre>
+<p>To delete a directory, the application uses the <span style="font-family: Courier New,Courier,monospace">deleteDir()</span> method. The second parameter of the <span style="font-family: Courier New,Courier,monospace">deleteDirectory()</span> method defines whether the deletion is performed recursively for the sub-directories as well. If the parameter is set to <span style="font-family: Courier New,Courier,monospace">false</span>, the directory is deleted only if it is empty.</p>
+<pre class="prettyprint">
+/* app.systemIO.js */
+deleteDir: function SystemIO_deleteDir(dir, dirPath, onDeleteSuccess, onDeleteError)
+{
+ try
+ {
+ dir.deleteDirectory(dirPath, false, onDeleteSuccess, onDeleteError);
+ }
+ catch (e)
+ {
+ console.error('SystemIO_deleteDir error:' + e.message);
+
+ return false;
+ }
+
+ return 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>
\ 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>HelloTizen Sample Overview</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"/></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/w3c/device/touch_w.htm">Touch Events version 1 Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>HelloTizen Sample Overview</h1>
+ <p>The HelloTizen sample application demonstrates how you can show text on the screen and receive touch events.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the HelloTizen.</p>
+ <p class="figure">Figure: HelloTizen screen</p>
+ <p align="center"><img alt="HelloTizen screen" src="../images/hellotizen_mw.png" /> </p>
+ <p>The application opens with the main screen that shows the <strong>Hello Tizen</strong> text.</p>
+ <p>You can change the text by touching the screen.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project, including the source files, in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ </tbody>
+ </table>
+ <h2>Implementation</h2>
+ <p>The following code adds a click event listener. When a click event occurs, the <strong>Hello Tizen</strong> text changes into the <strong>Hi Gear</strong> text.</p>
+<pre class="prettyprint">
+textbox.addEventListener('click', function()
+{
+ var box = document.getElementById('content_text');
+ if (box.innerHTML === 'Hello Tizen')
+ {
+ box.innerHTML = "Hi WebApp";
+ }
+ else
+ {
+ box.innerHTML = "Hello Tizen";
+ }
+});
+</pre>
+<p>The following code adds a hardware event listener. When the back button is pressed, the application is terminated.</p>
+<pre class="prettyprint">
+document.addEventListener('tizenhwkey', function(e)
+{
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (ignore) {}
+ }
+});
+</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>HybridWebApp Overview</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"/></p>
+ </div>
+
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a target="_blank" href="http://www.w3.org/TR/2011/CR-websockets-20111208/">WebSocket</a></li>
+ <li><a target="_blank" href="http://api.jquery.com/">jQuery Library</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messageport.html">Message Port API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>HybridWebApp Overview</h1>
+ <p>The Hybrid Web App illustrates the communication between the applications installed on the device.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the HybridWebApp.</p>
+ <p class="figure">Figure: HybridWebApp screen</p>
+ <p align="center"><img alt="HybridWebApp screen" src="../images/hybridwebapp_sd.png" /> </p>
+ <p>The application has only one screen. The screen consists of a log list and the <strong>START</strong>, <strong>STOP</strong>, and <strong>CLEAR</strong> buttons. The <strong>START</strong> button invokes the initialization of the communication and sending the start message to the service. The <strong>STOP</strong> button invokes sending the exit message to the service and finishing the communication. The <strong>CLEAR</strong> button clears the log list.</p>
+
+ <h2>Prerequisites</h2>
+ <ul>
+ <li><p>A target with Hybrid Service Sample Application installed.</p></li>
+ </ul>
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/config.js</span></td>
+ <td>This file contains the initial configuration of the UI framework executed when the application is being initialized.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The scenario of the communication between the client Web application and the service application is as follows:</p>
+<ol>
+<li>When user taps the <strong>START</strong> button:
+<ol type="a">
+<li>Client sends the connect message.</li>
+<li>Service sends back the welcome message.</li>
+<li>Client sends the start message.</li>
+<li>Service sends back the started message.</li>
+</ol></li>
+<li>When user taps the <strong>STOP</strong> button:
+<ol type="a">
+<li>Client sends the stop message.</li>
+<li>Service sends back the stopped message.</li>
+<li>Client sends the exit message.</li>
+<li>Service sends back the exit message.</li>
+</ol></li></ol>
+
+<p>The implemented functions use some constant strings, so define them at the start:</p>
+<pre class="prettyprint">
+var gServiceAppId = 'org.tizen.hybridefl',
+gServicePortName = 'SAMPLE_PORT',
+gLocalMessagePortName = 'SAMPLE_PORT_REPLY';
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">gServiceAppId</span> constant is the ID of the service application. The <span style="font-family: Courier New,Courier,monospace">gServicePortName</span> constant is the name of the remote message port used by the service. The <span style="font-family: Courier New,Courier,monospace">gLocalMessagePortName</span> constant is the name of the message port used by the Web application.</p>
+<p>The following function is called when the <strong>START</strong> button is pressed.</p>
+<pre class="prettyprint">
+function start()
+{
+ 'use strict';
+ try
+ {
+ tizen.application.getAppsContext(onGetAppsContextSuccess, onGetAppsContextError);
+ }
+ catch (exc)
+ {
+ (...)
+ }
+}
+</pre>
+<p>This function calls the <span style="font-family: Courier New,Courier,monospace">tizen.application.getAppsContext()</span> function in order to obtain contexts of all apps running on the device and pass them to the specified callback.</p>
+
+<p>The callback checks whether the service application is launched. If it is running, the <span style="font-family: Courier New,Courier,monospace">startMessagePort()</span> function is called. Otherwise the <span style="font-family: Courier New,Courier,monospace">launchServiceApp()</span> function is executed.</p>
+<p>To check whether the service is running, function checks whether any application context of the specified array has an <span style="font-family: Courier New,Courier,monospace">appId</span> equal to the <span style="font-family: Courier New,Courier,monospace">gServiceAppId</span> variable. The service launches if the values match.
+</p>
+<pre class="prettyprint">
+function onGetAppsContextSuccess(contexts)
+{
+ 'use strict';
+ var i, appInfo;
+ for (i = 0; i < contexts.length; i = i + 1)
+ {
+ try
+ {
+ appInfo = tizen.application.getAppInfo(contexts[i].appId);
+ }
+ catch (exc)
+ {
+ (...)
+ }
+
+ if (appInfo.id === gServiceAppId)
+ {
+ console.log('Running Service App found');
+ break;
+ }
+ }
+ if (i >= contexts.length)
+ {
+ console.log('Running Service App not found. Trying to launch it');
+ launchServiceApp();
+ }
+ else
+ {
+ startMessagePort();
+ }
+}
+</pre>
+<p>The following function launches the service by calling the <span style="font-family: Courier New,Courier,monospace">tizen.application.launch()(</span> function with ID of the service and callbacks passed as input parameters:</p>
+<pre class="prettyprint">
+function launchServiceApp()
+{
+ 'use strict';
+ function onSuccess()
+ {
+ start();
+ }
+
+ function onError(err)
+ {
+ (...)
+ }
+
+ try
+ {
+ tizen.application.launch(gServiceAppId, onSuccess, onError);
+ }
+ catch (exc)
+ {
+ (...)
+ }
+}
+</pre>
+<p>When the operation is finished successfully, the <span style="font-family: Courier New,Courier,monospace">onSuccess</span> callback executes the start function again. This time the <span style="font-family: Courier New,Courier,monospace">startMessagePort()</span> function is executed by the <span style="font-family: Courier New,Courier,monospace">onGetAppsContextSuccess()</span> function because the service is launched.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">startMessagePort()</span> function:</p>
+<ol>
+<li>Creates local message port by calling the <span style="font-family: Courier New,Courier,monospace">tizen.messageport.requestLocalMessagePort()</span> function.</li>
+<li>Registers a listener function on the port. The function calls the <span style="font-family: Courier New,Courier,monospace">onReceive()</span> function discussed further.</li>
+<li>Calls the <span style="font-family: Courier New,Courier,monospace">tizen.messageport.requestRemoteMessagePort()</span> function to obtain reference to the remote message port created by the service.</li>
+<li>Sends the connect command to the service by calling the <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> function.</li>
+</ol>
+
+<pre class="prettyprint">
+function startMessagePort()
+{
+ 'use strict';
+ try
+ {
+ gLocalMessagePort = tizen.messageport.requestLocalMessagePort(gLocalMessagePortName);
+ gLocalMessagePortWatchId = gLocalMessagePort
+ .addMessagePortListener(function onDataReceive(data, remote)
+ {
+ onReceive(data, remote);
+ });
+ }
+ catch (e)
+ {
+ (...)
+ }
+
+ try
+ {
+ gRemoteMessagePort = tizen.messageport
+ .requestRemoteMessagePort(gServiceAppId, gServicePortName);
+ }
+ catch (e)
+ {
+ (...)
+ }
+
+ sendCommand('connect');
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">sendCommand()</span> function sends a message to the service using the remote message port. The message is a JSON object in the following form:</p>
+<pre class="prettyprint">
+{
+ key: 'command',
+ value: value
+}
+</pre>
+<p>The value field is a name of the command.</p>
+
+<pre class="prettyprint">
+function sendCommand(command)
+{
+ 'use strict';
+
+ gRemoteMessagePort.sendMessage([{ key: 'command', value: command }], gLocalMessagePort);
+}
+</pre>
+<p>When the <strong>STOP</strong> button is clicked, the following function is called:</p>
+<pre class="prettyprint">
+function onStopBtnTap()
+{
+ sendCommand('stop');
+}
+</pre>
+<p>This function sends the stop command to the service.</p>
+
+<p>The application receives messages from the service by the following function:</p>
+<pre class="prettyprint">
+function onReceive(data)
+{
+ 'use strict';
+ var message, i;
+
+ for (i in data)
+ {
+ if (data.hasOwnProperty(i) && data[i].key === 'server')
+ {
+ message = data[i].value;
+ }
+ }
+ if (message === 'WELCOME')
+ {
+ sendCommand('start');
+ }
+ else if (message === 'stopped')
+ {
+ sendCommand('exit');
+ }
+ else if (message === 'exit')
+ {
+ gLocalMessagePort
+ .removeMessagePortListener(gLocalMessagePortWatchId);
+ }
+}
+</pre>
+<p>The function above checks the received message and sends the suitable commands to fulfill the scenario described in the beginning of the chapter.</p>
+<p>After receiving the exit message from the server, the local message port is closed by calling the <span style="font-family: Courier New,Courier,monospace">removeMessagePortListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">gLocalMessagePort</span> object.</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>MediaContent Overview</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"/></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/content/content_w.htm">Content Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/content/content_tutorial_w.htm">Content Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>MediaContent Overview</h1>
+ <p>The MediaContent sample application demonstrates how content information can be retrieved from the Web Device API.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm">Media Content task</a>.</p>
+ <p>The following figure illustrates the screens of the MediaContent application.</p>
+ <p class="figure">Figure: MediaContent screens</p>
+ <p align="center"><img alt="MediaContent screens" src="../images/content_sd.png" /> </p>
+ <p>The application opens with the screen where you can choose the type of storage to check. After choosing the storage, you can choose the type of files to be retrieved. To view the details of the file, click the file name.</p>
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for the main application module used for initialization and application methods.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the code of main logic of the application. This module uses <span style="font-family: Courier New,Courier,monospace">app.model</span> and <span style="font-family: Courier New,Courier,monospace">app.ui</span>.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.model.js</span></td>
+ <td>This file contains the code for the access to API and data management.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.js</span></td>
+ <td>This file contains the code of the view logic.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.ui.template.js</span></td>
+ <td>This file contains the code of the template module.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Implementation</h2>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains the specified privileges for reading from and writing to the Content API.</p>
+
+<pre class="prettyprint">
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets"
+ <tizen:privilege name="http://tizen.org/privilege/content.read" />
+ <tizen:privilege name="http://tizen.org/privilege/content.write" />
+</widget>
+</pre>
+
+<p>To get all folders from the API, use the <span style="font-family: Courier New,Courier,monospace">getDirectories()</span> method from the <span style="font-family: Courier New,Courier,monospace">tizen.content</span> object.</p>
+<pre class="prettyprint">
+getFolders: function getFolders(successCallback, errorCallback)
+{
+ try
+ {
+ tizen.content.getDirectories(successCallback, errorCallback);
+ }
+ catch (exc)
+ {
+ console.warn('getLocalMediaSource exc:' + exc.message);
+ }
+},
+</pre>
+
+<p>The following function requests for the content with a specific filter and sorted by the <span style="font-family: Courier New,Courier,monospace">tizen.SortMode</span> object.</p>
+<pre class="prettyprint">
+getFolderItems: function getFolderItems(folderId, mediaType, folders, findItemsSuccess, findItemsError)
+{
+ if (mediaType !== 'ALL')
+ {
+ filter = new tizen.AttributeFilter('type', 'EXACTLY', mediaType);
+ }
+ try
+ {
+ tizen.content.find(success, findItemsError, folder, filter, new tizen.SortMode('title', 'ASC'));
+ }
+ catch (exc)
+ {
+ console.warn('tizen.content.find exception: ' + exc.message);
+ }
+},
+</pre>
+<p>To set the storage change listener, use the <span style="font-family: Courier New,Courier,monospace">addPropertyValueChangeListener()</span> method from the <span style="font-family: Courier New,Courier,monospace">tizen.systeminfo</span> object.</p>
+<pre class="prettyprint">
+addStorageChangeListener: function addChangeListener(changeListener)
+{
+ try
+ {
+ tizen.systeminfo.addPropertyValueChangeListener('STORAGE', changeListener);
+ }
+ catch (error)
+ {
+ console.error('Add storage change listener error: ' + error.message);
+ }
+},
+</pre>
+<p>To set the content change listener, use <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method from the <span style="font-family: Courier New,Courier,monospace">tizen.content</span> object.</p>
+<pre class="prettyprint">
+addContentChangeListener: function addContentChangeListener(changeListener)
+{
+ try
+ {
+ tizen.content.setChangeListener(
+ {
+ oncontentadded: changeListener,
+ oncontentremoved: changeListener
+ });
+ }
+ catch (error)
+ {
+ console.error('Add content change listener error: ' + error.message);
+ }
+}
+</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
--- /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>MoneyBook Sample Overview</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"/></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/w3c/storage/websql_w.htm">Web SQL Database Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>MoneyBook Sample Overview</h1>
+ <p>The MoneyBook sample application demonstrates how you can save and load data in a database storage.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the MoneyBook.</p>
+ <p class="figure">Figure: MoneyBook screens</p>
+ <p align="center"><img alt="MoneyBook screens" src="../images/moneybook_mw.png" /></p>
+
+ <p>The application opens with the main screen. You can access the result (all added records) and input screens using the buttons in the footer.</p>
+
+<p>To add a record:</p>
+<ol><li>Go to the input screen.</li>
+<li><p>Enter the name and price of the item to the textbox, and click <strong>Submit</strong>.</p></li></ol>
+
+<p>To remove a record, press the ID number (the first field) of the record you want to remove on the result screen. To remove all records, click <strong>Clear</strong>.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application stars loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+ <p>When the application starts, it attempts to open the database using the Web SQL Database API:</p>
+ <pre class="prettyprint">
+function openDB()
+{
+ if (window.openDatabase)
+ {
+ db = openDatabase(DB_NAME, DB_VERSION, DB_DISPLAY_NAME, DB_SIZE, function()
+ {
+ onSuccess(
+ {
+ message: "Database Creation Complete"
+ });
+ });
+ }
+ else
+ {
+ onError(
+ {
+ message: "Web SQL not supported"
+ });
+ }
+}
+</pre>
+
+<p>After the database is opened, the application creates a table to the database if none exists:</p>
+
+ <pre class="prettyprint">
+function createTable(db)
+{
+ db.transaction(function(t)
+ {
+ t.executeSql("CREATE TABLE if not exists " + DB_TABLE_NAME +
+ " (id INTEGER PRIMARY KEY, item TEXT, price INTEGER, insertDay DATETIME)", []);
+ });
+}
+</pre>
+
+<p>To get data from the database, use the <span style="font-family: Courier New,Courier,monospace">SELECT</span> SQL query:</p>
+<pre class="prettyprint">
+function loadDataView(db)
+{
+ db.transaction(function(t)
+ {
+ t.executeSql("SELECT * FROM " + DB_TABLE_NAME, [], function(t, r)
+ {
+ var resultBuffer = [],
+ i;
+
+ for (i = 0; i < r.rows.length; i++)
+ {
+ var rowBuffer =
+ {
+ id: 0,
+ item: "",
+ price: 0,
+ insertDay: ""
+ };
+
+ rowBuffer.id = r.rows.item(i).id || 0;
+ rowBuffer.item = r.rows.item(i).item || "";
+ rowBuffer.price = r.rows.item(i).price || 0;
+ rowBuffer.insertDay = r.rows.item(i).insertDay || "";
+
+ resultBuffer.push(rowBuffer);
+ }
+
+ showDataView(resultBuffer);
+ });
+ });
+}
+</pre>
+
+<p>To insert and delete data, use the <span style="font-family: Courier New,Courier,monospace">INSERT</span> and <span style="font-family: Courier New,Courier,monospace">DELETE</span> SQL queries:</p>
+
+<pre class="prettyprint">
+/* Insert a data to the table */
+function insertData(db, data)
+{
+ db.transaction(function(t)
+ {
+ var dayString;
+
+ dayString = getDateTime();
+ t.executeSql("INSERT INTO " + DB_TABLE_NAME +
+ " (item, price, insertDay) VALUES (?, ?, ?)", [data.item, data.price, dayString]);
+ });
+}
+
+/* Delete a data from the table */
+function deleteData(db, data)
+{
+ db.transaction(function(t)
+ {
+ t.executeSql("DELETE FROM " + DB_TABLE_NAME + " WHERE id = ?", [data.id]);
+ });
+}
+</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>Multi-project Hybrid Application</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"/></p>
+ </div>
+
+<h1>Multi-project Hybrid Application</h1>
+ <p>A multi-project hybrid application package consists of both Web and native applications, which are combined into one package. The multi-project hybrid package allows you to install multiple applications at the same time, which is useful if your application requires other specific applications to be installed on the device.</p>
+ <p>The Tizen SDK contains sample applications that demonstrate how you can communicate between a Web and native service application: </p>
+ <ul>
+ <li><a href="hybridwebapp_mw.htm">HybridWebApp</a></li>
+ <li><a href="../mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</a></li>
+ </ul>
+ <p>To create and run a multi-project hybrid application package:</p>
+ <ol>
+ <li>Create the application package. <p>For more information about packaging, see <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#multi">Developing Multiple Projects as a Combined Package</a>.</p></li>
+ <li>Build and run the main application. <p>For more information about Web applications, see <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#build">Building the Application</a> and <a href="../../../org.tizen.gettingstarted/html/web/process/app_dev_process_w.htm#run">Running and Debugging the Application</a>.</p> <p>For more information about native applications, see <a href="../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#build">Building the Application</a> and <a href="../../../org.tizen.gettingstarted/html/native/process/app_dev_process_n.htm#debugging">Running and Debugging 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>
\ 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>Piano Overview</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"/></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/w3c/media/video_audio_w.htm">HTML5 video and audio element Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/w3c/media/video_audio_tutorial_w.htm">HTML5 video and audio element Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Piano Overview</h1>
+ <p>The Piano sample application demonstrates how you can create a piano application using the W3C Audio API. </p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm">Piano task</a>.</p>
+ <p>The following figure illustrates the main screen of the Piano.</p>
+ <p class="figure">Figure: Piano screen</p>
+ <p align="center"><img alt="Piano screen" src="../images/piano.png" /> </p>
+ <p> The application opens with the main screen, where you can see the piano keyboard. Click the keys to hear the sound. </p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the playing functionality of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">sounds/</span></td>
+ <td>This directory contains sounds used by the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Implementation</h2>
+
+ <p>The Piano sample application defines the <span style="font-family: Courier New,Courier,monospace">Piano</span> class that is used after the application starts.</p>
+<pre class="prettyprint">
+/* main.js */
+var piano;
+
+function Piano()
+{
+ 'use strict';
+
+ return;
+}
+
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+}());
+
+piano = new Piano();
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace">DOMContentLoaded</span> event occurs, the <span style="font-family: Courier New,Courier,monospace">init()</span> method of the <span style="font-family: Courier New,Courier,monospace">Piano</span> object is called. It is responsible for application initialization and calls three other methods of Piano object: <span style="font-family: Courier New,Courier,monospace">cacheImages()</span>, <span style="font-family: Courier New,Courier,monospace">bindEvents()</span>, and <span style="font-family: Courier New,Courier,monospace">audioInit()</span>.</p>
+
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype.init = function init()
+ {
+ this.cacheImages();
+ this.bindEvents();
+ this.audioInit();
+ };
+}());
+
+document.addEventListener('DOMContentLoaded', function onDocumentReady()
+{
+ 'use strict';
+ piano.init();
+});
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">cacheImages()</span> method loads all of the images that are used in the application to the browser memory. It prevents flickering during the first display of each image.</p>
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype =
+ {
+ /**
+ * Cache for pressed white piano key image.
+ * @type HTMLImageElement
+ */
+ whiteCache: null,
+ /**
+ * Cache for pressed black piano key image.
+ * @type HTMLImageElement
+ */
+ blackCache: null
+ };
+
+ Piano.prototype.cacheImages = function cacheImages()
+ {
+ this.whiteCache = new Image();
+ this.whiteCache.src = 'images/white_pressed.png';
+ this.blackCache = new Image();
+ this.blackCache.src = 'images/black_pressed.png';
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">audioInit()</span> function initializes array of HTML audio elements, and defines its names and audio source files. Each HTML audio element corresponds to a specified piano keyboard key and is assigned to its own audio source file. The audio files are located in <span style="font-family: Courier New,Courier,monospace">sounds</span> folder of the application project.</p>
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype =
+ {
+ /**
+ * Audio tags for keys.
+ * @type Array
+ */
+ audio: [],
+ };
+
+ Piano.prototype.audioInit = function audioInit()
+ {
+ var i;
+ for (i = 0; i <= 13; i += 1)
+ {
+ this.audio[i] = document.createElement('audio');
+ this.audio[i].name = i;
+ this.audio[i].src = 'sounds/' + this.audio[i].name + '.wav';
+ }
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">bindEvents()</span> method binds all UI events used in application to its handler functions. In order to play sounds, the application uses handlers, which correspond to touch events such as <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>.</p>
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype.bindEvents = function bindEvents()
+ {
+ var keys = document.getElementsByTagName('body')[0]; /* Keys container */
+
+ keys.addEventListener('touchstart', this.onPianoKeyTouchDown.bind(this));
+
+ keys.addEventListener('touchmove', this.onPianoKeyTouchDown.bind(this));
+
+ keys.addEventListener('touchend', this.onPianoKeyTouchUp.bind(this));
+
+ window.addEventListener('tizenhwkey', function onTizenHwKey(e)
+ {
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (err)
+ {
+ console.log('Error: ', err);
+ }
+ }
+ });
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">onPianoKeyTouchDown()</span> method handles the <span style="font-family: Courier New,Courier,monospace">touchstart</span> and <span style="font-family: Courier New,Courier,monospace">touchmove</span> events on keys of the piano keyboard. It iterates through the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> array supplied with the event object. For each touch element it checks whether the selected UI element is already touched. For this purpose it uses the global <span style="font-family: Courier New,Courier,monospace">touchPianoKey</span> array that stores information about touched key and corresponded touch identifier. As a result, the sound is played at first touch on the selected key of the piano keyboard. In such case the <span style="font-family: Courier New,Courier,monospace">touchPianoKey</span> array is updated and the selected keyboard key changes appearance to pressed (pressed CSS class added to the UI element). There is also the <span style="font-family: Courier New,Courier,monospace">releaseKey()</span> method that is called with some timeout. This method changes the appearance of the keyboard key to released, if there is no information about this key in the <span style="font-family: Courier New,Courier,monospace">touchPianoKey</span> array. In this case, the <span style="font-family: Courier New,Courier,monospace">releaseKey()</span> method is useful when the <span style="font-family: Courier New,Courier,monospace">touchmove</span> event occurs and it is necessary to change the appearance of the previously touched key while touch moving through the keyboard keys.</p>
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype =
+ {
+ /**
+ * Maps multitouch fingers to piano keys.
+ * @type Array
+ */
+ touchPianoKey: [],
+ };
+
+ Piano.prototype.onPianoKeyTouchDown = function onPianoKeyTouchDown(eventData)
+ {
+ eventData.preventDefault();
+ var touch,
+ element,
+ len = eventData.changedTouches.length,
+ i,
+ lastKeyId;
+
+ for (i = 0; i < len; i += 1)
+ {
+ /* Find multitouch finger touch event */
+ touch = eventData.changedTouches[i];
+ /* Find piano key under this finger */
+ element = document.elementFromPoint(touch.clientX, touch.clientY);
+
+ if (element && this.touchPianoKey[touch.identifier] !== element.id)
+ {
+ /* Add/modify mapping for multitouch finger identifier to the piano key */
+ lastKeyId = this.touchPianoKey[touch.identifier];
+ this.touchPianoKey[touch.identifier] = element.id;
+ /* Release the last key under this finger */
+ setTimeout(this.releaseKey.bind(this, lastKeyId), 10);
+ /* Play audio file for this piano key */
+ this.playAudio(element.id.substr(3));
+ /* Change key's state to pressed */
+ element.classList.add('pressed');
+ }
+ }
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">playAudio()</span> method plays sound for given audio ID. For this purpose it uses the previously initialized array of audio tags.</p>
+
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype.playAudio = function playAudio(audioId)
+ {
+ var audio = this.audio[audioId];
+ if (audio)
+ {
+ if (audio.currentTime !== 0)
+ {
+ audio.currentTime = 0;
+ }
+ if (audio.paused)
+ {
+ audio.play();
+ }
+ }
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">releaseKey()</span> method checks whether the information about keyboard key with given ID is not inside the <span style="font-family: Courier New,Courier,monospace">touchPianoKey</span> array. In such case, the appearance of the key is changed to released.</p>
+
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype.releaseKey = function releaseKey(keyId)
+ {
+ /* Change key's state to normal */
+ var stillPressed = false,
+ len = this.touchPianoKey.length,
+ i;
+
+ if (keyId === undefined)
+ {
+ return;
+ }
+
+ /* Check for every multitouch event fingers */
+ for (i = 0; i < len; i += 1)
+ {
+ if (this.touchPianoKey[i] === keyId)
+ {
+ /* This piano key is still pressed with another finger */
+ stillPressed = true;
+ break;
+ }
+ }
+ /* If key is no longer pressed, change its state to normal */
+ if (!stillPressed)
+ {
+ document.getElementById(keyId).classList.remove('pressed');
+ }
+ };
+}());
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">onPianoKeyTouchUp()</span> method handles the <span style="font-family: Courier New,Courier,monospace">touchend</span> event on the keys of the piano keyboard. It iterates through the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> array supplied with the event object. For each touch element it removes the information about the key and corresponded touch from the <span style="font-family: Courier New,Courier,monospace">touchPianoKey</span> array. At the end the <span style="font-family: Courier New,Courier,monospace">releaseKey()</span> method is called to change the appearance of the released key.</p>
+
+<pre class="prettyprint">
+/* main.js */
+/* Definition of the Piano class */
+(function strict()
+{
+ 'use strict';
+
+ Piano.prototype.onPianoKeyTouchUp = function onPianoKeyTouchUp(eventData)
+ {
+ var touchId,
+ keyId,
+ len = eventData.changedTouches.length,
+ i;
+ for (i = 0; i < len; i += 1)
+ {
+ /* Find multitouch finger touch event identifier */
+ touchId = eventData.changedTouches[i].identifier;
+ /* Find piano key that was pressed */
+ keyId = this.touchPianoKey[touchId];
+ /* Remove mapping for multitouch finger identifier to the piano key */
+ this.touchPianoKey[touchId] = undefined;
+ /* Release the piano key */
+ setTimeout(this.releaseKey.bind(this, keyId), 10);
+ }
+ };
+}());
+</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
--- /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>Mobile Web Sample Descriptions</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"/></p>
+ </div>
+ <h1>Mobile Web Sample Descriptions</h1>
+
+ <p>To access general information about the mobile sample functionality and the content of the sample source files, click the sample name in the following table.</p>
+ <table border="1">
+ <caption>
+ Table: Mobile Web samples in the SDK
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="appcalleecaller_mw.htm">AppCaller and AppCallee</a></td>
+ <td>Demonstrates how you can use the application control to call other applications based on the operation type using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="archivemanager_mw.htm">ArchiveManager</a></td>
+ <td>Demonstrates how you can create, browse, and manage archive file using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/archive.html">Archive</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="bluetoothchat_mw.htm">BluetoothChat</a></td>
+ <td>Demonstrates how you can create a chat application with a Bluetooth connection for sending messages using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html">Bluetooth</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="calculator_mw.htm">Calculator</a></td>
+ <td>Demonstrates how you can create a calculator with basic mathematical operations using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application API</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="calendar_mw.htm">Calendar</a></td>
+ <td>Demonstrates how you can create a calendar displaying the month using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="calllog_mw.htm">CallLog</a></td>
+ <td>Demonstrates how you can view the detailed call history of the device or a specific caller using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/callhistory.html">Callhistory</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/social/task_calllog_w.htm">Task: Call Log</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="chatter_mw.htm">Chatter</a></td>
+ <td>Demonstrates how you can send and receive text messages between devices using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/messaging.html">Messaging</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_chatter_w.htm">Task: Chatter</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="compass_mw.htm">Compass</a></td>
+ <td>Demonstrates how you can monitor the device orientation using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#orientation">DeviceOrientation Event Specification</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_compass_w.htm">Task: Compass</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="contactlist_mw.htm">ContactList</a></td>
+ <td>Demonstrates how you can get contact data from the device using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="contactsexchanger_mw.htm">ContactsExchanger</a></td>
+ <td>Demonstrates how you can share contact card details between 2 NFC (near field communication) devices or with an NFC tag using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/nfc.html">NFC</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/communication/task_contactsexchanger_w.htm">Task: Contacts Exchanger</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="downloadmanager_mw.htm">DownloadManager</a></td>
+ <td>Demonstrates how you can asynchronously download URL content to the device storage using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/download.html">Download</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/task_downloadmanager_w.htm">Task: Download Manager</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="eventmanager_mw.htm">EventManager</a></td>
+ <td>Demonstrates how you can add, edit, and delete calendar events using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/calendar.html">Calendar</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/time.html">Time</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/social/task_eventmanager_w.htm">Task: Event Manager</a>.</p> </td>
+ </tr>
+ <tr>
+ <td><a href="exerciseplanner_mw.htm">ExercisePlanner</a></td>
+ <td>Demonstrates how you can create a plan of your exercise regime with daily reminders using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/alarm.html">Alarm</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/application.html">Application</a> API</li>
+ </ul> </td>
+ </tr>
+ <tr>
+ <td><a href="filemanager_mw.htm">FileManager</a></td>
+ <td>Demonstrates how you can access the files stored on the device using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/filesystem.html">Filesystem</a> API</li>
+ </ul><p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/input_output/task_filemanager_w.htm">Task: File Manager</a>.</p> </td>
+ </tr>
+ <tr>
+ <td><a href="hellotizen_mw.htm">HelloTizen</a></td>
+ <td>Demonstrates how you can receive hardware key events and display text on the screen using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="mediacontent_mw.htm">MediaContent</a></td>
+ <td>Demonstrates how you can retrieve information about media files from internal and external memories and update the metadata of the files using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/content.html">Content</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/content/task_mediacontent_w.htm">Task: Media Content</a>.</p> </td>
+ </tr>
+ <tr>
+ <td><a href="moneybook_mw.htm">MoneyBook</a></td>
+ <td>Demonstrates how you can save and load data in a database storage using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#sql">Web SQL Database</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="piano_mw.htm">Piano</a></td>
+ <td>Demonstrates how you can create a piano application using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/task_piano_w.htm">Task: Piano</a>.</p> </td>
+ </tr>
+ <tr>
+ <td><a href="selfcamera_mw.htm">SelfCamera</a></td>
+ <td>Demonstrates how you can use the front camera in your application using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm">Task: Self Camera</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="sensorball_mw.htm">SensorBall</a></td>
+ <td>Demonstrates how you can control the movement of a ball on the screen using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/sensor.html">Sensor</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm">Task: Sensor Ball</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="systeminfo_mw.htm">Systeminfo</a></td>
+ <td>Demonstrates how you can retrieve system-related information and display it in your application using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">Package</a> API</li>
+ </ul><p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm">Task: System Information</a>.</p> </td>
+ </tr>
+ <tr>
+ <td><a href="winset_mw.htm">TizenWinset</a></td>
+ <td>Demonstrates how you can use Tizen Advanced UI (TAU) UI components using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a> Reference</li>
+ </ul>
+ <p>This sample is also explained in the <a href="../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/widget_reference.htm">UI Component Reference</a>.</p></td>
+ </tr>
+<tr>
+ <td><a href="touchpaint_mw.htm">TouchPaint</a></td>
+ <td>Demonstrates how you can create a simple paint application through touch events and the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm">Task: Touch Paint</a>.</p></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Multi-project Hybrid Applications</h2>
+ <p>Tizen provides multi-project application execution that allows multiple applications to execute together. You can execute Web and native service applications together as multi-project hybrid applications.</p>
+ <table border="1">
+ <caption>
+ Table: Multi-project application samples in the SDK
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="multiprocess_hybrid_package_mw.htm">Multi-project hybrid application</a></td>
+ <td>Demonstrates how you can communicate between a Web and native service application:
+ <ul>
+ <li><a href="hybridwebapp_mw.htm">HybridWebApp</a></li>
+ <li><a href="../mobile_n/hybridservice_sd_mn.htm">HybridServiceApp</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>
\ 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>SelfCamera Overview</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"/></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/w3c/media/getusermedia_w.htm">getUserMedia Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/w3c/media/getusermedia_tutorial_w.htm">getUserMedia Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#getusermedia">getUserMedia API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#audio">HTML5 audio element API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#video">HTML5 video element API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SelfCamera Overview</h1>
+ <p>The SelfCamera sample application demonstrates how you can use the front camera in your application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/media/task_selfcamera_w.htm">Self Camera task</a>.</p>
+ <p>The following figure illustrates the main screen of the SelfCamera application. </p>
+ <p class="figure">Figure: SelfCamera screen</p>
+ <p align="center"><img alt="SelfCamera screen" src="../images/selfcamera.png" /> </p>
+ <p>The application opens with a screen that shows the front camera. To set the timer for 2, 5, or 10 seconds, click a timer option on top of the screen. To take a photo, click on the shutter button.</p>
+ <h2>Source Files</h2>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.systemIO.js</span> <p><span style="font-family: Courier New,Courier,monospace">js/main.js</span></p></td>
+ <td>These files contain the code for handling the camera functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+<h2>Implementation</h2>
+<p>To use the camera:</p>
+<ol>
+<li>
+<p>Add the required privileges.</p>
+<p>To use the camera, the application has to request permissions by adding the corresponding privileges to the <span style="font-family: Courier New,Courier,monospace">config.xml</span> file. In this case, the <span style="font-family: Courier New,Courier,monospace">application.launch</span> privilege is also added to allow other applications to launch.</p>
+<pre class="prettyprint"><tizen:privilege name="http://tizen.org/privilege/application.launch" />
+<tizen:privilege name="http://tizen.org/privilege/filesystem.read" />
+<tizen:privilege name="http://tizen.org/privilege/filesystem.write" />
+<tizen:privilege name="http://tizen.org/privilege/content.read" />
+<tizen:privilege name="http://tizen.org/privilege/content.write" />
+<tizen:privilege name="http://tizen.org/privilege/mediacapture" />
+</pre>
+</li>
+<li><p>Create the layout for the camera preview.</p>
+<pre class="prettyprint"><body>
+
+ <div id="camera"></div>
+
+ <div id="countdown"></div>
+
+ <div class="timers">
+ <div id="timer2"></div>
+ <div id="timer5"></div>
+ <div id="timer10"></div>
+ </div>
+
+ <div id="thumbnail">
+ <div id="upImage"></div>
+ </div>
+
+ <div id="shutter-container">
+ <div id="shutter"></div>
+ </div>
+
+ <div id="bar"></div>
+
+ <div id="failure">Failed to take photo!</div>
+
+</body>
+</pre></li>
+<li><p>Initialize the camera.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">startPreview()</span> function obtains the media stream and passes it to the <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess</span> callback.</p>
+<pre class="prettyprint">
+SelfCamera.prototype.startPreview = function startPreview()
+{
+ /* Declare what media is used by this application */
+ var options =
+ {
+ audio: true,
+ video: true
+ };
+
+ navigator.getUserMedia = navigator.getUserMedia ||
+ navigator.webkitGetUserMedia;
+ try
+ {
+ if (typeof (navigator.getUserMedia) === 'function')
+ {
+ /* Ask the user to grant permissions to use media objects */
+ navigator.getUserMedia(options,this.onCaptureVideoSuccess.bind(this),
+ this.onCaptureVideoError.bind(this));
+ }
+ }
+ catch (e)
+ {
+ alert('navigator.getUserMedia() error.');
+ console.error('navigator.getUserMedia() error: ' + e.message);
+ }
+};
+</pre></li>
+<li><p>Start the preview.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> function creates a video element and sets the media stream URL as its source. The media stream URL is passed to the <span style="font-family: Courier New,Courier,monospace">createVideoElement()</span> function as a parameter.</p>
+<pre class="prettyprint">
+SelfCamera.prototype.createVideoElement = function createVideoElement(src)
+{
+ this.video = $('<video/>',
+ {
+ autoplay: 'autoplay',
+ id: 'video',
+ style: 'height:' + $(window).height() + 'px',
+ src: src
+ })
+ .appendTo('#camera').get(0);
+
+ this.video.play();
+};
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">onCaptureVideoSuccess()</span> function gets a media stream element and creates an URL of this stream. Next the video element is created with the URL as a source. Finally the video element is played.</p>
+<p>This function is a callback used in the <span style="font-family: Courier New,Courier,monospace">startPreview()</span> function in the previous step.</p>
+<pre class="prettyprint">SelfCamera.prototype.onCaptureVideoSuccess = function onCaptureVideoSuccess(stream)
+{
+ var urlStream;
+ /* Create the stream */
+ urlStream = window.webkitURL.createObjectURL(stream);
+ this.createVideoElement(urlStream);
+};
+</pre></li>
+<li><p>Capture the photo.</p>
+<p>The camera stream is drawn in the canvas element.
+</p><pre class="prettyprint">var img = document.createElement('canvas');</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">captureImage()</span> function draws an image from the HTML video element on the canvas.</p>
+<pre class="prettyprint">
+SelfCamera.prototype.captureImage = function captureImage(video)
+{
+ var sourceWidth = window.innerWidth,
+ sourceHeight = window.innerHeight,
+ sourceX = (sourceWidth - $(video).width()) / 2,
+ sourceY = (sourceHeight - $(video).height()) / 2;
+
+ img.width = sourceWidth;
+ img.height = sourceHeight;
+
+ /* Crop image to viewport dimension */
+ img.getContext('2d').drawImage(video, sourceX, sourceY,
+ $(video).width(), $(video).height());
+
+};
+</pre></li>
+<li><p>Open the photo in an external application.</p>
+<p>To open the created and saved photo in an external application, call the <span style="font-family: Courier New,Courier,monospace">tizen.application.launchAppControl()</span> function. It takes the <span style="font-family: Courier New,Courier,monospace">tizen.ApplicationControl</span> object and success and error callbacks as input parameters. The following function opens the image file in an external application.
+</p><pre class="prettyprint">SelfCamera.prototype.showPhotoPreview = function showPhotoPreview(file)
+{
+ var service, onReply, self = this;
+
+ /* Configure service */
+ service = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/view', file);
+ onReply =
+ {
+ onsuccess: function noop() { return; },
+ onfailure: function noop() { return; }
+ };
+
+ try
+ {
+ /* Try to launch service */
+ tizen.application.launchAppControl(service, null, function launchPhotoSuccess()
+ {
+ (...)
+ },
+ function launchPhotoError()
+ {
+ (...)
+ },
+ onReply);
+ }
+ catch (exc)
+ {
+ alert('Exception: ' + exc.message);
+ }
+}
+</pre></li>
+</ol>
+
+<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../scripts/showhide.js"></script>
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+ <script type="text/javascript" src="../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+
+ <title>SensorBall Overview</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"/></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/system/sensor_w.htm">Sensor Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/system/sensor_tutorial_w.htm">Sensor Tutorial</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>SensorBall Overview</h1>
+ <p>Sensor Ball is an application that simulates behavior of the ball in three different environments.</p>
+ <p>The application reads the accelerometer values of the device and changes the position of the ball to simulate inertia and gravity forces. The user can impact the movement of the ball by changing the orientation of the device.</p>
+
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_sensorball_w.htm">Sensor Ball task</a>.</p>
+ <p>The following figure illustrates the main screen of the SensorBall.</p>
+ <p class="figure">Figure: SensorBall screen</p>
+ <p align="center"><img alt="SensorBall screen" src="../images/sensorball.png" /> </p>
+
+ <p>The main page of the application contains the scene and three buttons at the bottom. The buttons allow switching between the following environments: gravity, sky, and space.</p>
+ <ul>
+ <li><p>The gravity environment simulates a ball in indoor conditions. The movement of the ball is affected by gravity. The screenshot on the left presents the scene with this environment.</p></li>
+ <li><p>The sky environment simulates a balloon in the sky. The balloon is filled with gas lighter than air, so it slowly moves up. The screenshot in the middle presents the scene.</p></li>
+ <li><p>The space environment simulates a planet in space. Sun and Earth are placed on the scene and Earth orbits the sun as shown in the screenshot on the right.</p>
+ </li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This file contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This file contains the core library.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/ball.js</span></td>
+ <td>This file is the model of the ball. It contains position and speed of the ball.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/gravity.js</span></td>
+ <td>This file is the model of the gravity. It performs calculations for the ball and the gravity.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/space.js</span></td>
+ <td>This file is the model of space. It performs calculations for the planet in space.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/sky.js</span></td>
+ <td>This file is the model of the sky. It performs calculations for the balloon in the sky.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This file contains the code to render the elements of the scene and handle the UI events.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines an initialization module.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ </tbody>
+ </table>
+<h2>Implementation</h2>
+<p>The following functions demonstrate adding a <span style="font-family: Courier New,Courier,monospace">devicemotion</span> event listener and handling the event. </p>
+<pre class="prettyprint">/* views/main.js */
+function bindEvents()
+{
+ window.addEventListener('tizenhwkey', onHardwareKeysTap);
+ window.addEventListener('devicemotion', onDeviceMotion);
+ document.addEventListener('webkitvisibilitychange', onVisibilityChange);
+
+ $('#' + GRAVITY_BUTTON_ID).on('tap', function onBallTap()
+ {
+ startGravity();
+ });
+
+ $('#' + SKY_BUTTON_ID).on('tap', function onSkyTap()
+ {
+ startSky();
+ });
+
+ $('#' + SPACE_BUTTON_ID).on('tap', function onSpaceTap()
+ {
+ startSpace();
+ });
+}
+</pre>
+<p>The following function sets the motion data to the given event value.</p>
+<pre class="prettyprint">/* models/ball.js */
+function setMotionData(event)
+{
+ motionData = event;
+}
+</pre>
+<p>The following function calculates the velocity of the ball based on the motion data.</p>
+<pre class="prettyprint">/* models/gravity.js */
+function calculateGravityBallPosition()
+ {
+ var x = 0,
+ y = 0,
+ ddx = 0,
+ ddy = 0;
+
+ if (motionData !== null)
+ {
+ x = -motionData.accelerationIncludingGravity.x;
+ y = -motionData.accelerationIncludingGravity.y;
+ }
+ ddx = x * -cdd;
+ ddy = y * cdd;
+ dX += ddx;
+ dY += ddy;
+ dX *= resistance;
+ dY *= resistance;
+ ballX += dX;
+ ballY += dY;
+}
+</pre>
+<p>The following function calculates the position of the Sun in the space mode based on the data received from the motion sensor.</p>
+<pre class="prettyprint">/* models/space.js */
+function getSunPosition()
+{
+ var result = {},
+
+ x = -motionData.accelerationIncludingGravity.x,
+ y = -motionData.accelerationIncludingGravity.y,
+
+ rX = -8.0,
+ rY = -8.0,
+
+ cX = (gameWidth - sunWidth) / 2,
+ cY = (gameHeight - sunHeight) / 2,
+
+ tX = cX + (-x * rX),
+ tY = cY + (y * rY),
+
+ bdX = tX - sunX,
+ bdY = tY - sunY,
+
+ br = 0.2;
+
+ sunX += bdX * br;
+ sunY += bdY * br;
+
+ result.x = sunX;
+ result.y = sunY;
+
+ return result;
+}
+</pre>
+<p>The following function calculates the position of the background in the space mode based on the data received from the motion sensor.</p>
+<pre class="prettyprint">/* models/space.js */
+function getBackgroundPosition()
+{
+ var result = {},
+
+ x = -motionData.accelerationIncludingGravity.x,
+ y = -motionData.accelerationIncludingGravity.y,
+
+ rX = -30.0,
+ rY = -30.0,
+
+ cX = (gameWidth - backgroundWidth) / 2,
+ cY = (gameHeight - backgroundHeight) / 2,
+
+ tX = cX + (-x * rX),
+ tY = cY + (y * rY),
+
+ bdX = tX - backgroundLeft,
+ bdY = tY - backgroundTop,
+
+ br = 0.2;
+
+ backgroundLeft += bdX * br;
+ backgroundTop += bdY * br;
+
+ result.left = backgroundLeft;
+ result.top = backgroundTop;
+
+ return result;
+}
+</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
--- /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>Systeminfo Overview</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"/></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/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/tizen/system/system_info_tutorial_w.htm">System Information Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/mobile/tizen/package.html">Package API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Systeminfo Overview</h1>
+ <p>The SystemInfo sample application demonstrates how system-related information can be retrieved using Web Device API.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/tizen/system/task_systeminfo_w.htm">System Information task</a>.</p>
+ <p>The following figure illustrates the main screen and example details of the Systeminfo.</p>
+ <p class="figure">Figure: Systeminfo screens</p>
+ <p align="center"><img alt="Systeminfo screens" src="../images/systeminfo_sd.png" /> </p>
+ <p>The application opens with the main screen that displays a list of system information items. To see the details of a specific item, click on the item.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the application icon.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/capabilities.js</span></td>
+ <td>This file contains helpers for handling device capability information.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/parser.js</span></td>
+ <td>This file contains helpers for handling system information data, such as battery, CPU, device orientation, display, storage, and packages information.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/systemInfo.js</span></td>
+ <td>This file contains methods that handle the System Information and Package API data.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains the code related to application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the application initializer.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+ <p>To see detailed information about system property, click on the item. For example:</p>
+<pre class="prettyprint">/* views/main.js */
+batteryButton.addEventListener('click', function onBatteryButton()
+{
+ systemInfo.getSystemProperty('BATTERY', onBatteryInfo);
+ plId = systemInfo.addPropertyListener('BATTERY', onBatteryInfo);
+});
+</pre>
+<p>The information received is parsed and displayed on the new property detail page.</p>
+<pre class="prettyprint">/* view/main.js */
+function onBatteryInfo(battery)
+{
+ var data = parser.parseBatteryInfo(battery);
+
+ displayPage('details', 'Battery', data);
+}
+</pre>
+<p>The following function requests for information on installed packages.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function getPackagesInfo(onSuccess)
+{
+ try
+ {
+ tizen.package.getPackagesInfo(onSuccess);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+<p>The following function requests for the package details.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function getPackageDetails(packageId, onSuccess)
+{
+ try
+ {
+ onSuccess(tizen.package.getPackageInfo(packageId));
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+<p>The following function requests for the system property value.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function getSystemProperty(property, onSuccess)
+{
+ try
+ {
+ tizen.systeminfo.getPropertyValue(property, onSuccess, onError);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+<p>The following function adds the property value change listener.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function addPropertyListener(property, onChange)
+{
+ try
+ {
+ return tizen.systeminfo
+ .addPropertyValueChangeListener(property, onChange);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+<p>The following function removes the current property value change listener.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function removePropertyListener(listenerId)
+{
+ try
+ {
+ tizen.systeminfo.removePropertyValueChangeListener(listenerId);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+}
+</pre>
+<p>The following function requests for the device capability value.</p>
+<p>The function argument is a special key, such as <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/camera.back</span> or <span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/network.bluetooth</span>. For a list of the available keys and their meaning, see the device capability keys.</p>
+<pre class="prettyprint">/* models/systemInfo.js */
+function getCapability(capability)
+{
+ var isSupported = false;
+
+ try
+ {
+ isSupported = tizen.systeminfo.getCapability(capability);
+ }
+ catch (error)
+ {
+ onError(error);
+ }
+
+ return isSupported;
+}
+</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
--- /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>TouchPaint Overview</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"/></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/w3c/device/touch_w.htm">Touch Events version 1 Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm">Touch Events version 1 Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#touch">Touch Events version 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>TouchPaint Overview</h1>
+ <p>The TouchPaint sample application demonstrates how you can create a simple paint application using the touch events and a <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_touch_paint_mw.htm">Touch Paint task</a>.</p>
+ <p>The following figure illustrates the main screen of TouchPaint.</p>
+ <p class="figure">Figure: TouchPaint screens</p>
+ <p align="center"><img alt="TouchPaint screen" src="../images/touchpaint_sd.png" /> </p>
+ <p>The application opens with the main screen where you can see the canvas. You can draw on the canvas with your finger.</p>
+ <p>To change the color or line width of your drawing, use the <strong>Color</strong> and <strong>Line width</strong> controls. To clear the canvas, click the <strong>Clear</strong> button.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the playing functionality of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method, which is called when the whole DOM content is loaded, initializes the application. At this point the canvas size is calculated and the event listeners for all UI elements used in the application are defined.</p>
+ <pre class="prettyprint">/* main.js */
+var canvas = null,
+context = null,
+content = null,
+drawPath = {},
+strokeColor = '',
+strokeWidth = 5;
+
+function init()
+{
+ var strokeColorSel = document.querySelector('.color-input'),
+ strokeWidthSel = document.querySelector('.range-input'),
+ clearBtn = document.querySelector('.clear-input');
+
+ content = document.querySelector('.content');
+ canvas = document.querySelector('.canvas');
+ context = canvas.getContext('2d');
+
+ /* Canvas size setting */
+ canvas.width = content.clientWidth;
+ canvas.height = content.clientHeight;
+
+ /* Touch events handler */
+ canvas.addEventListener('touchstart', touchStartHandler, false);
+ canvas.addEventListener('touchend', touchEndHandler, false);
+ canvas.addEventListener('touchmove', touchMoveHandler, false);
+
+ /* Apply eventHandler */
+ strokeColorSel.addEventListener('change', changeStrokeColor, false);
+ strokeWidthSel.addEventListener('change', changeStrokeWidth, false);
+ clearBtn.addEventListener('click', clearCanvas, false);
+
+ /* Add eventListener for tizenhwkey */
+ window.addEventListener('tizenhwkey', function onTizenHwKey(e)
+ {
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (err)
+ {
+ console.error('Error: ', err);
+ }
+ }
+ });
+}
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered, the <span style="font-family: Courier New,Courier,monospace">touchStartHandler()</span> method is called. It uses the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> array event property to obtain access to the data of the current touch object. From the application point of view, the most important data are the touch coordinates stored as <span style="font-family: Courier New,Courier,monospace">pageX</span> and <span style="font-family: Courier New,Courier,monospace">pageY</span> properties of the touch object. The current touch is saved to the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object, which is an associative array indexed with the <span style="font-family: Courier New,Courier,monospace">identifier</span> parameter of the current touch. The stored touch parameters are used to draw the start point when drawing a line. They are also used by the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> method to obtain the start point while drawing line. The application draws the start point using the methods provided by the canvas context. The <span style="font-family: Courier New,Courier,monospace">fillStyle</span> parameter allows setting the color for drawing.</p>
+<p> The <span style="font-family: Courier New,Courier,monospace">beginPath()</span> method begins drawing the path. The <span style="font-family: Courier New,Courier,monospace">arc()</span> method allows drawing points and circles with the given radius (<span style="font-family: Courier New,Courier,monospace">strokeWidth / 2</span>) at the location specified by the given touch coordinates. The <span style="font-family: Courier New,Courier,monospace">closePath()</span> method creates a path from the current point back to the starting point. The <span style="font-family: Courier New,Courier,monospace">fill()</span> method fills the current drawing with the previously set color.</p>
+
+<pre class="prettyprint">
+/* main.js */
+function touchStartHandler(e)
+{
+ var touch = e.changedTouches[0];
+
+ drawPath[touch.identifier] = touch;
+
+ context.fillStyle = strokeColor;
+ context.beginPath();
+ context.arc(drawPath[touch.identifier].pageX - content.offsetLeft,
+ drawPath[touch.identifier].pageY - content.offsetTop,
+ strokeWidth / 2, 0, Math.PI * 2, true);
+ context.closePath();
+ context.fill();
+}
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is triggered, the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> method is called. At the beginning it sets up the canvas context parameters. The <span style="font-family: Courier New,Courier,monospace">linewidth</span> parameter allows setting the width of the drawing line. The <span style="font-family: Courier New,Courier,monospace">lineJoin</span> parameter with its value set to <span style="font-family: Courier New,Courier,monospace">round</span> allows rounding the corners when the two lines meet. In the next steps the <span style="font-family: Courier New,Courier,monospace">touchHanderMethod()</span> method iterates through the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> event property and checks whether the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object contains an attribute equal to the identifier of the iterated touch. If the condition is true it means that iterated touch is still active (the finger still touches the screen) and the <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> method can continue drawing. The application uses the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method of the canvas context to set up the start point coordinates of drawing line. It uses the last saved coordinates of the iterated touch.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method of the canvas context adds a new point to create a line. It uses the current coordinates of the iterated touch.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">stroke()</span> method of the canvas context draws a line using the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> and <span style="font-family: Courier New,Courier,monospace">lineTo()</span> methods.</p>
+<p>At the end the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object parameters are updated in order to store the current touch coordinates for the next <span style="font-family: Courier New,Courier,monospace">touchMoveHandler()</span> method call.</p>
+<pre class="prettyprint">/* main.js */
+function touchMoveHandler(e)
+{
+ var touches = e.changedTouches,
+ touchesLength = touches.length,
+ currentDrawPath = null,
+ i = 0;
+
+ context.lineWidth = strokeWidth;
+ context.strokeStyle = strokeColor;
+ context.lineJoin = 'round';
+
+ for (i = 0; i < touchesLength; i += 1)
+ {
+ currentDrawPath = drawPath[touches[i].identifier];
+ if (currentDrawPath !== undefined)
+ {
+ context.beginPath();
+ context.moveTo(currentDrawPath.pageX - content.offsetLeft, currentDrawPath.pageY - content.offsetTop);
+ context.lineTo(touches[i].pageX - content.offsetLeft, touches[i].pageY - content.offsetTop);
+ context.closePath();
+ context.stroke();
+
+ drawPath[touches[i].identifier] = touches[i];
+ }
+ }
+ e.preventDefault();
+}
+</pre>
+<p>When the <span style="font-family: Courier New,Courier,monospace">touchend</span> event is triggered, the <span style="font-family: Courier New,Courier,monospace">touchEndHandler()</span> method is called. This method updates the <span style="font-family: Courier New,Courier,monospace">drawPath</span> object to remove the information about the touch that no longer exists.</p>
+<pre class="prettyprint">/* main.js */
+function touchEndHandler(e)
+{
+ var touch = e.changedTouches[0];
+
+ delete drawPath[touch.identifier];
+}
+</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>TizenWinset Overview</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"/></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/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>TizenWinset Overview</h1>
+ <p>The TizenWinset sample application demonstrates how you can use TAU UI components.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the TizenWinset. </p>
+ <p class="figure">Figure: TizenWinset screen</p>
+ <p align="center"><img alt="TizenWinset screen" src="../images/winsets.png"/> </p>
+ <p>The application opens with the main screen, which shows a list of the available UI components. Click a list item to choose the UI component you want to see: </p>
+ <ul>
+ <li><strong>Autodividers</strong>: You can view the list autodividers applied.</li>
+ <li><strong>Buttons</strong>: You can view various button components.</li>
+ <li><strong>Checkbox</strong>: You can view various checkbox and radio components.</li>
+ <li><strong>Collapsible</strong>: You can view a list than can be collapsed.</li>
+ <li><strong>Controlgroup</strong>: You can view various content controlgroup components.</li>
+ <li><strong>Datetimepicker</strong>: You can view various time picker components.</li>
+ <li><strong>Drawer</strong>: You can view a drawer component as a hidden menu.</li>
+ <li><strong>Fast Scroll</strong>: You can view a fast scroll component in a list.</li>
+ <li><strong>Flip Toggle Switch</strong>: You can view various toggle switch components.</li>
+ <li><strong>Gallery</strong>: You can view a gallery component.</li>
+ <li><strong>List Divider</strong>: You can view various list dividers applied.</li>
+ <li><strong>Listview</strong>: You can view various lists.</li>
+ <li><strong>Multimedia View</strong>: You can view multimedia with standard HTML elements.</li>
+ <li><strong>Navigation Bar</strong>: You can view a navigation bar that supports page navigation.</li>
+ <li><strong>Notification</strong>: You can view various notification components.</li>
+ <li><strong>Popup</strong>: You can view various pop-up menus.</li>
+ <li><strong>Progress</strong>: You can view progress components.</li>
+ <li><strong>Progressbar</strong>: You can view various progress bar components.</li>
+ <li><strong>Scroll Handler</strong>: You can view scroll button looks like handle.</li>
+ <li><strong>Search Bar</strong>: You can view various search filter bar components.</li>
+ <li><strong>Select Menu</strong>: You can view various select menus to select an option.</li>
+ <li><strong>Slider</strong>: You can view various slider components.</li>
+ <li><strong>Swipe</strong>: You can view swipe components.</li>
+ <li><strong>Tab Bar</strong>: You can view various tabbar components.</li>
+ <li><strong>Token text area</strong>: You can view various token text components.</li>
+ </ul>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">src/index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">src/widgets/</span> </td>
+ <td>This directory contains the HTML and JavaScript files for each UI component example.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">src/tips/</span> </td>
+ <td>This directory contains the HTML and JavaScript files for programming tips.</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
+$(document).ready(function(){
+ $('#contents table').each(function(){
+ if (!$(this).parent().hasClass('table')) {
+ $(this).wrap('<div class="table"></div>');
+ }
+ });
+
+ // Lnb Menu Initialize
+ if($('div#contents').find('.lnb').length){
+ if($("ul li.events_news").size() > 0) {
+ $("ul.lnb").after("<p class=\"mt20\"><a href=\"/wearables\" target=\"_blank\"><img src=\"http://img-developer.samsung.com/images/common/img_sw_banner.gif\" alt=\"Samsung Wearables\"></a></p>");
+ }
+ initLnb();
+ initScript(staticURL + "/js/fixednavbar.js", function(){});
+ }
+
+ //family site
+ if($('div#footer').find('dl#familySlider').length){
+ fn_rollToEx('familySlider', 'sliderBanner', 1, true);
+ }
+
+ // Svn Commit Test
+
+ // Language Selection
+ if($('div#header').find('.util').length){
+ var $lang = $('div#header').find('.util');
+ $lang.find('a.lang').toggle(function(){
+ $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif')).next('ul.language').show();
+ },function(){
+ $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif')).next('ul.language').hide();
+ });
+
+ $lang.bind('mouseleave',function(){
+ $(this).find('ul.language').hide();
+ $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+ });
+
+ $lang.find('ul.language').children().last().on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which == 9) {
+ e.preventDefault();
+ $lang.find('ul.language').hide();
+ $lang.find('a.lang').css('background-image', $lang.find('a.lang').css('background-image').replace('_.gif','.gif'));
+ setTimeout(function() {
+ $("#searchTop").focus();
+ }, 1);
+ }
+ });
+ }
+
+ // Open the Sitemap
+ var $open = $('div#header').find('.bt-open');
+ $open.bind('click',function(){
+ var $self = $(this);
+ var $sitemap = $('div#wrapper').find('div#sitemap');
+ //var source = $sitemap.is(':visible') ? $self.css('background-image').replace('_.gif','.gif') : $self.css('background-image').replace('.gif','_.gif');
+
+ if($sitemap.is(':visible')){
+ var source = $self.css('background-image').replace('_.gif','.gif');
+ //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #e4e4e4');
+
+ $self.attr('title','open sitemap');
+ }else{
+ var source = $self.css('background-image').replace('.gif','_.gif');
+ //if($('body#main').length) $('#header .util').css('border-bottom','3px solid #114196');
+
+ $self.attr('title','close sitemap');
+ }
+
+ $self.css('background-image',source);
+ $sitemap.slideToggle('fast');
+
+ $sitemap.find('ul').filter(':last').children().filter(':last').focusout(function(){
+ var source = $self.css('background-image').replace('_.gif','.gif');
+ $self.css('background-image',source);
+ $sitemap.slideToggle('fast');
+ });
+
+ });
+
+ // Search Auto Complete
+ var $search = $('div#header').find('fieldset.search');
+ var $searchList = $search.find('#topAutocomplete>ul');
+
+ if($search.length){
+ $search.find('> input').each(function(){
+ $(this).bind({
+ keydown : function(e){
+
+ if(e.type=='keydown'&& $(this).val().length!=0){
+ $search.find('#topAutocomplete').show();
+ var hei = $searchList.outerHeight();
+ if(hei>400){
+ $searchList.css({'height':'400px','overflow-y':'auto'});
+ }
+ }
+ if(e.keyCode==9){
+ $search.unbind('focusout.search');
+ }
+ if(e.keyCode==40){
+ $search.find('#topAutocomplete>ul').children(':first').find('a').focus();
+ //window.scrollTo(0,0);
+ }
+ },
+ focusin : function(e){
+ if($(this).val()==='Search'){
+ $(this).val('');
+ }
+ },
+ focusout : function(e){
+ if($(this).val().length==0) $(this).val('Search');
+ }
+ });
+ });
+
+ //$('#topAutocomplete>ul').children().find('a').bind('focusin',function(e){
+ // if(e.keyCode==40){
+ // $(this).parent().next().css('border','1px solid red').find('a').focus();
+ // }
+ //});
+
+ $search.find('#topAutocomplete').bind('mouseleave',function(e){
+ if($search.find('> input').val().length==0){
+ $search.find('> input').val('Search');
+ }
+ $search.find('#topAutocomplete').hide();
+ });
+
+ $search.find('#topAutocomplete>ul').children().last().focusout(function(){
+ $search.find('> input').val('Search');
+ $search.find('#topAutocomplete').hide();
+
+ //$search.bind('focusout.search', function(){
+ // $(this).find('> input').val('Search');
+ // $(this).find('#topAutocomplete').hide();
+ //});
+ });
+ }
+});
+
+// 비차단 동적 스크립트 로딩
+function initScript(url, callback){
+ var script = document.createElement("script");
+ script.type = "text/javascript";
+
+ if(script.readyState){ // 인터넷 익스플로러
+ script.onreadystatechange = function(){
+ if(script.readyState=="loaded" || script.readyState=="complete"){
+ script.onreadystatechange = null;
+ callback();
+ }
+ };
+ }else{ // 다른 브라우저
+ script.onload = function(){
+ callback();
+ };
+ }
+
+ script.src = url;
+ document.getElementsByTagName("head")[0].appendChild(script);
+}
+
+
+// lnb
+function initLnb(){
+ var sMenu = $('.lnb');
+ var sItem = sMenu.find('>li');
+
+ sItem.each(function(){
+ if($(this).find('a').hasClass('more')){
+ if($(this).find('ul').is(":visible")) {
+ $('<button type="button" class="ico-arr">close submenu</button>').insertAfter($(this).find('a').eq(0));
+ } else {
+ $('<button type="button" class="ico-arr">open submenu</button>').insertAfter($(this).find('a').eq(0));
+ }
+ }
+ });
+
+ var setIcoArrText = function(obj) {
+ if(obj.next().is(":visible")) {
+ obj.text("close submenu");
+ } else {
+ obj.text("open submenu");
+ }
+ }
+
+ sItem.find('.ico-arr').on("click", function() {
+ var $that = $(this);
+ var liBox = $that.parent();
+ var ulBox = $that.next();
+
+ sItem.not(liBox).not(".on").find("a.more").next().next().hide();
+ sItem.not(liBox).removeClass("active").find("a").removeClass("bov");
+
+ if(liBox.hasClass("on")) {
+ if(ulBox.is(":visible")) {
+ ulBox.hide();
+ $that.addClass("ico-on");
+ } else {
+ ulBox.show();
+ $that.removeClass("ico-on");
+ }
+ setIcoArrText($that);
+ return true;
+ }
+
+ if(liBox.hasClass("active")) {
+ liBox.removeClass("active").find("a").eq(0).removeClass("bov");
+ ulBox.hide();
+ } else {
+ liBox.addClass("active").find("a").eq(0).addClass("bov");
+ ulBox.show();
+ }
+ setIcoArrText($that);
+ });
+
+ sItem.hover(function(){
+ if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+ $(this).find("a").eq(0).addClass("bov");
+ },function(){
+ if($(this).hasClass('on')||$(this).hasClass('active')) return false;
+ $(this).find("a").eq(0).removeClass("bov");
+
+ });
+}
+
+//footer rolling banner
+function fn_rollToEx(container,objectId,step,auto){
+
+ // 롤링할 객체를 변수에 담아둔다.
+ var el = $('#'+container).find('#'+objectId);
+ var lastChild;
+ var speed = 3000;
+ var timer = 0;
+ var autoplay = false;
+
+ el.data('prev', $('#'+container).find('.prev')); //이전버튼을 data()메서드를 사용하여 저장한다.
+ el.data('next', $('#'+container).find('.next')); //다음버튼을 data()메서드를 사용하여 저장한다.
+ el.data('size', el.children().outerWidth()); //롤링객체의 자식요소의 넓이를 저장한다.
+ el.data('len', el.children().length); //롤링객체의 전체요소 개수
+ el.data('animating',false);
+ el.data('step', step); //매개변수로 받은 step을 저장한다.
+ el.data('autoStart', false); //매개변수로 받은 step을 저장한다.
+
+ el.css('width',el.data('size')*el.data('len')); //롤링객체의 전체넓이 지정한다.
+
+ if(arguments.length==4){
+ el.data('autoStart', auto);
+ }
+
+ if(el.data('autoStart')){
+ if(timer==0){
+ timer = setInterval(moveNextSlide, speed);
+ autoplay = true;
+ }
+ }
+
+ el.bind({
+ mouseenter:function(){
+ if(!autoplay) return false;
+
+ if(timer!=0 && el.data('autoStart')){
+ clearInterval(timer);
+ timer=0;
+ }
+ },
+ mouseleave:function(){
+ if(!autoplay) return false;
+
+ if(timer==0 && el.data('autoStart')){
+ timer = setInterval(moveNextSlide, speed);
+ }
+ }
+ });
+
+
+ //el에 첨부된 prev 데이타를 클릭이벤트에 바인드한다.
+ el.data('prev').bind({
+ click:function(e){
+ e.preventDefault();
+ movePrevSlide();
+ },
+ mouseenter:function(){
+
+ $(this).find('img').addClass('btnOn');
+
+ if(!autoplay) return false;
+
+ if(timer!=0 && el.data('autoStart')){
+ clearInterval(timer);
+ timer=0;
+ }
+ },
+ mouseleave:function(){
+
+ $(this).find('img').removeClass('btnOn');
+
+ if(!autoplay) return false;
+
+ if(timer==0 && el.data('autoStart')){
+ timer = setInterval(moveNextSlide, speed);
+ }
+ }
+ });
+
+ //el에 첨부된 next 데이타를 클릭이벤트에 바인드한다.
+ el.data('next').bind({
+ click:function(e){
+ e.preventDefault();
+ moveNextSlide();
+ },
+ mouseenter:function(){
+
+ $(this).find('img').addClass('btnOn');
+
+ if(!autoplay) return false;
+
+ if(timer!=0 && el.data('autoStart')){
+ clearInterval(timer);
+ timer=0;
+ }
+ },
+ mouseleave:function(){
+
+ $(this).find('img').removeClass('btnOn');
+
+ if(!autoplay) return false;
+
+ if(timer==0 && el.data('autoStart')){
+ timer = setInterval(moveNextSlide, speed);
+ }
+ }
+ });
+
+ function movePrevSlide(){
+ if(!el.data('animating')){
+ //전달된 step개수 만큼 롤링객체의 끝에서 요소를 선택하여 복사한후 변수에 저장한다.
+ var lastItem = el.children().eq(-(el.data('step')+1)).nextAll().clone(true);
+ lastItem.prependTo(el); //복사된 요소를 롤링객체의 앞에 붙여놓는다.
+ el.children().eq(-(el.data('step')+1)).nextAll().remove(); //step개수만큼 선택된 요소를 끝에서 제거한다
+ el.css('left','-'+(el.data('size')*el.data('step'))+'px'); //롤링객체의 left위치값을 재설정한다.
+
+ el.data('animating',true); //애니메이션 중복을 막기 위해 첨부된 animating 데이타를 true로 설정한다.
+
+ el.animate({'left': '0px'},'normal',function(){ //롤링객체를 left:0만큼 애니메이션 시킨다.
+ el.data('animating',false);
+ });
+ }
+ return false;
+ }
+
+ function moveNextSlide(){
+ if(!el.data('animating')){
+ el.data('animating',true);
+
+ el.animate({'left':'-'+(el.data('size')*el.data('step'))+'px'},'normal',function(){ //롤링객체를 첨부된 size와 step을 곱한 만큼 애니메이션 시킨다.
+ //전달된 step개수 만큼 롤링객체의 앞에서 요소를 선택하여 복사한후 변수에 저장한다.
+ var firstChild = el.children().filter(':lt('+el.data('step')+')').clone(true);
+ firstChild.appendTo(el); //복사된 요소를 롤링객체의 끝에 붙여놓는다.
+ el.children().filter(':lt('+el.data('step')+')').remove(); //step개수만큼 선택된 요소를 앞에서 제거한다
+ el.css('left','0px'); ////롤링객체의 left위치값을 재설정한다.
+
+ el.data('animating',false);
+ });
+ }
+ return false;
+ }
+
+}
+
+function fn_slide(options){
+
+ var opts = jQuery.extend({},options);
+
+ var $bt = $('#'+opts.container).find('#'+opts.bt).children(); //롤링버튼에 대한 선택자
+ var $obj = $('#'+opts.container).find('#'+opts.obj); //objectId를 id로 갖는 롤링객체의 선택자
+ var $prev = $('#'+opts.container).find('#'+opts.prev).hide(); //이전버튼에 대한 선택자
+ var $next = $('#'+opts.container).find('#'+opts.next); //다음버튼에 대한 선택자
+ var size = $obj.children().outerWidth(); //롤링객체의 각 이미지 넓이값
+ var len = $obj.children().length; //롤링객체의 이미지 갯수
+ var effect = false; //슬라이드효과를 위한 boolean변수
+ var auto = false;
+ var current = 0; //현재 보여지는 이미지의 인덱스값을 저장하기 위한 변수
+ var time;
+
+
+ $obj.css('width',size*len); //롤링객체의 전체넓이 지정
+ effect = opts.effect;
+ auto = opts.auto;
+
+ if(auto){
+ time = setTimeout('slideShow()',3000);
+ }
+
+ slideShow = function(){
+
+ if(current < len-1){
+ current++;
+ }else{
+ current=0;
+ }
+
+ controllStatus();
+
+ moveControl('next');
+
+ time = setTimeout('slideShow()',3000);
+ }
+
+ controllStatus = function(){
+ //이미지의 인덱스값에 따라 이전,다음 버튼 활성여부 지정
+ if(current>0||current<len-1){
+ $prev.show();
+ $next.show();
+ }
+ if(current==0){
+ $prev.hide();
+ $next.show();
+ }
+ if(current>=len-1){
+ $prev.show();
+ $next.hide();
+ }
+ }
+
+ moveControl = function(msg){
+ if(opts.bt!=null){
+ msg=='next'? $bt.eq(current-1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png'))
+ :$bt.eq(current+1).find('img').attr('src', $bt.eq(current-1).find('img').attr('src').replace('_.png','.png')); //이전에 활성화된 롤링버튼을 비활성화
+ $bt.eq(current).find('img').attr('src', $bt.eq(current).find('img').attr('src').replace('.png','_.png')); //현재 인덱스값을 가지는 롤링버튼을 활성화
+ }
+
+ if(effect!=true){ //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+ $obj.children().hide();
+ $obj.children().eq(current).show();
+ }else{ //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+ $obj.animate({'left':'-'+size*current},'slow');
+ }
+ }
+
+ $obj.bind({
+ mouseenter:function(){
+ if(!auto) return false;
+ clearTimeout(time);
+ },
+ mouseleave:function(){
+ if(!auto) return false;
+ time = setTimeout('slideShow()',3000);
+ }
+ });
+
+ //롤링 버튼 클릭시
+ $bt.bind({
+ mouseenter:function(){
+ if(!auto) return false;
+ clearTimeout(time);
+ },
+ mouseleave:function(){
+ if(!auto) return false;
+ time = setTimeout('slideShow()',3000);
+ },
+ click:function(){
+ var idx = $bt.index(this); //클릭한 롤링버튼의 인덱스값 저장
+
+ current = idx; //롤링버튼의 인덱스값을 이미지의 인덱스값으로 지정
+
+ controllStatus();
+
+ if(effect!=true){ //action변수가 true가 아닐경우 슬라이드 효과없이 현재의 인덱스값을 갖는 이미지를 보여줌.
+ $obj.children().hide();
+ $obj.children().eq(current).show();
+ }else{ //action변수가 true일 경우 현재의 인덱스값을 갖는 이미지로 슬라이드됨
+ $obj.animate({'left':'-'+size*current},'slow');
+ }
+
+ // 모든 롤링 버튼을 비활성화
+ $bt.each(function(){
+ var source = $(this).find('img').attr('src').replace('_.png','.png');
+ $(this).find('img').attr('src',source);
+ });
+
+ // 선택한 롤링버튼을 활성화
+ var source = $(this).find('img').attr('src').replace('.png','_.png');
+ $(this).find('img').attr('src',source);
+
+ return false;
+ }
+ });
+
+ //이전 버튼 클릭시
+ $prev.bind({
+ mouseenter:function(){
+ var source = $(this).find('img').attr('src').replace('.png','_.png');
+ $(this).find('img').attr('src',source);
+ if(!auto) return false;
+ clearTimeout(time);
+ },
+ mouseleave:function(){
+ var source = $(this).find('img').attr('src').replace('_.png','.png');
+ $(this).find('img').attr('src',source);
+ if(!auto) return false;
+ time = setTimeout('slideShow()',3000);
+ },
+ click:function(){
+ if(current==len-1) $next.show(); //이미지 인덱스값이 마지막이 아닐경우 비활성화된 다음버튼을 활성화
+ current--; //이미지 인덱스값 1씩 감소
+
+ moveControl('prev');
+
+ if(current==0) $(this).hide(); //이미지 인덱스값이 0일 경우, 즉 현재 첫번째 이미지가 활성화될 경우 이전버튼을 비활성화
+
+ return false;
+ }
+ });
+
+ //다음 버튼 클릭시
+ $next.bind({
+ mouseenter:function(){
+ var source = $(this).find('img').attr('src').replace('.png','_.png');
+ $(this).find('img').attr('src',source);
+ if(!auto) return false;
+ clearTimeout(time);
+ },
+ mouseleave:function(){
+ var source = $(this).find('img').attr('src').replace('_.png','.png');
+ $(this).find('img').attr('src',source);
+ if(!auto) return false;
+ time = setTimeout('slideShow()',3000);
+ },
+ click:function(){
+ current++; //이미지 인덱스값 1씩 증가
+
+ moveControl('next');
+
+ if(current>=len-1) $(this).hide(); //이미지인덱스값이 마지막일 경우, 즉 현재 마지막 이미지가 활성화될 경우 다음버튼을 비활성화
+ if(current>0) $prev.show(); //이미지인덱스값이 0이 아닌경우 이전버튼 활성화
+
+ return false;
+ }
+ });
+
+}
+
+// main rolling banner
+function slideMotion1(){
+ var $banner = $('#rolling .motionview'),
+ //$nav = $('#rolling ul.nav'),
+ banner = {prev:null, next:null},
+ size = $banner.children().length;
+ index = 1,
+ speed = 3000,
+ timer = null,
+ auto = true,
+ width = parseInt(100/size),
+ rest = parseInt(100%size);
+
+ var $nav = $('<ul class="nav">').insertAfter($banner);
+
+ $banner.children().each(function(index){
+ index++;
+ (index==1) ? $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'" class="sel">'+index+'</a></li>').appendTo($nav) : $('<li style="width:'+width+'%;"><a href="'+ $(this).attr("href") +'">'+index+'</a></li>').appendTo($nav);
+ if(index==size){
+ $nav.children().eq(-1).find('a').css('background-image','none');
+ }
+ });
+
+ if(rest>0){
+ width+=rest;
+ $nav.children().eq(-1).css('width',width+'%');
+ }
+
+ $nav.delegate("li",'click',function(){
+ var idx = $nav.children().index(this);
+ index = idx;
+ banner.prev = $banner.find('a.active');
+ banner.next = $banner.find('a').eq(index);
+
+ clearInterval(timer);
+ auto = false;
+
+ $nav.trigger('change.banner',banner)
+ .trigger('change.tab',index);
+
+ return false;
+ });
+
+ $nav.bind('change.banner',function(event, banner){
+ aniMotion();
+ });
+
+ $nav.bind('change.tab',function(event, index){
+ $nav.children().find('a').removeClass('sel');
+ $nav.children().eq(index).find('a').addClass('sel');
+ });
+
+ timer = setInterval(autoMotion, speed);
+
+ function autoMotion(){
+ if(index > size-1) index = 0;
+
+ aniMotion();
+ }
+
+ function aniMotion(){
+ if(auto){
+ banner.prev = $banner.find('a.active');
+ banner.next = $banner.find('a').eq(index);
+
+ $nav.children().find('a').removeClass('sel');
+ $nav.children().eq(index).find('a').addClass('sel');
+ }
+ banner.prev.addClass('last-active');
+ banner.next.css({'opacity':0.0})
+ .addClass('active')
+ .animate({'opacity':1.0}, 1000, function(){
+ banner.prev.removeClass('active last-active');
+
+ if(auto){
+ index++;
+ }else{
+ index++;
+ timer = setInterval(autoMotion, speed*1.5);
+ auto = true;
+ }
+ });
+ }
+}
+
+// forum list show or hide function
+function toggleFunc(){
+
+ var defaulNum = [2];
+
+ $('.forum-tit').each(function(){
+ var self = $(this);
+
+ var idx = $('.forum-tit').index(this);
+
+ for(i=0;i<=defaulNum.length;i++){
+ if(idx==defaulNum[i]){
+ var source = self.find('a.toggle').css('background-image').replace('.gif','_.gif');
+ self.find('a.toggle').css('background-image',source);
+
+ self.find('a.toggle').text('Show');
+ self.addClass('mb35').next().hide();
+ }
+ }
+
+ self.find('a.toggle').click(function(){
+
+ if(self.next().is(':visible')){
+ var source = $(this).css('background-image').replace('.gif','_.gif');
+ $(this).css('background-image',source);
+
+ $(this).text('Show');
+ self.addClass('mb35').next().hide();
+ }else{
+ var source = $(this).css('background-image').replace('_.gif','.gif');
+ $(this).css('background-image',source);
+
+ $(this).text('Hide');
+ self.removeClass('mb35').next().show();
+ }
+
+ return false;
+
+ });
+
+ });
+}
+
+// 파일 업로드
+function fileUpload( width ){
+ //var $img = $('.attach input[type=image]');
+ //var width = $img.attr('width');
+
+ // 2012-08-08 추가 : 파일 input 너비영역 셋팅
+ var w = width == null || width == undefined || isNaN( width ) ? "230px" : width + "px";
+
+ var $file = $('.attach input.upload').css({
+ "position": "absolute",
+ "top": "0px",
+ "right": "0px",
+ "width": w,
+ "cursor": "pointer",
+ "opacity": "0.0",
+ "height": "23px"
+ });
+ $file.off('change');
+ $file.on('change',function(e){
+ if(this.files != undefined && this.files.length == 0) { //chrome file 선택 취소시 파일 칸이 지워짐. 방지코드
+ return;
+ }
+ var idx = $file.index(this);
+ var localeCode = $("#localeCode").val() == undefined ? "en" : $("#localeCode").val();
+ var fileErrMsg = {
+ limit_ko : "최대 3개의 파일까지 업로드되며 200MB를 넘을수 없습니다"
+ ,limit_zh : "最多允许附加 3 个文件附件，并且其大小不能超过 200MB。"
+ ,limit_en : "Up to 3 file attachments are allowed and its size cannot exceed 200MB"
+ ,ext_ko : "지원하지 않는 확장자 입니다."
+ ,ext_zh : "不允许上传具有该扩展名的文件。"
+ ,ext_en : "File extention not allowed for upload."
+ };
+ var initFileInput = function(obj) {
+ $(obj).parent().find('input.file').val("");
+ if($.browser.msie && $.browser.msie && $.browser.version < 10.0 ) $(obj).replaceWith( $(obj).clone(true) );
+ else $(obj).val("");
+ };
+
+ var filename = $(this).val();
+
+ //CHK File ext
+ var imgExts = [ "txt", "xls", "xlsx", "doc", "docx"
+ , "ppt", "pptx", "pdf", "bmp", "gif", "jpeg"
+ , "jpg", "png", "zip"];
+ var fileExt = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
+ var findFlag = false;
+ for(var i = 0; i < imgExts.length; i++) {
+ if(imgExts[i] == fileExt) {
+ findFlag = true;
+ break;
+ }
+ }
+
+ if(findFlag == false) {
+ alert( fileErrMsg["ext_" + localeCode] );
+ initFileInput(this);
+// setTab(localeCode); //thread_write에도 있는데 실제로 본체가 없음.
+ return;
+ }
+
+ //CHK File Size
+ if(
+ ($.browser.msie && $.browser.version >= 10.0 ) //msie
+ || $.browser.mozilla //FF
+ || $.browser.safari //Chrome
+ )
+ {
+ var filesize = parseInt(this.files[0].size/1024/1024); //MB;
+ if( filesize > 200 ) {
+ alert( fileErrMsg["limit_" + localeCode] );
+ initFileInput(this);
+ return;
+ }
+ }
+
+ $(this).parent().find('input.file').attr("disablesd","disabled").val(filename);
+ });
+};
+
+
+// Show or Hide Toggle
+function showToEx(args){
+
+ if(!arguments.length) return false;
+
+ var bt = $('#'+args.bt);
+ var obj = $('#'+args.obj);
+
+ var source = bt.css('background-image');
+
+ if(obj.is(':visible')){
+ obj.hide();
+ }
+
+ bt.toggle(function(){
+ var src = source.replace('.gif','_.gif');
+ bt.css('background-image', src);
+ obj.show();
+
+ return false;
+ },function(){
+ var src = source.replace('_.gif','.gif');
+ bt.css('background-image', src);
+ obj.hide();
+
+ return false;
+ });
+
+}
+
+
+// FAQ 20131016
+function faqToEx(){
+
+ var $question = $('#contents').find('.question');
+ var $answer = $('#contents').find('.answer');
+
+ // All Answer Rows Hide
+ $answer.hide().find('.conts').hide();
+
+ $question.each(function(){
+ var $self = $(this);
+ $self.append("<div style='display: none'>" + $self.find("a").html() + "</div>");
+
+ $self.find('a').bind('click',function(){
+ $("#selArea ul").hide();
+ /*
+ if($(this).parents('tr').next().find('.answer').is(':visible')) return false;
+
+ $answer.hide().find('.conts').hide();
+ $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('normal');
+ */
+
+ /* 20120822 hjh modify*/
+ /* if ( this open )? close : all close, e.target open */
+ var cutTtl = $(this).parent().children("div").html();
+ var ttl = $(this).parent().parent().children("td.real_question").html();
+
+ if($(this).parents('tr').next().find('.answer').is(':visible')){
+ $(this).html(cutTtl);
+ $(this).parents('tr').next().find('.answer').find('.conts').slideUp('fast',function(){
+ $answer.hide();
+ });
+ }else{
+ titleInit();
+ $(this).html(ttl);
+ $answer.hide().find('.conts').hide();
+ //$answer.slideUp('normal').find('.conts').hide();
+ $(this).parents('tr').next().find('.answer').show().find('.conts').slideDown('slow');
+ }
+
+ return false;
+ });
+ });
+
+ $answer.each(function(){
+ var $self = $(this);
+
+ $(this).find('a.bt-close-faq').bind('click',function(){
+ var question_td = $(this).parent().parent().parent().prev().children("td.question");
+ var cutTtl = question_td.children("div").html();
+ question_td.children("a").html(cutTtl);
+
+ $self.find('.conts').slideUp('fast',function(){
+ $self.hide();
+ });
+
+ return false;
+ });
+ });
+
+ var titleInit = function() {
+ $question.each(function(i) {
+ $(this).find("a").html($(this).find("div").html());
+ });
+ }
+}
+
+
+
+/**
+ * 쓰기페이지 Tab 영역 컨트롤
+ * @param selector 텝을 선택했을 때 교체할 레이어 선택자 ex) '.bbs-write:not(#opt)'
+ */
+function setSwitchTab( selector ) {
+ var tabs = $('.tab-list').find("li");
+ var elements = $( selector );
+
+ $( elements ).each( function( i ) {
+ if( i != 0 )
+ {
+ $(this).hide();
+ }
+ })
+
+ // Control Tabs
+ $( tabs ).each( function( i ) {
+ $( this ).click( function(){
+ resetClass();
+
+ $( this ).find( 'a' ).addClass( "sel" );
+ $( elements[i] ).show();
+
+ return false;
+ });
+ });
+
+ // Class 리셋
+ function resetClass()
+ {
+ $( tabs ).each( function( i ) {
+ $( this ).find( 'a' ).removeClass( 'sel' );
+ });
+
+ $( elements ).each( function( i ) {
+ $( this ).hide();
+ });
+ }
+}
+
+var SET_ATTACH_LIMIT;
+var SET_ATTACH_WIDTH;
+var SET_ATTACH_BTNNAME;
+
+var firstAddAction = function(obj, limit, w, btnName) {
+ var bn = btnName || 'File';
+ var fileAttachStr = "<li class='clfix no-first'>";
+ fileAttachStr += '<div class="attach">';
+ fileAttachStr += '<input readonly="readonly" disabled="disabled" type="text" class="ipt-txt file" />';
+ fileAttachStr += '<span class="fbtn" style="margin-left: 4px;">' + bn + '</span>';
+ fileAttachStr += '<input type="file" name="file" class="upload" title="File upload" />';
+ fileAttachStr += '</div>';
+ fileAttachStr += '<a href="#none" class="remove-btn fl" style="margin-left: 3px;">remove file</a>';
+ fileAttachStr += '</li>';
+ obj.on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ setTimeout(function() {
+ $("a.remove-btn").eq(0).focus();
+ }, 1);
+ }
+ });
+
+ obj.click( function()
+ {
+ var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+
+ if( $( ul ).find( "li" ).length >= limit )
+ {
+ alert( "Only " + limit + " files are allowed" );
+ return;
+ }
+ //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+ $( ul ).append( fileAttachStr );
+ var removeBtns = $( ul ).find( ".remove-btn" ).last();
+ $( removeBtns ).bind( "click", onBtnFileDetachClick );
+
+
+ removeBtns.on("keydown", function(e) {
+ var that = $(this);
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ setTimeout(function() {
+ that.prev().find("input[type=file]").focus();
+ }, 1);
+ }
+ });
+
+ var addInputFile = $("ul.file-att-form input[type=file]").last();
+
+ addInputFile.on("keydown", function(e) {
+ var that = $(this);
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which === 9) {
+ e.preventDefault();
+ setTimeout(function() {
+ that.parent().parent().find("a.remove-btn").eq(0).focus();
+ }, 1);
+ }
+ }).on("focusin", function(e) {
+ $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+ $(this).parent().css("outline", "");
+ });
+
+ fileUpload( w + 50 );
+ updateFileField();
+ return false;
+ });
+
+ function onBtnFileDetachClick()
+ {
+ var that = $(this);
+ $( this ).unbind( "click", onBtnFileDetachClick );
+ var a = that.parent().prev().children("a").eq(0);
+ setTimeout(function() {
+ that.parents(".no-first").remove();
+ }, 1);
+
+ setTimeout(function() {
+ a.focus();
+ }, 300);
+ return false;
+ }
+
+ function updateFileField()
+ {
+ var ul = $( ".file-att-form" );
+ $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+}
+
+var firstRemoveAction = function(id) {
+ var obj = $("#" + id);
+ var compFile = $("input[type=file]");
+ var compFileCnt = compFile.size();
+ var ulObj = compFile.eq(0).parent().parent().parent();
+ if(compFileCnt <= 1) {
+ var firstCompFile = compFile.eq(0);
+ firstCompFile.prev().prev().val("");
+ if ($.browser.msie) {
+ $(obj).parent().find('input.file').val("");
+ firstCompFile.replaceWith( firstCompFile.clone(true) );
+ } else {
+ firstCompFile.val("");
+ firstCompFile.prev().prev().val("");
+ }
+ } else {
+ obj.parent().remove();
+ ulObj.find("a.remove-btn").eq(0).after("<a href=\"JAVA-SCRIPT:;\" class=\"add-btn fl\" style=\"margin-left: 3px;\">add file</a>");
+
+ //add-btn event..
+ firstAddAction($("a.add-btn"), SET_ATTACH_LIMIT, SET_ATTACH_WIDTH, SET_ATTACH_BTNNAME);
+ }
+
+ ulObj
+ .find("li")
+ .eq(0)
+ .removeClass("no-first")
+ .find("a.remove-btn")
+ .attr("id", id)
+ .unbind("click");
+
+ setTimeout(function() {
+ $("#" + id).focus();
+ }, 100);
+
+ $("#" + id).on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ var that = $(this);
+ setTimeout(function() {
+ that.prev().focus();
+ }, 1);
+ }
+ });
+
+ $("#" + id).on("click", function(e) {
+ firstRemoveAction($(this).attr("id"));
+ });
+}
+
+/**
+ * File 첨부컨트롤
+ * @param limit 최대 파일 첨부 갯수
+ * @param width 파일 업로드 필드의 너비 <- 2012-08-08 추가
+ */
+function setAttachFile( limit, width, btnName, removeBtnId )
+{
+ var w = width == null || width == undefined || isNaN( width ) ? 180 : width;
+ var btnFileAttach = $( 'ul.file-att-form' ).find( 'a.add-btn' );
+ var inputFile = $( 'ul.file-att-form input[type=file]' );
+
+ SET_ATTACH_LIMIT = limit;
+ SET_ATTACH_WIDTH = w;
+ SET_ATTACH_BTNNAME = btnName;
+
+ inputFile.on("keydown", function(e) {
+ var that = $(this);
+
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which === 9) {
+ e.preventDefault();
+ setTimeout(function() {
+ that.parent().parent().find("#" + removeBtnId).eq(0).focus();
+ }, 1);
+ }
+ });
+
+ inputFile.on("focusin", function(e) {
+ $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+ $(this).parent().css("outline", "");
+ });
+
+ firstAddAction(btnFileAttach, limit, w, btnName);
+
+ /*
+ btnFileAttach.on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ setTimeout(function() {
+ inputFile.focus();
+ }, 1);
+ }
+ });
+
+ btnFileAttach.click( function()
+ {
+ var ul = $( this ).parentsUntil( $("td"), ".file-att-form" );
+
+ if( $( ul ).find( "li" ).length >= limit )
+ {
+ alert( "Only " + limit + " files are allowed" );
+ return;
+ }
+ //$( fileAttachStr ).find( ".ipt-txt" ).css("width", w + "px" );
+ $( ul ).append( fileAttachStr );
+ var removeBtns = $( ul ).find( ".remove-btn" ).last();
+ $( removeBtns ).bind( "click", onBtnFileDetachClick );
+
+
+ removeBtns.on("keydown", function(e) {
+ var that = $(this);
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ setTimeout(function() {
+ that.prev().find("input[type=file]").focus();
+ }, 1);
+ }
+ });
+
+ var addInputFile = $("ul.file-att-form input[type=file]").last();
+
+ addInputFile.on("keydown", function(e) {
+ var that = $(this);
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which === 9) {
+ e.preventDefault();
+ setTimeout(function() {
+ that.parent().parent().find("a.remove-btn").eq(0).focus();
+ }, 1);
+ }
+ }).on("focusin", function(e) {
+ $(this).parent().css("outline", "1px dotted #2d2d2d");
+ }).on("focusout", function(e) {
+ $(this).parent().css("outline", "");
+ });
+
+ fileUpload( w + 50 );
+ updateFileField();
+ return false;
+ });
+
+
+ // File 제거 버튼
+ function onBtnFileDetachClick()
+ {
+ var that = $(this);
+ $( this ).unbind( "click", onBtnFileDetachClick );
+ var a = that.parent().prev().children("a").eq(0);
+ setTimeout(function() {
+ that.parents(".no-first").remove();
+ }, 1);
+
+ setTimeout(function() {
+ a.focus();
+ }, 300);
+ return false;
+ }
+ */
+ /**
+ * 2012-08-08 전종호 추가
+ * 파일 Input Text 영역 너비를 잡아주는 메서드
+ */
+ function updateFileField()
+ {
+ var ul = $( ".file-att-form" );
+ $( ul ).find( ".ipt-txt" ).css( "width", w + "px" );
+ }
+
+ updateFileField();
+ fileUpload( w + 50 );
+
+ $("#" + removeBtnId).on("click", function(e) {
+ firstRemoveAction($(this).attr("id"));
+ });
+}
+
+
+
+/**
+ * [PAGE] device speces list page
+ * date : 20120808
+ * id : hjh
+ */
+function initDevicespecsList (){
+ var isCompareView=false;
+ $("#devicespecs-list > li").each(
+ function(i){
+ $(".info", this).bind("click", devicespecsListInfoToggle);
+ $(".xx", this).bind("click", devicespecsListInfoToggle);
+
+ //detail info layer toggle function
+ function devicespecsListInfoToggle (){
+ $("#devicespecs-list li:nth-child("+(i+1)+") .info-detail").toggle();
+ return false;
+ }
+ });
+
+
+ /* DEVICE COMPARE 열리는 부분
+ - defualt : close.
+ - 최초 한번만 열림
+ - 현재는 compare 버튼에 공통으로 함수 바인딩
+ */
+ function devicespecsCompareOnOff (){
+ if ( isCompareView ) return;
+ var ww = ( isCompareView ) ? "30px":"207px";
+ $("#devicespecs-compare").animate({
+ height: ww }, 300, "linear", function(){ });
+
+ isCompareView = ( isCompareView ) ? false:true;
+ return false;
+ }
+
+ //compare 버튼 공통으로 클릭 이벤트 걸림
+ $(".compare").bind("click", function (){ devicespecsCompareOnOff() });
+}
+
+/**
+ * [PAGE] device speces view page
+ * date : 20120808
+ * id : hjh
+ */
+ function initDevicespecsView (){
+ var isImgView = false;
+ var isView = 0;
+
+ //thumbnail overevent bind
+ $("#img-viewer-thumbnail > li").each( function(i){ $(this).bind("mouseover focusin",function(){focusDeviceDetail(i+1);}); } );
+ focusDeviceDetail (1);
+
+ $("#img-viewer-thumbnail li").last().on("keydown keyup", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.type === "keydown" && e.which == 9) {
+ setTimeout(function() {
+ $("#img-viewer-handle a").eq(0).focus();
+ }, 1);
+ }
+ });
+
+ //thumbnail viewarea controll handler bind
+ $("#img-viewer-handle").click(function () {
+ var ww;
+ var src = $("#img-viewer-handle img").attr("src");
+ if ( isImgView ){
+ ww = "300px";
+ src = src.replace(".gif", "_.gif");
+ $("#img-viewer-thumbnail").hide();
+ $("#device-info").show();
+ }else{
+ ww = "730px";
+ src = src.replace("_.gif", ".gif");
+ $("#img-viewer-thumbnail").show();
+ $("#device-info").hide();
+ focusDeviceDetail(1);
+ }
+
+ $("#img-viewer-handle img").attr("src", src);
+ $("#img-viewer").animate({
+ width: ww
+ }, 300, "linear", function(){
+ if($.browser.msie)
+ $("#img-inner").css("width", ww);
+ });
+
+ isImgView = ( isImgView ) ? false:true;
+ });
+
+ //thumbnail overevent function (update date 2012.09.05 kangki)
+ function focusDeviceDetail ( id ) {
+ if ( isView == id ) return;
+
+ $("#img-viewer-thumbnail li:nth-child("+isView+")").removeClass ("on");
+ var imgSrc = $("#img-viewer-thumbnail li:nth-child("+id+")").addClass ("on").find('img').attr('src');
+
+ $( "#img-viewer-bic > img").attr("src", imgSrc);
+ isView = (id);
+ }
+
+ /*toggle devicespecs List*/
+ if($('div#contents').find('.devicespec-tit').length){
+
+ $('.devicespec-tit').each(function(){
+ var self = $(this);
+ $('a', self).bind ("click", fnToggle);
+
+ function fnToggle(){
+
+ if ( $(this).parent().parent().next().is(':visible') ){
+ $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+ self.find('em').text('Show');
+ self.next().hide();
+
+ return false;
+ }else{
+ $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+ self.find('em').text('Hide');
+ self.next().show();
+
+ return false;
+ }
+ }
+
+ });
+ }
+
+ /*all Show Hide devicespecs List*/
+ if($('div#contents').find('.devicespecs-util').length){
+ var self = $('div#contents').find('.devicespecs-util');
+
+ $('.showA', self).bind ("click", function (){
+ $('.devicespec-tit').each(function(){
+
+ var me = $(this);
+ if ( !me.next().is(':visible') ){
+ me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+ me.find('em').text('Hide');
+ me.next().show();
+ }
+ });
+ return false;
+ })
+ $('.hideA', self).bind ("click", function (){
+
+ $('.devicespec-tit').each(function(){
+
+ var me = $(this);
+ if ( me.next().is(':visible') ){
+ me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+ me.find('em').text('Show');
+ me.next().hide();
+ }
+
+ });
+ return false;
+ })
+ }
+}
+
+/**
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+function searchInit()
+{
+ var focusTarget = "input";
+
+ $("#searchInput").bind("keydown", checkSearchText);
+ $("#searchInput").focusout(function() {
+ if( focusTarget == "dropdown" )
+ {
+ return false;
+ }
+ else
+ {
+ //toggleClass( false );
+ }
+ });
+
+ $( "#searchInput" ).focusin( function() {
+ focusTarget = "input";
+ });
+
+ $("#btnDropdown").mousedown( function(){
+ focusTarget = "dropdown";
+ });
+
+ $(".autocomplete ul li").focusin( function() {
+ //
+ });
+
+ $(".autocomplete ul li:last-child").focusout( function() {
+ toggleClass( false );
+ })
+
+ $(".autocomplete").mouseleave(function(){
+ toggleClass( false );
+ });
+
+ $("#btnDropdown").click( function(){
+ //alert("btn click");
+ if( $("#searchInput").val().length == 0 ){
+ return false;
+ }
+ else{
+ if( $("#btnDropdown").hasClass("dropdown") ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }
+
+ return false;
+ });
+
+ function checkSearchText(){
+ setTimeout(function(){
+ var txt = $("#searchInput").val();
+
+ if( txt.length > 0 ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }, 1);
+ }
+
+ function toggleClass( bo ){
+ if( bo ){
+ $(".autocomplete").css("visibility", "visible");
+
+ $("#btnDropdown").removeClass("dropdown");
+ $("#btnDropdown").addClass("dropdownoff");
+
+ var hei = $(".autocomplete").find('>ul').outerHeight();
+ if(hei>400){
+ $(".autocomplete").css({'height':'400px','overflow-y':'auto'});
+ }
+ }
+ else{
+ $(".autocomplete").css("visibility", "hidden");
+
+ $("#btnDropdown").removeClass("dropdownoff");
+ $("#btnDropdown").addClass("dropdown");
+ }
+ }
+}
+ */
+
+function setTopScroll(selector) {
+ if ( !selector ) return false;
+ var btn = $( selector );
+ var w = $( window );
+ btn.css( "position", "absolute" );
+
+
+ btn.click( function(){ w.scrollTop( 0 ) } );
+
+ var wheight = w.innerHeight();
+
+ $(window).resize( function() {
+ wheight = w.innerHeight();
+ redraw();
+ });
+
+ $(window).scroll( function() {
+ redraw();
+ })
+
+ /**
+ * Top 버튼의 재정렬 메서드
+ */
+ function redraw()
+ {
+ var t = w.scrollTop() + wheight - 289;
+
+ if( t < wheight / 2 && w.scrollTop() == 0 ) {
+ t = wheight / 2;
+ }
+
+ btn.clearQueue();
+
+ btn.animate({
+ top: t
+ }, 500, function() {
+ // Animation complete.
+ });
+ //btn.css( "top", t );
+ //console.log( "target : " + t );
+ }
+
+ redraw();
+ /*
+ obj.initTop = position;
+ obj.topLimit = topLimit;
+ obj.bottomLimit = Math.max( document.documentElement.scrollHeight, document.body.scrollHeight ) - btmLimit - obj.offsetHeight;
+
+ obj.style.position = "absolute";
+ obj.top = obj.initTop;
+ // obj.left = obj.initLeft;
+
+ if ( typeof( window.pageYOffset ) === "number" ) { //WebKit
+ obj.getTop = function() {
+ return window.pageYOffset;
+ }
+ } else if ( typeof( document.documentElement.scrollTop ) === "number" ) {
+ obj.getTop = function() {
+ return Math.max( document.documentElement.scrollTop, document.body.scrollTop );
+ }
+ } else {
+ obj.getTop = function() {
+ return 0;
+ }
+ }
+
+ if ( self.innerHeight ) { //WebKit
+ obj.getHeight = function() {
+ return self.innerHeight;
+ }
+ } else if( document.documentElement.clientHeight ) {
+ obj.getHeight = function() {
+ return document.documentElement.clientHeight;
+ }
+ } else {
+ obj.getHeight = function() {
+ return 500;
+ }
+ }
+
+ obj.move = setInterval( function() {
+ if ( obj.initTop > 0 ) {
+ pos = obj.getTop() + obj.initTop;
+ } else {
+ pos = obj.getTop() + obj.getHeight() + obj.initTop;
+ }
+
+ if ( pos > obj.bottomLimit ) pos = obj.bottomLimit;
+ if ( pos < obj.topLimit ) pos = obj.topLimit;
+
+ interval = obj.top - pos;
+ obj.top = obj.top - interval / 3;
+ obj.style.top = obj.top + "px";
+ }, 30 )
+ */
+}
+
+
+//popup
+function pop(url,name,w,h){window.open(url,name,'width='+w+',height='+h+',scrollbars=no')} //Popup(스크롤바없음)
+function pops(url,name,w,h){ window.open(url,name,'width='+w+',height='+h+',scrollbars=yes') } //Popup(스크롤바있음)
+
+//popup 중앙에 띄우기
+function pop_center(){
+ var x,y;
+ if (window.innerHeight) { // IE 외 모든 브라우저
+ x = (screen.availWidth - self.innerWidth) / 2;
+ y = (screen.availHeight - self.innerHeight) / 2;
+ }else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict 모드
+ x = (screen.availWidth - document.documentElement.clientWidth) / 2;
+ y = (screen.availHeight - document.documentElement.clientHeight) / 2;
+ }else if (document.body) { // 다른 IE 브라우저( IE < 6)
+ x = (screen.availWidth - document.body.clientWidth) / 2;
+ y = (screen.availHeight - document.body.clientHeight) / 2;
+ }
+ window.moveTo(x,y);
+}
+
+// Layer Popup Open
+function layer_open(el){
+ var temp = $('#' + el);
+
+ if(!temp.hasClass('sty2')){
+ $('.layer').fadeIn();
+ }
+
+ if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+ else temp.css('top', '0px');
+ if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+ else temp.css('left', '0px');
+
+ if(temp.hasClass('sty2')){
+ temp.fadeIn();
+
+ temp.find('a.cbtn').click(function(e){
+ temp.fadeOut();
+ });
+ temp.find('a.gbtn').click(function(e){
+ temp.fadeOut();
+ });
+
+ return false;
+ }
+ // 닫는 버튼 gbtn-c 추가 20130627
+ $('.layer .bg, .pop-header .close, .gbtn-c').click(function(){
+ $('.layer').fadeOut();
+ return false;
+ });
+}
+
+// background dim - 2013-05-31
+function layer_open2(el){
+ var temp = $('#' + el);
+ $('input').attr('disabled', 'disabled');
+ $('.layerPop').fadeIn();
+
+
+ if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
+ else temp.css('top', '0px');
+ if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
+ else temp.css('left', '0px');
+
+ $('.layerPop .bg, .pop-header .close, .gbtn, .cbtn').click(function(){
+ $('.layerPop').fadeOut();
+ $('input').removeAttr('disabled');
+ return false;
+ });
+}
+
+
+function pop_account(url){
+ window.open(url,'account','width=619,height=591,scrollbars=yes')
+}
+
+function pop_loadDoc(url){
+ window.open(url,'online','width=850,height=600,scrollbars=yes')
+}
+
+/**
+ * [PAGE] Tags
+ * date : 20120820
+ * author : 전종호
+ */
+function initTags()
+{
+ // Tag리스트의 각 엘리먼트 뒤에 "," 리터럴 추가.
+ // 마지막 아이템은 제외
+ var eleArr = $(".tag-list").find("li");
+
+ $( eleArr ).each( function( i ) {
+ if( i < eleArr.length - 1 )
+ {
+ var target = $(this).find("a")[0];
+ var content = $( target ).html();
+
+ $( target ).html( content + "," );
+ }
+ })
+}
+
+$(document).ready(function(){
+ $(".tip_info").css("cursor","pointer");
+ $(".tip_info > img").mouseover(function(){
+ $(".tip_cont").css("display","block");
+ });
+ $(".tip_info > img").mouseout(function(){
+ $(".tip_cont").css("display","none");
+ });
+});
+
+// new layer popup script by ygh 2013.11.14
+
+var isPopup = false ;
+
+function popupLayerView(id){
+
+ var $L = $("#" + id) ;
+ var $D = $("#" + id + "down") ;
+
+ $T = $("#" + id) ;
+
+ $L.show();
+ isPopup = true ;
+
+ $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+
+ $("#" + id + "agree").focus() ;
+
+ jQuery(":focusable").focusin(function(e){
+ if (isPopup) {
+ e.stopPropagation() ;
+ if ($L.find(jQuery(this)).length > 0) {
+ } else {
+ jQuery(this).blur() ;
+ jQuery("#" + id + " :focusable:first").focus() ;
+ }
+ }
+ }) ;
+
+ $L.find('.close').click(function(){
+ resetPopup(id) ;
+ });
+
+ $("#" + id + "agree").click(function() { $(this).is(':checked') ? $D.show() : $D.hide() ; });
+}
+
+function resetPopup(T) {
+ $("#" + T + "down").hide();
+ $("#" + T + "agree").attr("checked", false) ;
+ isPopup = false ;
+ $("#" + T).hide() ;
+ $("#" + T + "Btn").focus() ;
+}
+
+function getDownload(T, F, I) {
+ if ($("#" + T + "agree").is(':checked')) {
+ commonDownloadLog(F, I) ;
+ resetPopup(T) ;
+ }
+}
+
+function focusable( element, isTabIndexNotNaN ) {
+ var map, mapName, img, nodeName = element.nodeName.toLowerCase() ;
+ if ( "area" === nodeName ) {
+ map = element.parentNode;
+ mapName = map.name;
+ if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) { return false ; }
+ img = $( "img[usemap=#" + mapName + "]" )[0];
+ return !!img && visible( img );
+ }
+ return ( /input|select|textarea|button|object/.test( nodeName ) ? !element.disabled : "a" === nodeName ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible
+ visible( element ) ;
+}
+
+function visible( element ) {
+ return $.expr.filters.visible( element ) && !$( element ).parents().addBack().filter(function() {
+ return $.css( this, "visibility" ) === "hidden";
+ }).length;
+}
+if ( !$.fn.addBack ) { $.fn.addBack = function( selector ) { return this.add( selector == null ? this.prevObject : this.prevObject.filter( selector ) ); }; }
+
+$.extend( $.expr[ ":" ], {
+ data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); },
+ focusable: function( element ) { return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) ); },
+ tabbable: function( element ) { var tabIndex = $.attr( element, "tabindex" ), isTabIndexNaN = isNaN( tabIndex ); return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN ); }
+});
+// new layer popup script by ygh 2013.11.14
+
+// 2013-11-15 타이젠 썸네일 추가
+$(document).ready(function() {
+ $('.view_device1').hide();
+
+ $('#thumb_view_btn').hover(function() {
+ $('.view_device1').show();
+ },function() {
+ $('.view_device1').hide();
+ });
+
+});
+
+// 2014-04-22 타이젠 썸네일 추가
+$(document).ready(function() {
+ $('.view_device2').hide();
+
+ $('#thumb_view_btn2').hover(function() {
+ $('.view_device2').show();
+ },function() {
+ $('.view_device2').hide();
+ });
+
+});
+
+
+function beforePopupLayerView(popId, popId2, popContinue){
+ var $L = $("#" + popId) ;
+ $L.show(100);
+ $('html, body').animate({ scrollTop: $L.offset().top }, 500);
+ $L.find('.close').click(function(){
+ $L.hide();
+ });
+ $L.find("." + popContinue).click(function() { $L.hide(); popupLayerView(popId2); });
+}
--- /dev/null
+// /////////////////////////////////////////////////////////////////////////////////////////////////
+// # com.samsung.devloper common core javascript #
+// # Create Date : 2012.07.10.
+// # Create By : kangki
+;(function ($) {
+/**
+ * Samsung Developer Common JavaScript
+ */
+$.SD = {};
+
+/*
+ * Method Common
+ */
+$.SD.message = function (msg) { if (msg) alert(msg); };
+$.SD.replaceAll = function (str, from, to) { return str.split(from).join(to); }
+$.SD.typeOf = function (data) { var func = func || Object.prototype.toString; return func.call(data); };
+$.SD.typeTest = function (data, datatype) {
+ if (datatype === "String" || datatype === "string") return /String/.test($.SD.typeOf(data));
+ if (datatype === "Number" || datatype === "number") return /Number/.test($.SD.typeOf(data));
+ if (datatype === "Array" || datatype === "array") return /Array/.test($.SD.typeOf(data));
+ if (datatype === "Boolean" || datatype === "boolean") return /Boolean/.test($.SD.typeOf(data));
+ if (datatype === "Function" || datatype === "function") return /Function/.test($.SD.typeOf(data));
+ if (datatype === "Date" || datatype === "date") return /Date/.test($.SD.typeOf(data));
+ if (datatype === "Object" || datatype === "object") return /Object/.test($.SD.typeOf(data));
+
+ return (new RegExp("/" + datatype + "/")).test($.SD.typeOf(data));
+};
+
+$.SD.toDate = function (date, seperator) {
+ if (!seperator) seperator = '-';
+
+ date = $.SD.replaceAll(date, seperator, '');
+ date = $.SD.replaceAll(date, '/', '');
+
+ if (date.length !== 8) return null;
+
+ date = new Date(date.substring(0,4) + '/' + date.substring(4,6) + '/' + date.substring(6,8));
+
+ if (date.valueOf().toString() === 'NaN') return null;
+
+ return date;
+};
+
+$.SD.toDateString = function (date, seperator) {
+ if (!seperator) seperator = '/';
+ if (/String/.test(Object.prototype.toString.call(date))) date = $.SD.toDate(date);
+ if (/Date/.test(Object.prototype.toString.call(date)) === false) return "";
+
+ var str, dateString = date.getFullYear();
+
+ str = "0" + (date.getMonth()+1);
+ dateString = dateString + seperator + str.substring(str.length-2, str.length);
+ str = "0" + date.getDate();
+ dateString = dateString + seperator + str.substring(str.length-2, str.length);
+
+ return dateString;
+};
+
+$.SD.addYear = function (date, number) { date.setYear(date.getFullYear() + number); return date; };
+$.SD.addMonth = function (date, number) { date.setMonth(date.getMonth() + number); return date; };
+$.SD.addDate = function (date, number) { date.setDate(date.getDate() + number); return date; };
+
+$.SD.insertComma = function(num) {
+ var tnum = num + "";
+ var tarr = new Array();
+ var dot = "";
+ var idxDot = tnum.indexOf(".");
+ var sign = "";
+ var tinx = 0;
+ var fnum = tnum;
+
+
+ if(idxDot > -1) {
+ fnum = tnum.substring(0, idxDot);
+ dot = tnum.substring(idxDot);
+ tnum = fnum;
+ }
+
+ if(tnum.indexOf("-") > -1) {
+ fnum = tnum.substring(1);
+ sign = tnum.substring(0, 1);
+ }
+
+ for(var inx = fnum.length; inx > 0; ) {
+ tarr[tinx++] = fnum.substring(inx, inx - 3);
+ inx = inx - 3;
+ }
+
+ return sign + tarr.reverse().join(",") + dot;
+}
+
+/**
+ * Method Ajax
+ */
+$.SD.ajax = {
+ doAjax : function (json) {
+ var param = {
+ async : json.async,
+ type : json.type,
+ dataType : json.dataType,
+ cache: json.cache,
+ timeout : json.timeout,
+ success : json.success,
+ error : json.error
+ };
+
+ if (param.dataType === 'jsonp') {
+ param.url = json.url + '?' + $.param(json.data) + '&callback=?';
+ } else {
+ param.url = json.url;
+ param.data = json.data;
+ }
+ $.ajax(param);
+ },
+
+ get : function (json) {
+ $.SD.ajax.doAjax({
+ url:json.url,
+ cache:json.cache != null ? json.cache : false,
+ async:json.async != null ? json.async : true,
+ type:'get',
+ dataType:'json',
+ data:json.data != null ? json.data : {},
+ timeout:10000, success:json.success,
+ error: function(){ if(json.error != null)json.error(); }
+ });
+ },
+
+ post : function (json) {
+ $.SD.ajax.doAjax({ url:json.url,
+ cache: json.cache != null ? json.cache : false,
+ async:json.async != null ? json.async : true,
+ type:'post', dataType:'json',
+ data:json.data != null ? json.data : {},
+ timeout:10000, success:json.success,
+ error: function(){ if(json.error != null)json.error(); }
+ });
+ }
+};
+
+/**
+ * SD20 password check
+ */
+
+$.SD.isSD20Pwd = function(pwd) {
+
+ if(/[a-zA-Z]{1,}/.test(pwd) == false) {
+ return false;
+ }
+
+ if(/[0-9]{1,}/.test(pwd) == false) {
+ return false;
+ }
+
+ if(/^[0-9a-zA-Z]{6,16}$/.test(pwd) == false) {
+ return false;
+ }
+
+ return true;
+};
+
+$.SD.popupCenter = function(popObj) {
+ var scrollbars = "no";
+ var resizeable = "no";
+
+ if(popObj.scrollbars) {
+ scrollbars = popObj.scrollbars;
+ }
+
+ if(popObj.resizeable) {
+ resizeable = popObj.resizeable;
+ }
+
+ var width = screen.width;
+ var height = screen.height;
+
+ var x = ( width / 2 ) - ( popObj.width / 2 );
+ var y = ( height / 2 ) - ( popObj.height / 2 );
+
+ var opt = "left=" + x +
+ ",top=" + y +
+ ",width=" + popObj.width +
+ ",height=" + popObj.height +
+ ",toolbar=no,location=no,directories=no,status=no,menubar=no" +
+ ",scrollbars=" + scrollbars +
+ ",resizable=" + resizeable;
+ var pop = window.open(popObj.url, popObj.target, opt);
+ if(pop) {
+ pop.focus();
+ }
+}
+
+$.SD.isValidDate = function(val) {
+ if(val.length != 8) {
+ return false;
+ }
+
+ var yyyy = Number(val.substring(0, 4));
+ var mm = Number(val.substring(4, 6));
+ var dd = Number(val.substring(6));
+
+ if( mm < 1 || mm > 12 ) {
+ return false;
+ }
+
+ var endDay = 0;
+
+ if( mm == 2 ) {
+ if(yyyy % 4 == 0 && yyyy % 100 != 0 || yyyy % 400 == 0) {
+ endDay = 29;
+ } else {
+ endDay = 28;
+ }
+
+ } else {
+ var endDays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
+ endDay = endDays[mm - 1];
+ }
+
+ if( dd <= 0 || dd > endDay ) {
+ return false;
+ }
+
+ return true;
+
+}
+
+$.SD.boardDownload = function(option, func) {
+ var jsonData = {
+ url: "/board/ajaxDwnldProc.do",
+ async: false,
+ data: {ctgy1: option.ctgy1, ctgy2: option.ctgy2, ctgyId: option.ctgyId, bdId: option.bdId, attachId: option.attachId},
+ success: function(data) {
+ if(data.existFileYn == "Y") {
+ location.href = "/board/download.do?bdId=" + option.bdId + "&attachId=" + option.attachId;
+ //location.href = $(obj).attr("href");
+ if(func) {
+ func(data);
+ }
+ } else {
+ alert("File does not exist.");
+ }
+ }
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownload = function(fileName, categoryId, func) {
+ var jsonData = {
+ url: "/common/ajaxCommonDwnldProc.do",
+ async: false,
+ data: {fileName: fileName, categoryId: categoryId},
+ success: function(data) {
+ if(data.existFileYn == "Y") {
+ location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+ if(func) {
+ func(data);
+ }
+ } else {
+ alert("File does not exist.");
+ }
+ }
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownloadLog = function(fileFullPath, categoryId, func) {
+ var jsonData = {
+ url: "/common/ajaxCommonDownloadLogProc.do",
+ async: false,
+ data: {fileFullPath: fileFullPath, categoryId: categoryId},
+ success: function(data) {
+ if(data.existFileYn == "Y") {
+ //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+ location.href = fileFullPath;
+ if(func) {
+ func(data);
+ }
+ } else {
+ alert("File does not exist.");
+ }
+ }
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonDownloadLogTarget = function(fileFullPath, categoryId, target, func) {
+ var jsonData = {
+ url: "/common/ajaxCommonDownloadLogProc.do",
+ async: false,
+ data: {fileFullPath: fileFullPath, categoryId: categoryId},
+ success: function(data) {
+ if(data.existFileYn == "Y") {
+ //location.href = "/common/commonDownload.do?fileName=" + fileName + "&categoryId=" + categoryId;
+ if(target == 'new'){
+ window.open(fileFullPath, '');
+ }else{
+ location.href = fileFullPath;
+ }
+
+ if(func) {
+ func(data);
+ }
+ } else {
+ alert("File does not exist.");
+ }
+ }
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonAllShareClickCount = function(fileFullPath, categoryId, func) {
+ var jsonData = {
+ url: "/common/ajaxCommonAllShareClickCountProc.do",
+ async: false,
+ data: {fileFullPath: fileFullPath, categoryId: categoryId},
+ success: function(data) {}
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.commonClickCount = function(categoryName, categoryId) {
+ var jsonData = {
+ url: "/common/ajaxCommonClickCountProc.do",
+ data: {categoryName: categoryName, categoryId: categoryId},
+ success: function(data) {}
+ }
+
+ $.SD.ajax.get(jsonData);
+}
+
+$.SD.getByteLen = function(str) {
+ var resultSize = 0;
+ if(str == null){
+ return 0;
+ }
+ for(var i=0; i<str.length; i++){
+ var c = escape(str.charAt(i));
+ if(c.length == 1){
+ resultSize ++;
+ } else if(c.indexOf("%u") != -1) {
+ resultSize += 2;
+ } else if(c.indexOf("%") != -1) {
+ resultSize += c.length/3;
+ }
+ }
+ return resultSize;
+}
+
+$.SD.cutByte = function(str, limit) {
+ var tempStr = new String(str);
+ var len = 0;
+ for ( var i = 0; i < str.length; i++) {
+ var c = escape(str.charAt(i));
+ if (c.length == 1)
+ len++;
+ else if (c.indexOf("%u") != -1)
+ len += 2;
+ else if (c.indexOf("%") != -1)
+ len += c.length / 3;
+ if (len > limit) {
+ tempStr = tempStr.substring(0, i);
+ break;
+ }
+ }
+ return tempStr;
+}
+
+$.SD.pagination = {alt:{first:"",prev:"",next:"",last:""}};
+
+/* ---------------- ADD JQUERY CUSTOM METHOD -------------------------------- */
+
+/**
+ * Method pagination
+ * */
+$.fn.frontPagination = function (pageInfo, func) {
+ var info = {
+ prev : 1
+ ,first : 1
+ ,begin : pageInfo.begin - 0
+ ,current : pageInfo.current - 0
+ ,end : pageInfo.end - 0
+ ,last : pageInfo.last - 0
+ ,next : 1
+ },
+ target = this,
+ page = $('<span class="page"></span>'),
+ prev = "",
+ next = "",
+ i = 0,
+ n = 0;
+
+ info.begin = info.begin < 1 ? 1 : info.begin;
+ info.current = info.current < 1 ? 1 : info.current;
+ info.end = info.end < 1 ? 1 : info.end;
+ info.last = info.last < 1 ? 1 : info.last;
+
+ info.prev = info.current - 1;
+ info.next = info.current + 1;
+
+ target.addClass("pageNumber");
+ target.addClass("mt20");
+ target.children().remove();
+
+ if (info.first < info.begin) {
+ target.append($('<a href="#" class="first"><img src="/images/common/ico/ico_arr_first.gif" alt="'+$.SD.pagination.alt.first+'" /></a>').bind('click', function(e) {
+ e.preventDefault();
+ func(info.first);
+ }));
+ }
+
+ if (info.prev >= info.first) {
+ target.append($('<a href="#" class="prev"><img src="/images/common/ico/ico_arr_prev.gif" alt="'+$.SD.pagination.alt.prev+'"/></a>').bind('click', function(e) {
+ e.preventDefault();
+ func(info.prev);
+ }));
+ }
+
+ i = info.begin;
+ n = info.end;
+ for(; i <= n; i++) {
+ if (i === info.current) {
+ page.append('<strong>'+i+'</strong>');
+ } else {
+ (function(index){
+ page.append($('<a href="#">'+index+'</a>').bind('click', function(e){
+ e.preventDefault();
+ func(index);
+ }));
+ })(i);
+ }
+ }
+
+ target.append(page);
+
+ if (info.next <= info.last) {
+ target.append($('<a href="#" class="next"><img src="/images/common/ico/ico_arr_next.gif" alt="'+$.SD.pagination.alt.next+'" /></a>').bind('click', function(e) {
+ e.preventDefault();
+ func(info.next);
+ }));
+ }
+
+ if (info.last > info.end) {
+ target.append($('<a href="#" class="last"><img src="/images/common/ico/ico_arr_last.gif" alt="'+$.SD.pagination.alt.last+'" /></a>').bind('click', function(e) {
+ e.preventDefault();
+ func(info.last);
+ }));
+ }
+};
+
+/**
+ * Method : popup Show Hide
+ */
+$.fn.popupShow = function(options) {
+ var opts = $.extend({}, $.fn.popupShow.defaults, options);
+
+ if($("body div#" + opts.maskId).size() == 0) {
+ $("body").append("<div id='" + opts.maskId + "'></div>");
+ $("#" + opts.maskId).css({
+ "position" : "absolute",
+ "left" : "0",
+ "top" : "0",
+ "z-index" : "9000",
+ "background-color" : "#000",
+ "display" : "none"
+ });
+ }
+
+ var mask_layer = $("#" + opts.maskId);
+ var popup_layer = $(this);
+
+ popup_layer.css("z-index", "9999");
+
+ var maskHeight = $(document).height();
+ var maskWidth = $(window).width();
+
+ mask_layer.css({'width':maskWidth,'height':maskHeight});
+
+ mask_layer.fadeIn(opts.fadeSec);
+ mask_layer.fadeTo(opts.speed, opts.fadeLow);
+
+ var winH = $(window).height();
+ var winW = $(window).width();
+
+ popup_layer.css('top', $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+ popup_layer.css('left', $(window).scrollLeft() + winW/2 - popup_layer.width()/2);
+
+ popup_layer.fadeIn(opts.fadeSec);
+
+ var init_num = 0;
+
+ if(init_num == 0) {
+ mask_layer.click(function() {
+ $(this).hide();
+ popup_layer.hide();
+ });
+
+
+ $("#" + opts.closeId).click( function(e) {
+ e.preventDefault();
+ popup_layer.popupHidden(opts.maskId);
+ });
+
+
+ $(window).resize( function() {
+ var maskHeight = $(document).height();
+ var maskWidth = $(window).width();
+ var winH = $(window).height();
+ var winW = $(window).width();
+
+ mask_layer.css({'width':maskWidth,'height':maskHeight});
+
+ popup_layer.css('top', $(window).scrollTop() + winH/2 - popup_layer.height()/2);
+ popup_layer.css('left', $(window).scrollLeft() + winW/2 - popup_layer.width()/2);
+ });
+
+ init_num++;
+ }
+};
+
+$.fn.popupHidden = function(maskId) {
+ var id = "#";
+
+ if(maskId) {
+ id = id + maskId;
+ } else {
+ id = id + $.fn.popupShow.defaults.maskId;
+ }
+
+ $(id).hide();
+ $(this).hide();
+};
+
+
+$.fn.popupShow.defaults = {
+ speed : "slow",
+ fadeLow : 0.8,
+ fadeSec : 100,
+ maskId : "mask",
+ popupId : "layer-pop",
+ closeId : "layer-pop-close"
+};
+
+/**
+ * Method : validate File Ext
+ */
+$.fn.isNotValidateFileExt = function(imgExts) {
+ imgExts = imgExts || {txt:true, xls:true, xlsx:true, doc:true, docx:true, ppt:true, pptx:true, pdf:true, bmp:true,gif:true, jpeg:true, jpg:true, png:true, zip:true, swf:true};
+ var that = this;
+ var target = null;
+
+ that.each(function (i, item) {
+ var filePath = $(item).attr('type') === 'file' ? $(item).val() : '';
+ if (filePath != "") {
+ var fileExt = filePath.substring(filePath.lastIndexOf(".") + 1).toLowerCase();
+ if (!imgExts[fileExt]) {
+ target = item;
+ return false;
+ }
+ }
+ });
+
+ return target;
+}
+
+/**
+ * Method : validate SD20 Password
+ */
+$.validator.addMethod("isSD20Pwd", function(value, element) {
+ return this.optional(element)
+ || $.SD.isSD20Pwd(value);
+}, "비밀번호를 다시 입력해 주세요.");
+
+$.SD.alterParent = function(options, event) {
+ var label = $(this).data('label');
+
+ /*
+ if (event && event.type === 'focusin') {
+ label.hide();
+ } else if (event && event.type === 'focusout') {
+ label.css('opacity', options.placeholderOpacity);
+ }
+ */
+
+ if (event && event.type !== 'keydown') {
+ toggleLabel(this, label);
+ } else {
+ // Use timeout to catch val() just after the key is pressed
+ // Using keyup is too slow.
+ (function(input) {
+ setTimeout(function() {
+ toggleLabel(input, label);
+ }, 0);
+ })(this);
+ }
+
+ if (event && event.type === 'focusin') {
+ label.hide();
+ }
+ };
+
+ var toggleLabel = function(input, label) {
+ if ($(input).val()) {
+ label.hide();
+ } else {
+ label.show();
+ }
+ };
+
+ $.fn.stickyPlaceholders = function(options) {
+ var defaults = {
+ wrapperClass: 'sticky-placeholder-wrapper',
+ wrapperDisplay: 'block',
+ labelClass: 'sticky-placeholder-label',
+ placeholderAttr: 'placeholder',
+ dataAttr: 'data-sticky-placeholder',
+ placeholderColor: '#000',
+ placeholderOpacity: 0.5,
+ placeholderFocusOpacity: 0.25
+ };
+ options = $.extend(defaults, options);
+
+ return this.each(function() {
+ var input = $(this),
+ placeholder = input.attr(options.placeholderAttr),
+ wrapper = $(this).wrap('<span class="' + options.wrapperClass + '" />').parent().css({'position':'relative', 'display':options.wrapperDisplay}),
+ label = $('<label class="' + options.labelClass + '" for="' + input.attr('id') + '">' + placeholder + '</label>').appendTo(wrapper),
+ labelStyle;
+
+ // store a reference to each input's label
+ input.data('label', label);
+
+ // remove the placeholder attribute to avoid conflcits
+ input.removeAttr('placeholder');
+
+ // If the dataAttr is set and it's not equal to the placeholderAttr
+ if ( options.dataAttr && options.placeholderAttr !== options.dataAttr ) {
+ input.attr('data-sticky-placeholder', placeholder);
+ }
+
+ labelStyle = {
+ 'color': options.placeholderColor,
+ 'cursor': 'text',
+ 'font-family': input.css('font-family'),
+ 'font-weight': input.css('font-weight'),
+ 'font-size': input.css('font-size'),
+ 'left': parseInt(input.css('border-left-width'), 10) + parseInt(input.css('margin-left'), 10),
+ 'line-height': this.currentStyle ? this.currentStyle.lineHeight : input.css('line-height'),
+ // fix for an IE/jQuery bug returning 1px when the line-height doesn't have a unit: http://bugs.jquery.com/ticket/2671
+ 'opacity': options.placeholderOpacity,
+ 'padding-left': input.css('padding-left'),
+ 'padding-top': input.css('padding-top'),
+ 'position': 'absolute',
+ 'text-transform': input.css('text-transform'),
+ 'top': parseInt(input.css('border-top-width'), 10) + parseInt(input.css('margin-top'), 10)
+ };
+ label.css(labelStyle);
+
+ // hide the placeholder if the input already has a value
+ if (input.val()) {
+ label.hide();
+ }
+
+ $(this).bind('keydown input focusin focusout', function(event) {
+ $.SD.alterParent.call(this, options, event);
+ });
+
+ // prevent click/dblclick from selecting the label text
+ label.bind('mousedown', function(e) {
+ e.preventDefault();
+ });
+
+ // call alterParent initially without an event to set up the wrapper elements
+ $.SD.alterParent.call(this, options);
+ });
+ };
+
+$.SD.setInputFileKeyEvent = function(file_id, after_id) {
+ $("#" + file_id).on("keydown", function(e) {
+ var that = $(this);
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which === 9) {
+ e.preventDefault();
+ setTimeout(function() {
+ $("#" + after_id).focus();
+ }, 1);
+ }
+ });
+
+ $("#" + after_id).on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ e.preventDefault();
+ setTimeout(function() {
+ $("#" + file_id).focus();
+ }, 1);
+ }
+ });
+}
+
+$.SD.closeWP = function() {
+ var Browser = navigator.appName;
+ var indexB = Browser.indexOf('Explorer');
+ if (indexB > 0) {
+ var indexV = navigator.userAgent.indexOf('MSIE') + 5;
+ var Version = navigator.userAgent.substring(indexV, indexV + 1);
+ window.opener.focus();
+ if (Version >= 7) {
+ window.open('', '_self', '');
+ window.close();
+ }
+ else if (Version == 6) {
+ window.opener = null;
+ window.close();
+ }
+ else {
+ window.opener = '';
+ window.close();
+ }
+ }
+ else {
+ window.close();
+ }
+}
+
+$.SD.profileFacebook = function() {
+ location.replace("http://facebook.com/profile.php");
+}
+
+/* ------------------------------ END --------------------------------------- */
+window.$SD = $.SD;
+
+})(jQuery);
+
+
+$(document).ready(function(){
+//document rady Start #########################################
+
+// Top menu action Start
+var onClickChangeEn = function(e){ e.preventDefault(); $("#langCode").val("en"); $("#chLanguage").submit(); };
+var onClickChangeZh = function(e){ e.preventDefault(); $("#langCode").val("zh"); $("#chLanguage").submit(); };
+var onClickChangeKo = function(e){ e.preventDefault(); $("#langCode").val("ko"); $("#chLanguage").submit(); };
+var onClickSignOut = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/mbr.logout.do"); $("#signForm").submit(); };
+var onClickSignUp = function(e){ e.preventDefault(); $("#signForm").attr("action", "/signup"); $("#signForm").submit(); };
+var onClickSignIn = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signIn.do"); $("#signForm").submit(); };
+var onClickUserInfoUpdate = function(e){ e.preventDefault(); $("#signForm").attr("action", "/mypage/myforum/list.do"); $("#signForm").submit(); };
+var onClickSignOff = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+var onClickMyProfileUpdate = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/update.profile.do"); $("#signForm").submit(); };
+var onClickDeleteAccount = function(e){ e.preventDefault(); $("#signForm").attr("action", "/sa/signOff.do"); $("#signForm").submit(); };
+
+$("#wrapper").on('click', 'a', function(e) {
+ switch($(this).attr('id')) {
+ case 'changeEn': onClickChangeEn(e); break;
+ case 'changeZh': onClickChangeZh(e); break;
+ case 'changeKo': onClickChangeKo(e); break;
+ case 'signOut': onClickSignOut(e); break;
+ case 'signUp': onClickSignUp(e); break;
+ case 'signIn': onClickSignIn(e); break;
+ case 'userInfoUpdate': onClickUserInfoUpdate(e); break;
+ case 'signOff': onClickSignOff(e); break;
+ case 'myProfileUpdate' : onClickMyProfileUpdate(e); break;
+ case 'deleteAccount' : onClickDeleteAccount(e); break;
+ }
+});
+
+//Top menu action End
+
+
+$("#sendFacebook, #sendTwitter").click(function(e) {
+ e.preventDefault();
+ var $this = $(this);
+
+ if(typeof(copyUrl) != "undefined" && typeof(boardTitle) != "undefined") {
+ var sns = $this.attr("id").substring(4).toLowerCase();
+ switch(sns) {
+ case "facebook" :
+ var imgUrl = "http://img-developer.samsung.com/images/common/logo_200x200.gif";
+ $("div.content img").each(function() {
+ var that = $(this);
+ if(that.width() > 200 && that.height() > 200) {
+ imgUrl = that.attr("src");
+ return false;
+ }
+ });
+
+ var data = {
+ app_id : $("#sd_appId").text(),
+ link : copyUrl,
+ picture : imgUrl,
+ name : $("title").text(),
+ caption : "developer.samsung.com",
+ description : $("div.content p").eq(0).text(),
+ redirectUri : "http://" + location.host + "/board/sns.do"
+ };
+ var url = "https://www.facebook.com/dialog/feed?" ;
+ url += "app_id=" + data.app_id + "&" ;
+ url += "link=" + data.link + "&" ;
+ url += "picture=" + data.picture + "&" ;
+ url += "name=" + encodeURIComponent(data.name) + "&" ;
+ url += "caption=" + encodeURIComponent(data.caption) + "&" ;
+ url += "description=" + encodeURIComponent(data.description) + "&" ;
+ url += "redirect_uri=" + data.redirectUri ;
+ sendSNS(sns, url, 850, 600);
+ break;
+ case "twitter" :
+ sendSNS(sns, "http://twitter.com/home?status=" + encodeURIComponent(boardTitle) + " " + encodeURIComponent(copyUrl), 600, 400);
+ break;
+ }
+ }
+
+ function sendSNS(sns, url, iWidth, iHeight) {
+ var popObj = { url : url
+ , width : iWidth
+ , height: iHeight
+ , target: sns
+ , scrollbars: "yes"
+ , resizeable: "yes"};
+
+ $SD.popupCenter(popObj);
+ }
+})
+
+//document rady End #########################################
+ });
+
+;(function(){
+ window.deviceImageError = function(el) {
+ var noImage = noImage || '/images/common/device_details_noimage.gif';
+ if (el.src === noImage)
+ return;
+ el.src = noImage;
+ };
+})();
+
+function commonDownload(fileName, categoryId){
+ if (fileName == "" || categoryId == ""){
+ alert("필요한 인자값을 확인해주세요!!!!")
+ return;
+ }else{
+ $SD.commonDownload(fileName, categoryId, function(data) {
+ });
+ }
+}
+
+function commonDownloadLog(fileFullPath, categoryId){
+ if (fileFullPath == "" || categoryId == ""){
+ alert("필요한 인자값을 확인해주세요!!")
+ return;
+ }else{
+ $SD.commonDownloadLog(fileFullPath, categoryId, function(data) {
+ });
+ }
+}
+
+function commonDownloadLogTarget(fileFullPath, categoryId, target){
+ if (fileFullPath == "" || categoryId == ""){
+ alert("필요한 인자값을 확인해주세요!!")
+ return;
+ }else{
+ $SD.commonDownloadLogTarget(fileFullPath, categoryId, target, function(data) {
+ });
+ }
+}
+
+function commonAllShareClickCount(fileFullPath, categoryId){
+ if (fileFullPath == "" || categoryId == ""){
+ alert("필요한 인자값을 확인해주세요!!")
+ return;
+ }else{
+ $SD.commonAllShareClickCount(fileFullPath, categoryId, function(data) {
+ });
+ }
+}
+
+/*
+function layer_view(id){
+
+ var $layer = $('#'+id);
+ var $down = $('.license-layer').find('a#down');
+
+ $layer.show();
+ $layer.find('.close, #down').click(function(){
+ $layer.hide();
+ });
+
+ function countChecked() {
+ $(":checkbox").is(':checked') ? $down.show() : $down.hide()
+ }
+
+ $(":checkbox").click(countChecked);
+}
+*/
--- /dev/null
+/* org: 'http://www.JSON.org', copyright: '(c)2005 JSON.org', license: 'http://www.crockford.com/JSON/license.html' */
+(function (wn) {var JSON={stringify:function stringify(c){var a,d,f,b='',e;switch(typeof c){case'object':if(c){if(c.constructor==Array){for(d=0;d<c.length;++d){e=stringify(c[d]);if(b){b+=','}b+=e}return'['+b+']'}else if(typeof c.toString!='undefined'){for(d in c){e=stringify(c[d]);if(typeof e!='function'){if(b){b+=','}b+=stringify(d)+':'+e}}return'{'+b+'}'}}return'null';case'number':return isFinite(c)?String(c):'null';case'string':f=c.length;b='"';for(d=0;d<f;d+=1){a=c.charAt(d);if(a>=' '){if(a=='\\'||a=='"'){b+='\\'}b+=a}else{switch(a){case'\b':b+='\\b';break;case'\f':b+='\\f';break;case'\n':b+='\\n';break;case'\r':b+='\\r';break;case'\t':b+='\\t';break;default:a=a.charCodeAt();b+='\\u00'+Math.floor(a/16).toString(16)+(a%16).toString(16)}}}return b+'"';case'boolean':return String(c);case'function':return c.toString();default:return'null'}},parse:function(c){var a=c;if(a.substr(0,9)=="while(1);"){a=a.substr(9)}if(a.substr(0,2)=="/*"){a=a.substr(2,a.length-4)}return eval('('+a+')')}};wn.JSON = wn.JSON || JSON ;})(window);
+
+
+/*! jQuery v1.7.1 jquery.com | jquery.org/license */
+(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!ck[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){cl||(cl=c.createElement("iframe"),cl.frameBorder=cl.width=cl.height=0),b.appendChild(cl);if(!cm||!cl.createElement)cm=(cl.contentWindow||cl.contentDocument).document,cm.write((c.compatMode==="CSS1Compat"?"<!doctype html>":"")+"<html><body>"),cm.close();d=cm.createElement(a),cm.body.appendChild(d),e=f.css(d,"display"),b.removeChild(cl)}ck[a]=e}return ck[a]}function cu(a,b){var c={};f.each(cq.concat.apply([],cq.slice(0,b)),function(){c[this]=a});return c}function ct(){cr=b}function cs(){setTimeout(ct,0);return cr=f.now()}function cj(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ci(){try{return new a.XMLHttpRequest}catch(b){}}function cc(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function cb(a,c,d){var e=a.contents,f=a.dataTypes,g=a.responseFields,h,i,j,k;for(i in g)i in d&&(c[g[i]]=d[i]);while(f[0]==="*")f.shift(),h===b&&(h=a.mimeType||c.getResponseHeader("content-type"));if(h)for(i in e)if(e[i]&&e[i].test(h)){f.unshift(i);break}if(f[0]in d)j=f[0];else{for(i in d){if(!f[0]||a.converters[i+" "+f[0]]){j=i;break}k||(k=i)}j=j||k}if(j){j!==f[0]&&f.unshift(j);return d[j]}}function ca(a,b,c,d){if(f.isArray(b))f.each(b,function(b,e){c||bE.test(a)?d(a,e):ca(a+"["+(typeof e=="object"||f.isArray(e)?b:"")+"]",e,c,d)});else if(!c&&b!=null&&typeof b=="object")for(var e in b)ca(a+"["+e+"]",b[e],c,d);else d(a,b)}function b_(a,c){var d,e,g=f.ajaxSettings.flatOptions||{};for(d in c)c[d]!==b&&((g[d]?a:e||(e={}))[d]=c[d]);e&&f.extend(!0,a,e)}function b$(a,c,d,e,f,g){f=f||c.dataTypes[0],g=g||{},g[f]=!0;var h=a[f],i=0,j=h?h.length:0,k=a===bT,l;for(;i<j&&(k||!l);i++)l=h[i](c,d,e),typeof l=="string"&&(!k||g[l]?l=b:(c.dataTypes.unshift(l),l=b$(a,c,d,e,l,g)));(k||!l)&&!g["*"]&&(l=b$(a,c,d,e,"*",g));return l}function bZ(a){return function(b,c){typeof b!="string"&&(c=b,b="*");if(f.isFunction(c)){var d=b.toLowerCase().split(bP),e=0,g=d.length,h,i,j;for(;e<g;e++)h=d[e],j=/^\+/.test(h),j&&(h=h.substr(1)||"*"),i=a[h]=a[h]||[],i[j?"unshift":"push"](c)}}}function bC(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=b==="width"?bx:by,g=0,h=e.length;if(d>0){if(c!=="border")for(;g<h;g++)c||(d-=parseFloat(f.css(a,"padding"+e[g]))||0),c==="margin"?d+=parseFloat(f.css(a,c+e[g]))||0:d-=parseFloat(f.css(a,"border"+e[g]+"Width"))||0;return d+"px"}d=bz(a,b,b);if(d<0||d==null)d=a.style[b]||0;d=parseFloat(d)||0;if(c)for(;g<h;g++)d+=parseFloat(f.css(a,"padding"+e[g]))||0,c!=="padding"&&(d+=parseFloat(f.css(a,"border"+e[g]+"Width"))||0),c==="margin"&&(d+=parseFloat(f.css(a,c+e[g]))||0);return d+"px"}function bp(a,b){b.src?f.ajax({url:b.src,async:!1,dataType:"script"}):f.globalEval((b.text||b.textContent||b.innerHTML||"").replace(bf,"/*$0*/")),b.parentNode&&b.parentNode.removeChild(b)}function bo(a){var b=c.createElement("div");bh.appendChild(b),b.innerHTML=a.outerHTML;return b.firstChild}function bn(a){var b=(a.nodeName||"").toLowerCase();b==="input"?bm(a):b!=="script"&&typeof a.getElementsByTagName!="undefined"&&f.grep(a.getElementsByTagName("input"),bm)}function bm(a){if(a.type==="checkbox"||a.type==="radio")a.defaultChecked=a.checked}function bl(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bk(a,b){var c;if(b.nodeType===1){b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase();if(c==="object")b.outerHTML=a.outerHTML;else if(c!=="input"||a.type!=="checkbox"&&a.type!=="radio"){if(c==="option")b.selected=a.defaultSelected;else if(c==="input"||c==="textarea")b.defaultValue=a.defaultValue}else a.checked&&(b.defaultChecked=b.checked=a.checked),b.value!==a.value&&(b.value=a.value);b.removeAttribute(f.expando)}}function bj(a,b){if(b.nodeType===1&&!!f.hasData(a)){var c,d,e,g=f._data(a),h=f._data(b,g),i=g.events;if(i){delete h.handle,h.events={};for(c in i)for(d=0,e=i[c].length;d<e;d++)f.event.add(b,c+(i[c][d].namespace?".":"")+i[c][d].namespace,i[c][d],i[c][d].data)}h.data&&(h.data=f.extend({},h.data))}}function bi(a,b){return f.nodeName(a,"table")?a.getElementsByTagName("tbody")[0]||a.appendChild(a.ownerDocument.createElement("tbody")):a}function U(a){var b=V.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function T(a,b,c){b=b||0;if(f.isFunction(b))return f.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return f.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=f.grep(a,function(a){return a.nodeType===1});if(O.test(b))return f.filter(b,d,!c);b=f.filter(b,d)}return f.grep(a,function(a,d){return f.inArray(a,b)>=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?parseFloat(d):j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c<d;c++)b[a[c]]=!0;return b}var c=a.document,d=a.navigator,e=a.location,f=function(){function J(){if(!e.isReady){try{c.documentElement.doScroll("left")}catch(a){setTimeout(J,1);return}e.ready()}}var e=function(a,b){return new e.fn.init(a,b,h)},f=a.jQuery,g=a.$,h,i=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.1",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j<k;j++)if((a=arguments[j])!=null)for(c in a){d=i[c],f=a[c];if(i===f)continue;l&&f&&(e.isPlainObject(f)||(g=e.isArray(f)))?(g?(g=!1,h=d&&e.isArray(d)?d:[]):h=d&&e.isPlainObject(d)?d:{},i[c]=e.extend(l,h,f)):f!==b&&(i[c]=f)}return i},e.extend({noConflict:function(b){a.$===e&&(a.$=g),b&&a.jQuery===e&&(a.jQuery=f);return e},isReady:!1,readyWait:1,holdReady:function(a){a?e.readyWait++:e.ready(!0)},ready:function(a){if(a===!0&&!--e.readyWait||a!==!0&&!e.isReady){if(!c.body)return setTimeout(e.ready,1);e.isReady=!0;if(a!==!0&&--e.readyWait>0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a&&typeof a=="object"&&"setInterval"in a},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g<h;)if(c.apply(a[g++],d)===!1)break}else if(i){for(f in a)if(c.call(a[f],f,a[f])===!1)break}else for(;g<h;)if(c.call(a[g],g,a[g++])===!1)break;return a},trim:G?function(a){return a==null?"":G.call(a)}:function(a){return a==null?"":(a+"").replace(k,"").replace(l,"")},makeArray:function(a,b){var c=b||[];if(a!=null){var d=e.type(a);a.length==null||d==="string"||d==="function"||d==="regexp"||e.isWindow(a)?E.call(c,a):e.merge(c,a)}return c},inArray:function(a,b,c){var d;if(b){if(H)return H.call(b,a,c);d=b.length,c=c?c<0?Math.max(0,d+c):c:0;for(;c<d;c++)if(c in b&&b[c]===a)return c}return-1},merge:function(a,c){var d=a.length,e=0;if(typeof c.length=="number")for(var f=c.length;e<f;e++)a[d++]=c[e];else while(c[e]!==b)a[d++]=c[e++];a.length=d;return a},grep:function(a,b,c){var d=[],e;c=!!c;for(var f=0,g=a.length;f<g;f++)e=!!b(a[f],f),c!==e&&d.push(a[f]);return d},map:function(a,c,d){var f,g,h=[],i=0,j=a.length,k=a instanceof e||j!==b&&typeof j=="number"&&(j>0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i<j;i++)f=c(a[i],i,d),f!=null&&(h[h.length]=f);else for(g in a)f=c(a[g],g,d),f!=null&&(h[h.length]=f);return h.concat.apply([],h)},guid:1,proxy:function(a,c){if(typeof c=="string"){var d=a[c];c=a,a=d}if(!e.isFunction(a))return b;var f=F.call(arguments,2),g=function(){return a.apply(c,f.concat(F.call(arguments)))};g.guid=a.guid=a.guid||g.guid||e.guid++;return g},access:function(a,c,d,f,g,h){var i=a.length;if(typeof c=="object"){for(var j in c)e.access(a,j,c[j],f,g,d);return a}if(d!==b){f=!h&&f&&e.isFunction(d);for(var k=0;k<i;k++)g(a[k],c,f?d.call(a[k],k,g(a[k],c)):d,h);return a}return i?g(a[0],c):b},now:function(){return(new Date).getTime()},uaMatch:function(a){a=a.toLowerCase();var b=r.exec(a)||s.exec(a)||t.exec(a)||a.indexOf("compatible")<0&&u.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}},sub:function(){function a(b,c){return new a.fn.init(b,c)}e.extend(!0,a,this),a.superclass=this,a.fn=a.prototype=this(),a.fn.constructor=a,a.sub=this.sub,a.fn.init=function(d,f){f&&f instanceof e&&!(f instanceof a)&&(f=a(f));return e.fn.init.call(this,d,f,b)},a.fn.init.prototype=a.fn;var b=a(c);return a},browser:{}}),e.each("Boolean Number String Function Array Date RegExp Object".split(" "),function(a,b){I["[object "+b+"]"]=b.toLowerCase()}),z=e.uaMatch(y),z.browser&&(e.browser[z.browser]=!0,e.browser.version=z.version),e.browser.webkit&&(e.browser.safari=!0),j.test(" ")&&(k=/^[\s\xA0]+/,l=/[\s\xA0]+$/),h=e(c),c.addEventListener?B=function(){c.removeEventListener("DOMContentLoaded",B,!1),e.ready()}:c.attachEvent&&(B=function(){c.readyState==="complete"&&(c.detachEvent("onreadystatechange",B),e.ready())});return e}(),g={};f.Callbacks=function(a){a=a?g[a]||h(a):{};var c=[],d=[],e,i,j,k,l,m=function(b){var d,e,g,h,i;for(d=0,e=b.length;d<e;d++)g=b[d],h=f.type(g),h==="array"?m(g):h==="function"&&(!a.unique||!o.has(g))&&c.push(g)},n=function(b,f){f=f||[],e=!a.memory||[b,f],i=!0,l=j||0,j=0,k=c.length;for(;c&&l<k;l++)if(c[l].apply(b,f)===!1&&a.stopOnFalse){e=!0;break}i=!1,c&&(a.once?e===!0?o.disable():c=[]:d&&d.length&&(e=d.shift(),o.fireWith(e[0],e[1])))},o={add:function(){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this},remove:function(){if(c){var b=arguments,d=0,e=b.length;for(;d<e;d++)for(var f=0;f<c.length;f++)if(b[d]===c[f]){i&&f<=k&&(k--,f<=l&&l--),c.splice(f--,1);if(a.unique)break}}return this},has:function(a){if(c){var b=0,d=c.length;for(;b<d;b++)if(a===c[b])return!0}return!1},empty:function(){c=[];return this},disable:function(){c=d=e=b;return this},disabled:function(){return!c},lock:function(){d=b,(!e||e===!0)&&o.disable();return this},locked:function(){return!d},fireWith:function(b,c){d&&(i?a.once||d.push([b,c]):(!a.once||!e)&&n(b,c));return this},fire:function(){o.fireWith(this,arguments);return this},fired:function(){return!!e}};return o};var i=[].slice;f.extend({Deferred:function(a){var b=f.Callbacks("once memory"),c=f.Callbacks("once memory"),d=f.Callbacks("memory"),e="pending",g={resolve:b,reject:c,notify:d},h={done:b.add,fail:c.add,progress:d.add,state:function(){return e},isResolved:b.fired,isRejected:c.fired,then:function(a,b,c){i.done(a).fail(b).progress(c);return this},always:function(){i.done.apply(i,arguments).fail.apply(i,arguments);return this},pipe:function(a,b,c){return f.Deferred(function(d){f.each({done:[a,"resolve"],fail:[b,"reject"],progress:[c,"notify"]},function(a,b){var c=b[0],e=b[1],g;f.isFunction(c)?i[a](function(){g=c.apply(this,arguments),g&&f.isFunction(g.promise)?g.promise().then(d.resolve,d.reject,d.notify):d[e+"With"](this===i?d:this,[g])}):i[a](d[e])})}).promise()},promise:function(a){if(a==null)a=h;else for(var b in h)a[b]=h[b];return a}},i=h.promise({}),j;for(j in g)i[j]=g[j].fire,i[j+"With"]=g[j].fireWith;i.done(function(){e="resolved"},c.disable,d.lock).fail(function(){e="rejected"},b.disable,d.lock),a&&a.call(i,i);return i},when:function(a){function m(a){return function(b){e[a]=arguments.length>1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c<d;c++)b[c]&&b[c].promise&&f.isFunction(b[c].promise)?b[c].promise().then(l(c),j.reject,m(c)):--g;g||j.resolveWith(j,b)}else j!==a&&j.resolveWith(j,d?[a]:[]);return k}}),f.support=function(){var b,d,e,g,h,i,j,k,l,m,n,o,p,q=c.createElement("div"),r=c.documentElement;q.setAttribute("className","t"),q.innerHTML=" <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>",d=q.getElementsByTagName("*"),e=q.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=q.getElementsByTagName("input")[0],b={leadingWhitespace:q.firstChild.nodeType===3,tbody:!q.getElementsByTagName("tbody").length,htmlSerialize:!!q.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:q.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0},i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete q.test}catch(s){b.deleteExpando=!1}!q.addEventListener&&q.attachEvent&&q.fireEvent&&(q.attachEvent("onclick",function(){b.noCloneEvent=!1}),q.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),q.appendChild(i),k=c.createDocumentFragment(),k.appendChild(q.lastChild),b.checkClone=k.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,k.removeChild(i),k.appendChild(q),q.innerHTML="",a.getComputedStyle&&(j=c.createElement("div"),j.style.width="0",j.style.marginRight="0",q.style.width="2px",q.appendChild(j),b.reliableMarginRight=(parseInt((a.getComputedStyle(j,null)||{marginRight:0}).marginRight,10)||0)===0);if(q.attachEvent)for(o in{submit:1,change:1,focusin:1})n="on"+o,p=n in q,p||(q.setAttribute(n,"return;"),p=typeof q[n]=="function"),b[o+"Bubbles"]=p;k.removeChild(q),k=g=h=j=q=i=null,f(function(){var a,d,e,g,h,i,j,k,m,n,o,r=c.getElementsByTagName("body")[0];!r||(j=1,k="position:absolute;top:0;left:0;width:1px;height:1px;margin:0;",m="visibility:hidden;border:0;",n="style='"+k+"border:5px solid #000;padding:0;'",o="<div "+n+"><div></div></div>"+"<table "+n+" cellpadding='0' cellspacing='0'>"+"<tr><td></td></tr></table>",a=c.createElement("div"),a.style.cssText=m+"width:0;height:0;position:static;top:0;margin-top:"+j+"px",r.insertBefore(a,r.firstChild),q=c.createElement("div"),a.appendChild(q),q.innerHTML="<table><tr><td style='padding:0;border:0;display:none'></td><td>t</td></tr></table>",l=q.getElementsByTagName("td"),p=l[0].offsetHeight===0,l[0].style.display="",l[1].style.display="none",b.reliableHiddenOffsets=p&&l[0].offsetHeight===0,q.innerHTML="",q.style.width=q.style.paddingLeft="1px",f.boxModel=b.boxModel=q.offsetWidth===2,typeof q.style.zoom!="undefined"&&(q.style.display="inline",q.style.zoom=1,b.inlineBlockNeedsLayout=q.offsetWidth===2,q.style.display="",q.innerHTML="<div style='width:4px;'></div>",b.shrinkWrapBlocks=q.offsetWidth!==2),q.style.cssText=k+m,q.innerHTML=o,d=q.firstChild,e=d.firstChild,h=d.nextSibling.firstChild.firstChild,i={doesNotAddBorder:e.offsetTop!==5,doesAddBorderForTableAndCells:h.offsetTop===5},e.style.position="fixed",e.style.top="20px",i.fixedPosition=e.offsetTop===20||e.offsetTop===15,e.style.position=e.style.top="",d.style.overflow="hidden",d.style.position="relative",i.subtractsBorderForOverflowNotVisible=e.offsetTop===-5,i.doesNotIncludeMarginInBodyOffset=r.offsetTop!==j,r.removeChild(a),q=a=null,f.extend(b,i))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e<g;e++)delete d[b[e]];if(!(c?m:f.isEmptyObject)(d))return}}if(!c){delete j[k].data;if(!m(j[k]))return}f.support.deleteExpando||!j.setInterval?delete j[k]:j[k]=null,i&&(f.support.deleteExpando?delete a[h]:a.removeAttribute?a.removeAttribute(h):a[h]=null)}},_data:function(a,b,c){return f.data(a,b,c,!0)},acceptData:function(a){if(a.nodeName){var b=f.noData[a.nodeName.toLowerCase()];if(b)return b!==!0&&a.getAttribute("classid")===b}return!0}}),f.fn.extend({data:function(a,c){var d,e,g,h=null;if(typeof a=="undefined"){if(this.length){h=f.data(this[0]);if(this[0].nodeType===1&&!f._data(this[0],"parsedAttrs")){e=this[0].attributes;for(var i=0,j=e.length;i<j;i++)g=e[i].name,g.indexOf("data-")===0&&(g=f.camelCase(g.substring(5)),l(this[0],g,h[g]));f._data(this[0],"parsedAttrs",!0)}}return h}if(typeof a=="object")return this.each(function(){f.data(this,a)});d=a.split("."),d[1]=d[1]?"."+d[1]:"";if(c===b){h=this.triggerHandler("getData"+d[1]+"!",[d[0]]),h===b&&this.length&&(h=f.data(this[0],a),h=l(this[0],a,h));return h===b&&d[1]?this.data(d[0]):h}return this.each(function(){var b=f(this),e=[d[0],c];b.triggerHandler("setData"+d[1]+"!",e),f.data(this,a,c),b.triggerHandler("changeData"+d[1]+"!",e)})},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){typeof a!="string"&&(c=a,a="fx");if(c===b)return f.queue(this[0],a);return this.each(function(){var b=f.queue(this,a,c);a==="fx"&&b[0]!=="inprogress"&&f.dequeue(this,a)})},dequeue:function(a){return this.each(function(){f.dequeue(this,a)})},delay:function(a,b){a=f.fx?f.fx.speeds[a]||a:a,b=b||"fx";return this.queue(b,function(b,c){var d=setTimeout(b,a);c.stop=function(){clearTimeout(d)}})},clearQueue:function(a){return this.queue(a||"fx",[])},promise:function(a,c){function m(){--h||d.resolveWith(e,[e])}typeof a!="string"&&(c=a,a=b),a=a||"fx";var d=f.Deferred(),e=this,g=e.length,h=1,i=a+"defer",j=a+"queue",k=a+"mark",l;while(g--)if(l=f.data(e[g],i,b,!0)||(f.data(e[g],j,b,!0)||f.data(e[g],k,b,!0))&&f.data(e[g],i,f.Callbacks("once memory"),!0))h++,l.add(m);m();return d.promise()}});var o=/[\n\t\r]/g,p=/\s+/,q=/\r/g,r=/^(?:button|input)$/i,s=/^(?:button|input|object|select|textarea)$/i,t=/^a(?:rea)?$/i,u=/^(?:autofocus|autoplay|async|checked|controls|defer|disabled|hidden|loop|multiple|open|readonly|required|scoped|selected)$/i,v=f.support.getSetAttribute,w,x,y;f.fn.extend({attr:function(a,b){return f.access(this,a,b,!0,f.attr)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,a,b,!0,f.prop)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c<d;c++){e=this[c];if(e.nodeType===1)if(!e.className&&b.length===1)e.className=a;else{g=" "+e.className+" ";for(h=0,i=b.length;h<i;h++)~g.indexOf(" "+b[h]+" ")||(g+=b[h]+" ");e.className=f.trim(g)}}}return this},removeClass:function(a){var c,d,e,g,h,i,j;if(f.isFunction(a))return this.each(function(b){f(this).removeClass(a.call(this,b,this.className))});if(a&&typeof a=="string"||a===b){c=(a||"").split(p);for(d=0,e=this.length;d<e;d++){g=this[d];if(g.nodeType===1&&g.className)if(a){h=(" "+g.className+" ").replace(o," ");for(i=0,j=c.length;i<j;i++)h=h.replace(" "+c[i]+" "," ");g.className=f.trim(h)}else g.className=""}}return this},toggleClass:function(a,b){var c=typeof a,d=typeof b=="boolean";if(f.isFunction(a))return this.each(function(c){f(this).toggleClass(a.call(this,c,this.className,b),b)});return this.each(function(){if(c==="string"){var e,g=0,h=f(this),i=b,j=a.split(p);while(e=j[g++])i=d?i:!h.hasClass(e),h[i?"addClass":"removeClass"](e)}else if(c==="undefined"||c==="boolean")this.className&&f._data(this,"__className__",this.className),this.className=this.className||a===!1?"":f._data(this,"__className__")||""})},hasClass:function(a){var b=" "+a+" ",c=0,d=this.length;for(;c<d;c++)if(this[c].nodeType===1&&(" "+this[c].className+" ").replace(o," ").indexOf(b)>-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.nodeName.toLowerCase()]||f.valHooks[this.type];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.nodeName.toLowerCase()]||f.valHooks[g.type];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c<d;c++){e=i[c];if(e.selected&&(f.support.optDisabled?!e.disabled:e.getAttribute("disabled")===null)&&(!e.parentNode.disabled||!f.nodeName(e.parentNode,"optgroup"))){b=f(e).val();if(j)return b;h.push(b)}}if(j&&!h.length&&i.length)return f(i[g]).val();return h},set:function(a,b){var c=f.makeArray(b);f(a).find("option").each(function(){this.selected=f.inArray(f(this).val(),c)>=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;h<g;h++)e=d[h],e&&(c=f.propFix[e]||e,f.attr(a,e,""),a.removeAttribute(v?e:c),u.test(e)&&c in a&&(a[c]=!1))}},attrHooks:{type:{set:function(a,b){if(r.test(a.nodeName)&&a.parentNode)f.error("type property can't be changed");else if(!f.support.radioValue&&b==="radio"&&f.nodeName(a,"input")){var c=a.value;a.setAttribute("type",b),c&&(a.value=c);return b}}},value:{get:function(a,b){if(w&&f.nodeName(a,"button"))return w.get(a,b);return b in a?a.value:null},set:function(a,b,c){if(w&&f.nodeName(a,"button"))return w.set(a,b,c);a.value=b}}},propFix:{tabindex:"tabIndex",readonly:"readOnly","for":"htmlFor","class":"className",maxlength:"maxLength",cellspacing:"cellSpacing",cellpadding:"cellPadding",rowspan:"rowSpan",colspan:"colSpan",usemap:"useMap",frameborder:"frameBorder",contenteditable:"contentEditable"},prop:function(a,c,d){var e,g,h,i=a.nodeType;if(!!a&&i!==3&&i!==8&&i!==2){h=i!==1||!f.isXMLDoc(a),h&&(c=f.propFix[c]||c,g=f.propHooks[c]);return d!==b?g&&"set"in g&&(e=g.set(a,d,c))!==b?e:a[c]=d:g&&"get"in g&&(e=g.get(a,c))!==null?e:a[c]}},propHooks:{tabIndex:{get:function(a){var c=a.getAttributeNode("tabindex");return c&&c.specified?parseInt(c.value,10):s.test(a.nodeName)||t.test(a.nodeName)&&a.href?0:b}}}}),f.attrHooks.tabindex=f.propHooks.tabIndex,x={get:function(a,c){var d,e=f.prop(a,c);return e===!0||typeof e!="boolean"&&(d=a.getAttributeNode(c))&&d.nodeValue!==!1?c.toLowerCase():b},set:function(a,b,c){var d;b===!1?f.removeAttr(a,c):(d=f.propFix[c]||c,d in a&&(a[d]=!0),a.setAttribute(c,c.toLowerCase()));return c}},v||(y={name:!0,id:!0},w=f.valHooks.button={get:function(a,c){var d;d=a.getAttributeNode(c);return d&&(y[c]?d.nodeValue!=="":d.specified)?d.nodeValue:b},set:function(a,b,d){var e=a.getAttributeNode(d);e||(e=c.createAttribute(d),a.setAttributeNode(e));return e.nodeValue=b+""}},f.attrHooks.tabindex.set=w.set,f.each(["width","height"],function(a,b){f.attrHooks[b]=f.extend(f.attrHooks[b],{set:function(a,c){if(c===""){a.setAttribute(b,"auto");return c}}})}),f.attrHooks.contenteditable={get:w.get,set:function(a,b,c){b===""&&(b="false"),w.set(a,b,c)}}),f.support.hrefNormalized||f.each(["href","src","width","height"],function(a,c){f.attrHooks[c]=f.extend(f.attrHooks[c],{get:function(a){var d=a.getAttribute(c,2);return d===null?b:d}})}),f.support.style||(f.attrHooks.style={get:function(a){return a.style.cssText.toLowerCase()||b},set:function(a,b){return a.style.cssText=""+b}}),f.support.optSelected||(f.propHooks.selected=f.extend(f.propHooks.selected,{get:function(a){var b=a.parentNode;b&&(b.selectedIndex,b.parentNode&&b.parentNode.selectedIndex);return null}})),f.support.enctype||(f.propFix.enctype="encoding"),f.support.checkOn||f.each(["radio","checkbox"],function(){f.valHooks[this]={get:function(a){return a.getAttribute("value")===null?"on":a.value}}}),f.each(["radio","checkbox"],function(){f.valHooks[this]=f.extend(f.valHooks[this],{set:function(a,b){if(f.isArray(b))return a.checked=f.inArray(f(a).val(),b)>=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/\bhover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function(a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};
+f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k<c.length;k++){l=A.exec(c[k])||[],m=l[1],n=(l[2]||"").split(".").sort(),s=f.event.special[m]||{},m=(g?s.delegateType:s.bindType)||m,s=f.event.special[m]||{},o=f.extend({type:m,origType:l[1],data:e,handler:d,guid:d.guid,selector:g,quick:G(g),namespace:n.join(".")},p),r=j[m];if(!r){r=j[m]=[],r.delegateCount=0;if(!s.setup||s.setup.call(a,e,n,i)===!1)a.addEventListener?a.addEventListener(m,i,!1):a.attachEvent&&a.attachEvent("on"+m,i)}s.add&&(s.add.call(a,o),o.handler.guid||(o.handler.guid=d.guid)),g?r.splice(r.delegateCount++,0,o):r.push(o),f.event.global[m]=!0}a=null}},global:{},remove:function(a,b,c,d,e){var g=f.hasData(a)&&f._data(a),h,i,j,k,l,m,n,o,p,q,r,s;if(!!g&&!!(o=g.events)){b=f.trim(I(b||"")).split(" ");for(h=0;h<b.length;h++){i=A.exec(b[h])||[],j=k=i[1],l=i[2];if(!j){for(j in o)f.event.remove(a,j+b[h],c,d,!0);continue}p=f.event.special[j]||{},j=(d?p.delegateType:p.bindType)||j,r=o[j]||[],m=r.length,l=l?new RegExp("(^|\\.)"+l.split(".").sort().join("\\.(?:.*\\.)?")+"(\\.|$)"):null;for(n=0;n<r.length;n++)s=r[n],(e||k===s.origType)&&(!c||c.guid===s.guid)&&(!l||l.test(s.namespace))&&(!d||d===s.selector||d==="**"&&s.selector)&&(r.splice(n--,1),s.selector&&r.delegateCount--,p.remove&&p.remove.call(a,s));r.length===0&&m!==r.length&&((!p.teardown||p.teardown.call(a,l)===!1)&&f.removeEvent(a,j,g.handle),delete o[j])}f.isEmptyObject(o)&&(q=g.handle,q&&(q.elem=null),f.removeData(a,["events","handle"],!0))}},customEvent:{getData:!0,setData:!0,changeData:!0},trigger:function(c,d,e,g){if(!e||e.nodeType!==3&&e.nodeType!==8){var h=c.type||c,i=[],j,k,l,m,n,o,p,q,r,s;if(E.test(h+f.event.triggered))return;h.indexOf("!")>=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;l<r.length&&!c.isPropagationStopped();l++)m=r[l][0],c.type=r[l][1],q=(f._data(m,"events")||{})[c.type]&&f._data(m,"handle"),q&&q.apply(m,d),q=o&&m[o],q&&f.acceptData(m)&&q.apply(m,d)===!1&&c.preventDefault();c.type=h,!g&&!c.isDefaultPrevented()&&(!p._default||p._default.apply(e.ownerDocument,d)===!1)&&(h!=="click"||!f.nodeName(e,"a"))&&f.acceptData(e)&&o&&e[h]&&(h!=="focus"&&h!=="blur"||c.target.offsetWidth!==0)&&!f.isWindow(e)&&(n=e[o],n&&(e[o]=null),f.event.triggered=h,e[h](),f.event.triggered=b,n&&(e[o]=n));return c.result}},dispatch:function(c){c=f.event.fix(c||a.event);var d=(f._data(this,"events")||{})[c.type]||[],e=d.delegateCount,g=[].slice.call(arguments,0),h=!c.exclusive&&!c.namespace,i=[],j,k,l,m,n,o,p,q,r,s,t;g[0]=c,c.delegateTarget=this;if(e&&!c.target.disabled&&(!c.button||c.type!=="click")){m=f(this),m.context=this.ownerDocument||this;for(l=c.target;l!=this;l=l.parentNode||this){o={},q=[],m[0]=l;for(j=0;j<e;j++)r=d[j],s=r.selector,o[s]===b&&(o[s]=r.quick?H(l,r.quick):m.is(s)),o[s]&&q.push(r);q.length&&i.push({elem:l,matches:q})}}d.length>e&&i.push({elem:this,matches:d.slice(e)});for(j=0;j<i.length&&!c.isPropagationStopped();j++){p=i[j],c.currentTarget=p.elem;for(k=0;k<p.matches.length&&!c.isImmediatePropagationStopped();k++){r=p.matches[k];if(h||!c.namespace&&!r.namespace||c.namespace_re&&c.namespace_re.test(r.namespace))c.data=r.data,c.handleObj=r,n=((f.event.special[r.origType]||{}).handle||r.handler).apply(p.elem,g),n!==b&&(c.result=n,n===!1&&(c.preventDefault(),c.stopPropagation()))}}return c.result},props:"attrChange attrName relatedNode srcElement altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),fixHooks:{},keyHooks:{props:"char charCode key keyCode".split(" "),filter:function(a,b){a.which==null&&(a.which=b.charCode!=null?b.charCode:b.keyCode);return a}},mouseHooks:{props:"button buttons clientX clientY fromElement offsetX offsetY pageX pageY screenX screenY toElement".split(" "),filter:function(a,d){var e,f,g,h=d.button,i=d.fromElement;a.pageX==null&&d.clientX!=null&&(e=a.target.ownerDocument||c,f=e.documentElement,g=e.body,a.pageX=d.clientX+(f&&f.scrollLeft||g&&g.scrollLeft||0)-(f&&f.clientLeft||g&&g.clientLeft||0),a.pageY=d.clientY+(f&&f.scrollTop||g&&g.scrollTop||0)-(f&&f.clientTop||g&&g.clientTop||0)),!a.relatedTarget&&i&&(a.relatedTarget=i===a.target?d.toElement:i),!a.which&&h!==b&&(a.which=h&1?1:h&2?3:h&4?2:0);return a}},fix:function(a){if(a[f.expando])return a;var d,e,g=a,h=f.event.fixHooks[a.type]||{},i=h.props?this.props.concat(h.props):this.props;a=f.Event(g);for(d=i.length;d;)e=i[--d],a[e]=g[e];a.target||(a.target=g.srcElement||c),a.target.nodeType===3&&(a.target=a.target.parentNode),a.metaKey===b&&(a.metaKey=a.ctrlKey);return h.filter?h.filter(a,g):a},special:{ready:{setup:f.bindReady},load:{noBubble:!0},focus:{delegateType:"focusin"},blur:{delegateType:"focusout"},beforeunload:{setup:function(a,b,c){f.isWindow(this)&&(this.onbeforeunload=c)},teardown:function(a,b){this.onbeforeunload===b&&(this.onbeforeunload=null)}}},simulate:function(a,b,c,d){var e=f.extend(new f.Event,c,{type:a,isSimulated:!0,originalEvent:{}});d?f.event.trigger(e,null,b):f.event.dispatch.call(b,e),e.isDefaultPrevented()&&c.preventDefault()}},f.event.handle=f.event.dispatch,f.removeEvent=c.removeEventListener?function(a,b,c){a.removeEventListener&&a.removeEventListener(b,c,!1)}:function(a,b,c){a.detachEvent&&a.detachEvent("on"+b,c)},f.Event=function(a,b){if(!(this instanceof f.Event))return new f.Event(a,b);a&&a.type?(this.originalEvent=a,this.type=a.type,this.isDefaultPrevented=a.defaultPrevented||a.returnValue===!1||a.getPreventDefault&&a.getPreventDefault()?K:J):this.type=a,b&&f.extend(this,b),this.timeStamp=a&&a.timeStamp||f.now(),this[f.expando]=!0},f.Event.prototype={preventDefault:function(){this.isDefaultPrevented=K;var a=this.originalEvent;!a||(a.preventDefault?a.preventDefault():a.returnValue=!1)},stopPropagation:function(){this.isPropagationStopped=K;var a=this.originalEvent;!a||(a.stopPropagation&&a.stopPropagation(),a.cancelBubble=!0)},stopImmediatePropagation:function(){this.isImmediatePropagationStopped=K,this.stopPropagation()},isDefaultPrevented:J,isPropagationStopped:J,isImmediatePropagationStopped:J},f.each({mouseenter:"mouseover",mouseleave:"mouseout"},function(a,b){f.event.special[a]={delegateType:b,bindType:b,handle:function(a){var c=this,d=a.relatedTarget,e=a.handleObj,g=e.selector,h;if(!d||d!==c&&!f.contains(c,d))a.type=e.origType,h=e.handler.apply(this,arguments),a.type=b;return h}}}),f.support.submitBubbles||(f.event.special.submit={setup:function(){if(f.nodeName(this,"form"))return!1;f.event.add(this,"click._submit keypress._submit",function(a){var c=a.target,d=f.nodeName(c,"input")||f.nodeName(c,"button")?c.form:b;d&&!d._submit_attached&&(f.event.add(d,"submit._submit",function(a){this.parentNode&&!a.isTrigger&&f.event.simulate("submit",this.parentNode,a,!0)}),d._submit_attached=!0)})},teardown:function(){if(f.nodeName(this,"form"))return!1;f.event.remove(this,"._submit")}}),f.support.changeBubbles||(f.event.special.change={setup:function(){if(z.test(this.nodeName)){if(this.type==="checkbox"||this.type==="radio")f.event.add(this,"propertychange._change",function(a){a.originalEvent.propertyName==="checked"&&(this._just_changed=!0)}),f.event.add(this,"click._change",function(a){this._just_changed&&!a.isTrigger&&(this._just_changed=!1,f.event.simulate("change",this,a,!0))});return!1}f.event.add(this,"beforeactivate._change",function(a){var b=a.target;z.test(b.nodeName)&&!b._change_attached&&(f.event.add(b,"change._change",function(a){this.parentNode&&!a.isSimulated&&!a.isTrigger&&f.event.simulate("change",this.parentNode,a,!0)}),b._change_attached=!0)})},handle:function(a){var b=a.target;if(this!==b||a.isSimulated||a.isTrigger||b.type!=="radio"&&b.type!=="checkbox")return a.handleObj.handler.apply(this,arguments)},teardown:function(){f.event.remove(this,"._change");return z.test(this.nodeName)}}),f.support.focusinBubbles||f.each({focus:"focusin",blur:"focusout"},function(a,b){var d=0,e=function(a){f.event.simulate(b,a.target,f.event.fix(a),!0)};f.event.special[b]={setup:function(){d++===0&&c.addEventListener(a,e,!0)},teardown:function(){--d===0&&c.removeEventListener(a,e,!0)}}}),f.fn.extend({on:function(a,c,d,e,g){var h,i;if(typeof a=="object"){typeof c!="string"&&(d=c,c=b);for(i in a)this.on(i,c,d,a[i],g);return this}d==null&&e==null?(e=c,d=c=b):e==null&&(typeof c=="string"?(e=d,d=b):(e=d,d=c,c=b));if(e===!1)e=J;else if(!e)return this;g===1&&(h=e,e=function(a){f().off(a);return h.apply(this,arguments)},e.guid=h.guid||(h.guid=f.guid++));return this.each(function(){f.event.add(this,a,e,d,c)})},one:function(a,b,c,d){return this.on.call(this,a,b,c,d,1)},off:function(a,c,d){if(a&&a.preventDefault&&a.handleObj){var e=a.handleObj;f(a.delegateTarget).off(e.namespace?e.type+"."+e.namespace:e.type,e.selector,e.handler);return this}if(typeof a=="object"){for(var g in a)this.off(g,c,a[g]);return this}if(c===!1||typeof c=="function")d=c,c=b;d===!1&&(d=J);return this.each(function(){f.event.remove(this,a,d,c)})},bind:function(a,b,c){return this.on(a,null,b,c)},unbind:function(a,b){return this.off(a,null,b)},live:function(a,b,c){f(this.context).on(a,this.selector,b,c);return this},die:function(a,b){f(this.context).off(a,this.selector||"**",b);return this},delegate:function(a,b,c,d){return this.on(b,a,c,d)},undelegate:function(a,b,c){return arguments.length==1?this.off(a,"**"):this.off(b,a,c)},trigger:function(a,b){return this.each(function(){f.event.trigger(a,b,this)})},triggerHandler:function(a,b){if(this[0])return f.event.trigger(a,b,this[0],!0)},toggle:function(a){var b=arguments,c=a.guid||f.guid++,d=0,e=function(c){var e=(f._data(this,"lastToggle"+a.guid)||0)%d;f._data(this,"lastToggle"+a.guid,e+1),c.preventDefault();return b[e].apply(this,arguments)||!1};e.guid=c;while(d<b.length)b[d++].guid=c;return this.click(e)},hover:function(a,b){return this.mouseenter(a).mouseleave(b||a)}}),f.each("blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu".split(" "),function(a,b){f.fn[b]=function(a,c){c==null&&(c=a,a=null);return arguments.length>0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}if(j.nodeType===1){g||(j[d]=c,j.sizset=h);if(typeof b!="string"){if(j===b){k=!0;break}}else if(m.filter(b,[j]).length>0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h<i;h++){var j=e[h];if(j){var k=!1;j=j[a];while(j){if(j[d]===c){k=e[j.sizset];break}j.nodeType===1&&!g&&(j[d]=c,j.sizset=h);if(j.nodeName.toLowerCase()===b){k=j;break}j=j[a]}e[h]=k}}}var a=/((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b<a.length;b++)a[b]===a[b-1]&&a.splice(b--,1)}return a},m.matches=function(a,b){return m(a,null,null,b)},m.matchesSelector=function(a,b){return m(b,null,null,[a]).length>0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e<f;e++){h=o.order[e];if(g=o.leftMatch[h].exec(a)){i=g[1],g.splice(1,1);if(i.substr(i.length-1)!=="\\"){g[1]=(g[1]||"").replace(j,""),d=o.find[h](g,b,c);if(d!=null){a=a.replace(o.match[h],"");break}}}}d||(d=typeof b.getElementsByTagName!="undefined"?b.getElementsByTagName("*"):[]);return{set:d,expr:a}},m.filter=function(a,c,d,e){var f,g,h,i,j,k,l,n,p,q=a,r=[],s=c,t=c&&c[0]&&m.isXML(c[0]);while(a&&c.length){for(h in o.filter)if((f=o.leftMatch[h].exec(a))!=null&&f[2]){k=o.filter[h],l=f[1],g=!1,f.splice(1,1);if(l.substr(l.length-1)==="\\")continue;s===r&&(r=[]);if(o.preFilter[h]){f=o.preFilter[h](f,s,d,r,e,t);if(!f)g=i=!0;else if(f===!0)continue}if(f)for(n=0;(j=s[n])!=null;n++)j&&(i=k(j,f,n,s),p=e^i,d&&i!=null?p?g=!0:s[n]=!1:p&&(r.push(j),g=!0));if(i!==b){d||(s=r),a=a.replace(o.match[h],"");if(!g)return[];break}}if(a===q)if(g==null)m.error(a);else break;q=a}return s},m.error=function(a){throw new Error("Syntax error, unrecognized expression: "+a)};var n=m.getText=function(a){var b,c,d=a.nodeType,e="";if(d){if(d===1||d===9){if(typeof a.textContent=="string")return a.textContent;if(typeof a.innerText=="string")return a.innerText.replace(k,"");for(a=a.firstChild;a;a=a.nextSibling)e+=n(a)}else if(d===3||d===4)return a.nodeValue}else for(b=0;c=a[b];b++)c.nodeType!==8&&(e+=n(c));return e},o=m.selectors={order:["ID","NAME","TAG"],match:{ID:/#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,CLASS:/\.((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,NAME:/\[name=['"]*((?:[\w\u00c0-\uFFFF\-]|\\.)+)['"]*\]/,ATTR:/\[\s*((?:[\w\u00c0-\uFFFF\-]|\\.)+)\s*(?:(\S?=)\s*(?:(['"])(.*?)\3|(#?(?:[\w\u00c0-\uFFFF\-]|\\.)*)|)|)\s*\]/,TAG:/^((?:[\w\u00c0-\uFFFF\*\-]|\\.)+)/,CHILD:/:(only|nth|last|first)-child(?:\(\s*(even|odd|(?:[+\-]?\d+|(?:[+\-]?\d*)?n\s*(?:[+\-]\s*\d+)?))\s*\))?/,POS:/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^\-]|$)/,PSEUDO:/:((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\2\))?/},leftMatch:{},attrMap:{"class":"className","for":"htmlFor"},attrHandle:{href:function(a){return a.getAttribute("href")},type:function(a){return a.getAttribute("type")}},relative:{"+":function(a,b){var c=typeof b=="string",d=c&&!l.test(b),e=c&&!d;d&&(b=b.toLowerCase());for(var f=0,g=a.length,h;f<g;f++)if(h=a[f]){while((h=h.previousSibling)&&h.nodeType!==1);a[f]=e||h&&h.nodeName.toLowerCase()===b?h||!1:h===b}e&&m.filter(b,a,!0)},">":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e<f;e++){c=a[e];if(c){var g=c.parentNode;a[e]=g.nodeName.toLowerCase()===b?g:!1}}}else{for(;e<f;e++)c=a[e],c&&(a[e]=d?c.parentNode:c.parentNode===b);d&&m.filter(b,a,!0)}},"":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("parentNode",b,f,a,d,c)},"~":function(a,b,c){var d,f=e++,g=x;typeof b=="string"&&!l.test(b)&&(b=b.toLowerCase(),d=b,g=w),g("previousSibling",b,f,a,d,c)}},find:{ID:function(a,b,c){if(typeof b.getElementById!="undefined"&&!c){var d=b.getElementById(a[1]);return d&&d.parentNode?[d]:[]}},NAME:function(a,b){if(typeof b.getElementsByName!="undefined"){var c=[],d=b.getElementsByName(a[1]);for(var e=0,f=d.length;e<f;e++)d[e].getAttribute("name")===a[1]&&c.push(d[e]);return c.length===0?null:c}},TAG:function(a,b){if(typeof b.getElementsByTagName!="undefined")return b.getElementsByTagName(a[1])}},preFilter:{CLASS:function(a,b,c,d,e,f){a=" "+a[1].replace(j,"")+" ";if(f)return a;for(var g=0,h;(h=b[g])!=null;g++)h&&(e^(h.className&&(" "+h.className+" ").replace(/[\t\n\r]/g," ").indexOf(a)>=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return b<c[3]-0},gt:function(a,b,c){return b>c[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h<i;h++)if(g[h]===a)return!1;return!0}m.error(e)},CHILD:function(a,b){var c,e,f,g,h,i,j,k=b[1],l=a;switch(k){case"only":case"first":while(l=l.previousSibling)if(l.nodeType===1)return!1;if(k==="first")return!0;l=a;case"last":while(l=l.nextSibling)if(l.nodeType===1)return!1;return!0;case"nth":c=b[2],e=b[3];if(c===1&&e===0)return!0;f=b[0],g=a.parentNode;if(g&&(g[d]!==f||!a.nodeIndex)){i=0;for(l=g.firstChild;l;l=l.nextSibling)l.nodeType===1&&(l.nodeIndex=++i);g[d]=f}j=a.nodeIndex-e;return c===0?j===0:j%c===0&&j/c>=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c<e;c++)d.push(a[c]);else for(;a[c];c++)d.push(a[c]);return d}}var u,v;c.documentElement.compareDocumentPosition?u=function(a,b){if(a===b){h=!0;return 0}if(!a.compareDocumentPosition||!b.compareDocumentPosition)return a.compareDocumentPosition?-1:1;return a.compareDocumentPosition(b)&4?-1:1}:(u=function(a,b){if(a===b){h=!0;return 0}if(a.sourceIndex&&b.sourceIndex)return a.sourceIndex-b.sourceIndex;var c,d,e=[],f=[],g=a.parentNode,i=b.parentNode,j=g;if(g===i)return v(a,b);if(!g)return-1;if(!i)return 1;while(j)e.unshift(j),j=j.parentNode;j=i;while(j)f.unshift(j),j=j.parentNode;c=e.length,d=f.length;for(var k=0;k<c&&k<d;k++)if(e[k]!==f[k])return v(e[k],f[k]);return k===c?v(a,f[k],-1):v(e[k],b,1)},v=function(a,b,c){if(a===b)return c;var d=a.nextSibling;while(d){if(d===b)return-1;d=d.nextSibling}return 1}),function(){var a=c.createElement("div"),d="script"+(new Date).getTime(),e=c.documentElement;a.innerHTML="<a name='"+d+"'/>",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="<a href='#'></a>",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="<p class='TEST'></p>";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="<div class='test e'></div><div class='test'></div>";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h<i;h++)m(a,g[h],e,c);return m.filter(f,e)};m.attr=f.attr,m.selectors.attrMap={},f.find=m,f.expr=m.selectors,f.expr[":"]=f.expr.filters,f.unique=m.uniqueSort,f.text=m.getText,f.isXMLDoc=m.isXML,f.contains=m.contains}();var L=/Until$/,M=/^(?:parents|prevUntil|prevAll)/,N=/,/,O=/^.[^:#\[\.,]*$/,P=Array.prototype.slice,Q=f.expr.match.POS,R={children:!0,contents:!0,next:!0,prev:!0};f.fn.extend({find:function(a){var b=this,c,d;if(typeof a!="string")return f(a).filter(function(){for(c=0,d=b.length;c<d;c++)if(f.contains(b[c],this))return!0});var e=this.pushStack("","find",a),g,h,i;for(c=0,d=this.length;c<d;c++){g=e.length,f.find(a,this[c],e);if(c>0)for(h=g;h<e.length;h++)for(i=0;i<g;i++)if(e[i]===e[h]){e.splice(h--,1);break}}return e},has:function(a){var b=f(a);return this.filter(function(){for(var a=0,c=b.length;a<c;a++)if(f.contains(this,b[a]))return!0})},not:function(a){return this.pushStack(T(this,a,!1),"not",a)},filter:function(a){return this.pushStack(T(this,a,!0),"filter",a)},is:function(a){return!!a&&(typeof a=="string"?Q.test(a)?f(a,this.context).index(this[0])>=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d<a.length;d++)f(g).is(a[d])&&c.push({selector:a[d],elem:g,level:h});g=g.parentNode,h++}return c}var i=Q.test(a)||typeof a!="string"?f(a,b||this.context):0;for(d=0,e=this.length;d<e;d++){g=this[d];while(g){if(i?i.index(g)>-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling(a.parentNode.firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/<tbody/i,_=/<|&#?\w+;/,ba=/<(?:script|style)/i,bb=/<(?:script|object|embed|option|style)/i,bc=new RegExp("<(?:"+V+")","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*<!(?:\[CDATA\[|\-\-)/,bg={option:[1,"<select multiple='multiple'>","</select>"],legend:[1,"<fieldset>","</fieldset>"],thead:[1,"<table>","</table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],col:[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"],area:[1,"<map>","</map>"],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div<div>","</div>"]),f.fn.extend({text:function(a){if(f.isFunction(a))return this.each(function(b){var c=f(this);c.text(a.call(this,b,c.text()))});if(typeof a!="object"&&a!==b)return this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a));return f.text(this)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f.clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function()
+{for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){if(a===b)return this[0]&&this[0].nodeType===1?this[0].innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1></$2>");try{for(var c=0,d=this.length;c<d;c++)this[c].nodeType===1&&(f.cleanData(this[c].getElementsByTagName("*")),this[c].innerHTML=a)}catch(e){this.empty().append(a)}}else f.isFunction(a)?this.each(function(b){var c=f(this);c.html(a.call(this,b,c.html()))}):this.empty().append(a);return this},replaceWith:function(a){if(this[0]&&this[0].parentNode){if(f.isFunction(a))return this.each(function(b){var c=f(this),d=c.html();c.replaceWith(a.call(this,b,d))});typeof a!="string"&&(a=f(a).detach());return this.each(function(){var b=this.nextSibling,c=this.parentNode;f(this).remove(),b?f(b).before(a):f(c).append(a)})}return this.length?this.pushStack(f(f.isFunction(a)?a():a),"replaceWith",a):this},detach:function(a){return this.remove(a,!0)},domManip:function(a,c,d){var e,g,h,i,j=a[0],k=[];if(!f.support.checkClone&&arguments.length===3&&typeof j=="string"&&bd.test(j))return this.each(function(){f(this).domManip(a,c,d,!0)});if(f.isFunction(j))return this.each(function(e){var g=f(this);a[0]=j.call(this,e,c?g.html():b),g.domManip(a,c,d)});if(this[0]){i=j&&j.parentNode,f.support.parentNode&&i&&i.nodeType===11&&i.childNodes.length===this.length?e={fragment:i}:e=f.buildFragment(a,this,k),h=e.fragment,h.childNodes.length===1?g=h=h.firstChild:g=h.firstChild;if(g){c=c&&f.nodeName(g,"tr");for(var l=0,m=this.length,n=m-1;l<m;l++)d.call(c?bi(this[l],g):this[l],e.cacheable||m>1&&l<n?f.clone(h,!0,!0):h)}k.length&&f.each(k,bp)}return this}}),f.buildFragment=function(a,b,d){var e,g,h,i,j=a[0];b&&b[0]&&(i=b[0].ownerDocument||b[0]),i.createDocumentFragment||(i=c),a.length===1&&typeof j=="string"&&j.length<512&&i===c&&j.charAt(0)==="<"&&!bb.test(j)&&(f.support.checkClone||!bd.test(j))&&(f.support.html5Clone||!bc.test(j))&&(g=!0,h=f.fragments[j],h&&h!==1&&(e=h)),e||(e=i.createDocumentFragment(),f.clean(a,i,e,d)),g&&(f.fragments[j]=h?e:1);return{fragment:e,cacheable:g}},f.fragments={},f.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(a,b){f.fn[a]=function(c){var d=[],e=f(c),g=this.length===1&&this[0].parentNode;if(g&&g.nodeType===11&&g.childNodes.length===1&&e.length===1){e[b](this[0]);return this}for(var h=0,i=e.length;h<i;h++){var j=(h>0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||!bc.test("<"+a.nodeName)?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g;b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);var h=[],i;for(var j=0,k;(k=a[j])!=null;j++){typeof k=="number"&&(k+="");if(!k)continue;if(typeof k=="string")if(!_.test(k))k=b.createTextNode(k);else{k=k.replace(Y,"<$1></$2>");var l=(Z.exec(k)||["",""])[1].toLowerCase(),m=bg[l]||bg._default,n=m[0],o=b.createElement("div");b===c?bh.appendChild(o):U(b).appendChild(o),o.innerHTML=m[1]+k+m[2];while(n--)o=o.lastChild;if(!f.support.tbody){var p=$.test(k),q=l==="table"&&!p?o.firstChild&&o.firstChild.childNodes:m[1]==="<table>"&&!p?o.childNodes:[];for(i=q.length-1;i>=0;--i)f.nodeName(q[i],"tbody")&&!q[i].childNodes.length&&q[i].parentNode.removeChild(q[i])}!f.support.leadingWhitespace&&X.test(k)&&o.insertBefore(b.createTextNode(X.exec(k)[0]),o.firstChild),k=o.childNodes}var r;if(!f.support.appendChecked)if(k[0]&&typeof (r=k.length)=="number")for(i=0;i<r;i++)bn(k[i]);else bn(k);k.nodeType?h.push(k):h=f.merge(h,k)}if(d){g=function(a){return!a.type||be.test(a.type)};for(j=0;h[j];j++)if(e&&f.nodeName(h[j],"script")&&(!h[j].type||h[j].type.toLowerCase()==="text/javascript"))e.push(h[j].parentNode?h[j].parentNode.removeChild(h[j]):h[j]);else{if(h[j].nodeType===1){var s=f.grep(h[j].getElementsByTagName("script"),g);h.splice.apply(h,[j+1,0].concat(s))}d.appendChild(h[j])}}return h},cleanData:function(a){var b,c,d=f.cache,e=f.event.special,g=f.support.deleteExpando;for(var h=0,i;(i=a[h])!=null;h++){if(i.nodeName&&f.noData[i.nodeName.toLowerCase()])continue;c=i[f.expando];if(c){b=d[c];if(b&&b.events){for(var j in b.events)e[j]?f.event.remove(i,j):f.removeEvent(i,j,b.handle);b.handle&&(b.handle.elem=null)}g?delete i[f.expando]:i.removeAttribute&&i.removeAttribute(f.expando),delete d[c]}}}});var bq=/alpha\([^)]*\)/i,br=/opacity=([^)]*)/,bs=/([A-Z]|^ms)/g,bt=/^-?\d+(?:px)?$/i,bu=/^-?\d/,bv=/^([\-+])=([\-+.\de]+)/,bw={position:"absolute",visibility:"hidden",display:"block"},bx=["Left","Right"],by=["Top","Bottom"],bz,bA,bB;f.fn.css=function(a,c){if(arguments.length===2&&c===b)return this;return f.access(this,a,c,!0,function(a,c,d){return d!==b?f.style(a,c,d):f.css(a,c)})},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=bz(a,"opacity","opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bv.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(bz)return bz(a,c)},swap:function(a,b,c){var d={};for(var e in b)d[e]=a.style[e],a.style[e]=b[e];c.call(a);for(e in b)a.style[e]=d[e]}}),f.curCSS=f.css,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){var e;if(c){if(a.offsetWidth!==0)return bC(a,b,d);f.swap(a,bw,function(){e=bC(a,b,d)});return e}},set:function(a,b){if(!bt.test(b))return b;b=parseFloat(b);if(b>=0)return b+"px"}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return br.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bq,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bq.test(g)?g.replace(bq,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){var c;f.swap(a,{display:"inline-block"},function(){b?c=bz(a,"margin-right","marginRight"):c=a.style.marginRight});return c}})}),c.defaultView&&c.defaultView.getComputedStyle&&(bA=function(a,b){var c,d,e;b=b.replace(bs,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b)));return c}),c.documentElement.currentStyle&&(bB=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f===null&&g&&(e=g[b])&&(f=e),!bt.test(f)&&bu.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f||0,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),bz=bA||bB,f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)});var bD=/%20/g,bE=/\[\]$/,bF=/\r?\n/g,bG=/#.*$/,bH=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bI=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bJ=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bK=/^(?:GET|HEAD)$/,bL=/^\/\//,bM=/\?/,bN=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,bO=/^(?:select|textarea)/i,bP=/\s+/,bQ=/([?&])_=[^&]*/,bR=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bS=f.fn.load,bT={},bU={},bV,bW,bX=["*/"]+["*"];try{bV=e.href}catch(bY){bV=c.createElement("a"),bV.href="",bV=bV.href}bW=bR.exec(bV.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bS)return bS.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("<div>").append(c.replace(bN,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bO.test(this.nodeName)||bI.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bF,"\r\n")}}):{name:b.name,value:c.replace(bF,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b_(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b_(a,b);return a},ajaxSettings:{url:bV,isLocal:bJ.test(bW[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bX},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bZ(bT),ajaxTransport:bZ(bU),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?cb(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cc(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bH.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bG,"").replace(bL,bW[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bP),d.crossDomain==null&&(r=bR.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bW[1]&&r[2]==bW[2]&&(r[3]||(r[1]==="http:"?80:443))==(bW[3]||(bW[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),b$(bT,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bK.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bM.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bQ,"$1_="+x);d.url=y+(y===d.url?(bM.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bX+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=b$(bU,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cd=f.now(),ce=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cd++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=b.contentType==="application/x-www-form-urlencoded"&&typeof b.data=="string";if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(ce.test(b.url)||e&&ce.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(ce,l),b.url===j&&(e&&(k=k.replace(ce,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var cf=a.ActiveXObject?function(){for(var a in ch)ch[a](0,1)}:!1,cg=0,ch;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ci()||cj()}:ci,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,cf&&delete ch[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n),m.text=h.responseText;try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cg,cf&&(ch||(ch={},f(a).unload(cf)),ch[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var ck={},cl,cm,cn=/^(?:toggle|show|hide)$/,co=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,cp,cq=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cr;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(cu("show",3),a,b,c);for(var g=0,h=this.length;g<h;g++)d=this[g],d.style&&(e=d.style.display,!f._data(d,"olddisplay")&&e==="none"&&(e=d.style.display=""),e===""&&f.css(d,"display")==="none"&&f._data(d,"olddisplay",cv(d.nodeName)));for(g=0;g<h;g++){d=this[g];if(d.style){e=d.style.display;if(e===""||e==="none")d.style.display=f._data(d,"olddisplay")||""}}return this},hide:function(a,b,c){if(a||a===0)return this.animate(cu("hide",3),a,b,c);var d,e,g=0,h=this.length;for(;g<h;g++)d=this[g],d.style&&(e=f.css(d,"display"),e!=="none"&&!f._data(d,"olddisplay")&&f._data(d,"olddisplay",e));for(g=0;g<h;g++)this[g].style&&(this[g].style.display="none");return this},_toggle:f.fn.toggle,toggle:function(a,b,c){var d=typeof a=="boolean";f.isFunction(a)&&f.isFunction(b)?this._toggle.apply(this,arguments):a==null||d?this.each(function(){var b=d?a:f(this).is(":hidden");f(this)[b?"show":"hide"]()}):this.animate(cu("toggle",3),a,b,c);return this},fadeTo:function(a,b,c,d){return this.filter(":hidden").css("opacity",0).show().end().animate({opacity:b},a,c,d)},animate:function(a,b,c,d){function g(){e.queue===!1&&f._mark(this);var b=f.extend({},e),c=this.nodeType===1,d=c&&f(this).is(":hidden"),g,h,i,j,k,l,m,n,o;b.animatedProperties={};for(i in a){g=f.camelCase(i),i!==g&&(a[g]=a[i],delete a[i]),h=a[g],f.isArray(h)?(b.animatedProperties[g]=h[1],h=a[g]=h[0]):b.animatedProperties[g]=b.specialEasing&&b.specialEasing[g]||b.easing||"swing";if(h==="hide"&&d||h==="show"&&!d)return b.complete.call(this);c&&(g==="height"||g==="width")&&(b.overflow=[this.style.overflow,this.style.overflowX,this.style.overflowY],f.css(this,"display")==="inline"&&f.css(this,"float")==="none"&&(!f.support.inlineBlockNeedsLayout||cv(this.nodeName)==="inline"?this.style.display="inline-block":this.style.zoom=1))}b.overflow!=null&&(this.style.overflow="hidden");for(i in a)j=new f.fx(this,b,i),h=a[i],cn.test(h)?(o=f._data(this,"toggle"+i)||(h==="toggle"?d?"show":"hide":0),o?(f._data(this,"toggle"+i,o==="show"?"hide":"show"),j[o]()):j[h]()):(k=co.exec(h),l=j.cur(),k?(m=parseFloat(k[2]),n=k[3]||(f.cssNumber[i]?"":"px"),n!=="px"&&(f.style(this,i,(m||1)+n),l=(m||1)/j.cur()*l,f.style(this,i,l+n)),k[1]&&(m=(k[1]==="-="?-1:1)*m+l),j.custom(l,m,n)):j.custom(l,h,""));return!0}var e=f.speed(b,c,d);if(f.isEmptyObject(a))return this.each(e.complete,[!1]);a=f.extend({},a);return e.queue===!1?this.each(g):this.queue(e.queue,g)},stop:function(a,c,d){typeof a!="string"&&(d=c,c=a,a=b),c&&a!==!1&&this.queue(a||"fx",[]);return this.each(function(){function h(a,b,c){var e=b[c];f.removeData(a,c,!0),e.stop(d)}var b,c=!1,e=f.timers,g=f._data(this);d||f._unmark(!0,this);if(a==null)for(b in g)g[b]&&g[b].stop&&b.indexOf(".run")===b.length-4&&h(this,g,b);else g[b=a+".run"]&&g[b].stop&&h(this,g,b);for(b=e.length;b--;)e[b].elem===this&&(a==null||e[b].queue===a)&&(d?e[b](!0):e[b].saveState(),c=!0,e.splice(b,1));(!d||!c)&&f.dequeue(this,a)})}}),f.each({slideDown:cu("show",1),slideUp:cu("hide",1),slideToggle:cu("toggle",1),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(a,b){f.fn[a]=function(a,c,d){return this.animate(b,a,c,d)}}),f.extend({speed:function(a,b,c){var d=a&&typeof a=="object"?f.extend({},a):{complete:c||!c&&b||f.isFunction(a)&&a,duration:a,easing:c&&b||b&&!f.isFunction(b)&&b};d.duration=f.fx.off?0:typeof d.duration=="number"?d.duration:d.duration in f.fx.speeds?f.fx.speeds[d.duration]:f.fx.speeds._default;if(d.queue==null||d.queue===!0)d.queue="fx";d.old=d.complete,d.complete=function(a){f.isFunction(d.old)&&d.old.call(this),d.queue?f.dequeue(this,d.queue):a!==!1&&f._unmark(this)};return d},easing:{linear:function(a,b,c,d){return c+d*a},swing:function(a,b,c,d){return(-Math.cos(a*Math.PI)/2+.5)*d+c}},timers:[],fx:function(a,b,c){this.options=b,this.elem=a,this.prop=c,b.orig=b.orig||{}}}),f.fx.prototype={update:function(){this.options.step&&this.options.step.call(this.elem,this.now,this),(f.fx.step[this.prop]||f.fx.step._default)(this)},cur:function(){if(this.elem[this.prop]!=null&&(!this.elem.style||this.elem.style[this.prop]==null))return this.elem[this.prop];var a,b=f.css(this.elem,this.prop);return isNaN(a=parseFloat(b))?!b||b==="auto"?0:b:a},custom:function(a,c,d){function h(a){return e.step(a)}var e=this,g=f.fx;this.startTime=cr||cs(),this.end=c,this.now=this.start=a,this.pos=this.state=0,this.unit=d||this.unit||(f.cssNumber[this.prop]?"":"px"),h.queue=this.options.queue,h.elem=this.elem,h.saveState=function(){e.options.hide&&f._data(e.elem,"fxshow"+e.prop)===b&&f._data(e.elem,"fxshow"+e.prop,e.start)},h()&&f.timers.push(h)&&!cp&&(cp=setInterval(g.tick,g.interval))},show:function(){var a=f._data(this.elem,"fxshow"+this.prop);this.options.orig[this.prop]=a||f.style(this.elem,this.prop),this.options.show=!0,a!==b?this.custom(this.cur(),a):this.custom(this.prop==="width"||this.prop==="height"?1:0,this.cur()),f(this.elem).show()},hide:function(){this.options.orig[this.prop]=f._data(this.elem,"fxshow"+this.prop)||f.style(this.elem,this.prop),this.options.hide=!0,this.custom(this.cur(),0)},step:function(a){var b,c,d,e=cr||cs(),g=!0,h=this.elem,i=this.options;if(a||e>=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c<b.length;c++)a=b[c],!a()&&b[c]===a&&b.splice(c--,1);b.length||f.fx.stop()},interval:13,stop:function(){clearInterval(cp),cp=null},speeds:{slow:600,fast:200,_default:400},step:{opacity:function(a){f.style(a.elem,"opacity",a.now)},_default:function(a){a.elem.style&&a.elem.style[a.prop]!=null?a.elem.style[a.prop]=a.now+a.unit:a.elem[a.prop]=a.now}}}),f.each(["width","height"],function(a,b){f.fx.step[b]=function(a){f.style(a.elem,b,Math.max(0,a.now)+a.unit)}}),f.expr&&f.expr.filters&&(f.expr.filters.animated=function(a){return f.grep(f.timers,function(b){return a===b.elem}).length});var cw=/^t(?:able|d|h)$/i,cx=/^(?:body|html)$/i;"getBoundingClientRect"in c.documentElement?f.fn.offset=function(a){var b=this[0],c;if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);try{c=b.getBoundingClientRect()}catch(d){}var e=b.ownerDocument,g=e.documentElement;if(!c||!f.contains(g,b))return c?{top:c.top,left:c.left}:{top:0,left:0};var h=e.body,i=cy(e),j=g.clientTop||h.clientTop||0,k=g.clientLeft||h.clientLeft||0,l=i.pageYOffset||f.support.boxModel&&g.scrollTop||h.scrollTop,m=i.pageXOffset||f.support.boxModel&&g.scrollLeft||h.scrollLeft,n=c.top+l-j,o=c.left+m-k;return{top:n,left:o}}:f.fn.offset=function(a){var b=this[0];if(a)return this.each(function(b){f.offset.setOffset(this,a,b)});if(!b||!b.ownerDocument)return null;if(b===b.ownerDocument.body)return f.offset.bodyOffset(b);var c,d=b.offsetParent,e=b,g=b.ownerDocument,h=g.documentElement,i=g.body,j=g.defaultView,k=j?j.getComputedStyle(b,null):b.currentStyle,l=b.offsetTop,m=b.offsetLeft;while((b=b.parentNode)&&b!==i&&b!==h){if(f.support.fixedPosition&&k.position==="fixed")break;c=j?j.getComputedStyle(b,null):b.currentStyle,l-=b.scrollTop,m-=b.scrollLeft,b===d&&(l+=b.offsetTop,m+=b.offsetLeft,f.support.doesNotAddBorder&&(!f.support.doesAddBorderForTableAndCells||!cw.test(b.nodeName))&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),e=d,d=b.offsetParent),f.support.subtractsBorderForOverflowNotVisible&&c.overflow!=="visible"&&(l+=parseFloat(c.borderTopWidth)||0,m+=parseFloat(c.borderLeftWidth)||0),k=c}if(k.position==="relative"||k.position==="static")l+=i.offsetTop,m+=i.offsetLeft;f.support.fixedPosition&&k.position==="fixed"&&(l+=Math.max(h.scrollTop,i.scrollTop),m+=Math.max(h.scrollLeft,i.scrollLeft));return{top:l,left:m}},f.offset={bodyOffset:function(a){var b=a.offsetTop,c=a.offsetLeft;f.support.doesNotIncludeMarginInBodyOffset&&(b+=parseFloat(f.css(a,"marginTop"))||0,c+=parseFloat(f.css(a,"marginLeft"))||0);return{top:b,left:c}},setOffset:function(a,b,c){var d=f.css(a,"position");d==="static"&&(a.style.position="relative");var e=f(a),g=e.offset(),h=f.css(a,"top"),i=f.css(a,"left"),j=(d==="absolute"||d==="fixed")&&f.inArray("auto",[h,i])>-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each(["Left","Top"],function(a,c){var d="scroll"+c;f.fn[d]=function(c){var e,g;if(c===b){e=this[0];if(!e)return null;g=cy(e);return g?"pageXOffset"in g?g[a?"pageYOffset":"pageXOffset"]:f.support.boxModel&&g.document.documentElement[d]||g.document.body[d]:e[d]}return this.each(function(){g=cy(this),g?g.scrollTo(a?f(g).scrollLeft():c,a?c:f(g).scrollTop()):this[d]=c})}}),f.each(["Height","Width"],function(a,c){var d=c.toLowerCase();f.fn["inner"+c]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,d,"padding")):this[d]():null},f.fn["outer"+c]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,d,a?"margin":"border")):this[d]():null},f.fn[d]=function(a){var e=this[0];if(!e)return a==null?null:this;if(f.isFunction(a))return this.each(function(b){var c=f(this);c[d](a.call(this,b,c[d]()))});if(f.isWindow(e)){var g=e.document.documentElement["client"+c],h=e.document.body;return e.document.compatMode==="CSS1Compat"&&g||h&&h["client"+c]||g}if(e.nodeType===9)return Math.max(e.documentElement["client"+c],e.body["scroll"+c],e.documentElement["scroll"+c],e.body["offset"+c],e.documentElement["offset"+c]);if(a===b){var i=f.css(e,d),j=parseFloat(i);return f.isNumeric(j)?j:i}return this.css(d,typeof a=="string"?a:a+"px")}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window);
+
+/*
+ * Metadata - jQuery plugin for parsing metadata from elements
+ *
+ * Copyright (c) 2006 John Resig, Yehuda Katz, J�örn Zaefferer, Paul McLanahan
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ * Revision: $Id: jquery.metadata.js 4187 2007-12-16 17:15:27Z joern.zaefferer $
+ *
+ */
+
+/**
+ * Sets the type of metadata to use. Metadata is encoded in JSON, and each property
+ * in the JSON will become a property of the element itself.
+ *
+ * There are three supported types of metadata storage:
+ *
+ * attr: Inside an attribute. The name parameter indicates *which* attribute.
+ *
+ * class: Inside the class attribute, wrapped in curly braces: { }
+ *
+ * elem: Inside a child element (e.g. a script tag). The
+ * name parameter indicates *which* element.
+ *
+ * The metadata for an element is loaded the first time the element is accessed via jQuery.
+ *
+ * As a result, you can define the metadata type, use $(expr) to load the metadata into the elements
+ * matched by expr, then redefine the metadata type and run another $(expr) for other elements.
+ *
+ * @name $.metadata.setType
+ *
+ * @example <p id="one" class="some_class {item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("class")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from the class attribute
+ *
+ * @example <p id="one" class="some_class" data="{item_id: 1, item_label: 'Label'}">This is a p</p>
+ * @before $.metadata.setType("attr", "data")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a "data" attribute
+ *
+ * @example <p id="one" class="some_class"><script>{item_id: 1, item_label: 'Label'}</script>This is a p</p>
+ * @before $.metadata.setType("elem", "script")
+ * @after $("#one").metadata().item_id == 1; $("#one").metadata().item_label == "Label"
+ * @desc Reads metadata from a nested script element
+ *
+ * @param String type The encoding type
+ * @param String name The name of the attribute to be used to get metadata (optional)
+ * @cat Plugins/Metadata
+ * @descr Sets the type of encoding to be used when loading metadata for the first time
+ * @type undefined
+ * @see metadata()
+ */
+
+(function($) {
+
+$.extend({
+ metadata : {
+ defaults : {
+ type: 'class',
+ name: 'metadata',
+ cre: /({.*})/,
+ single: 'metadata'
+ },
+ setType: function( type, name ){
+ this.defaults.type = type;
+ this.defaults.name = name;
+ },
+ get: function( elem, opts ){
+ var settings = $.extend({},this.defaults,opts);
+ // check for empty string in single property
+ if ( !settings.single.length ) settings.single = 'metadata';
+
+ var data = $.data(elem, settings.single);
+ // returned cached data if it already exists
+ if ( data ) return data;
+
+ data = "{}";
+
+ if ( settings.type == "class" ) {
+ var m = settings.cre.exec( elem.className );
+ if ( m )
+ data = m[1];
+ } else if ( settings.type == "elem" ) {
+ if( !elem.getElementsByTagName )
+ return undefined;
+ var e = elem.getElementsByTagName(settings.name);
+ if ( e.length )
+ data = $.trim(e[0].innerHTML);
+ } else if ( elem.getAttribute != undefined ) {
+ var attr = elem.getAttribute( settings.name );
+ if ( attr )
+ data = attr;
+ }
+
+ if ( data.indexOf( '{' ) <0 )
+ data = "{" + data + "}";
+
+ data = eval("(" + data + ")");
+
+ $.data( elem, settings.single, data );
+ return data;
+ }
+ }
+});
+
+/**
+ * Returns the metadata object for the first member of the jQuery object.
+ *
+ * @name metadata
+ * @descr Returns element's metadata object
+ * @param Object opts An object contianing settings to override the defaults
+ * @type jQuery
+ * @cat Plugins/Metadata
+ */
+$.fn.metadata = function( opts ){
+ return $.metadata.get( this[0], opts );
+};
+
+})(jQuery);
+
+
+/**
+ * jQuery Validation Plugin 1.9.0
+
+ *
+ * http://bassistance.de/jquery-plugins/jquery-plugin-validation/
+ * http://docs.jquery.com/Plugins/Validation
+ *
+ * Copyright (c) 2006 - 2011 J철rn Zaefferer
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ */
+
+/**
+ * 353 line 변경 - jquery.validate.js 버전을 업그레이드 할 경우에는 확인 요망
+ */
+
+(function($) {
+
+$.extend($.fn, {
+ // http://docs.jquery.com/Plugins/Validation/validate
+ validate: function( options ) {
+
+ // if nothing is selected, return nothing; can't chain anyway
+ if (!this.length) {
+ options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" );
+ return;
+ }
+
+ // check if a validator for this form was already created
+ var validator = $.data(this[0], 'validator');
+ if ( validator ) {
+ return validator;
+ }
+
+ // Add novalidate tag if HTML5.
+ this.attr('novalidate', 'novalidate');
+
+ validator = new $.validator( options, this[0] );
+ $.data(this[0], 'validator', validator);
+
+ if ( validator.settings.onsubmit ) {
+
+ var inputsAndButtons = this.find("input, button");
+
+ // allow suppresing validation by adding a cancel class to the submit button
+ inputsAndButtons.filter(".cancel").click(function () {
+ validator.cancelSubmit = true;
+ });
+
+ // when a submitHandler is used, capture the submitting button
+ if (validator.settings.submitHandler) {
+ inputsAndButtons.filter(":submit").click(function () {
+ validator.submitButton = this;
+ });
+ }
+
+ // validate the form on submit
+ this.submit( function( event ) {
+ if ( validator.settings.debug )
+ // prevent form submit to be able to see console output
+ event.preventDefault();
+
+ function handle() {
+ if ( validator.settings.submitHandler ) {
+ if (validator.submitButton) {
+ // insert a hidden input as a replacement for the missing submit button
+ var hidden = $("<input type='hidden'/>").attr("name", validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm);
+ }
+ validator.settings.submitHandler.call( validator, validator.currentForm );
+ if (validator.submitButton) {
+ // and clean up afterwards; thanks to no-block-scope, hidden can be referenced
+ hidden.remove();
+ }
+ return false;
+ }
+ return true;
+ }
+
+ // prevent submit for invalid forms or custom submit handlers
+ if ( validator.cancelSubmit ) {
+ validator.cancelSubmit = false;
+ return handle();
+ }
+ if ( validator.form() ) {
+ if ( validator.pendingRequest ) {
+ validator.formSubmitted = true;
+ return false;
+ }
+ return handle();
+ } else {
+ validator.focusInvalid();
+ return false;
+ }
+ });
+ }
+
+ return validator;
+ },
+ // http://docs.jquery.com/Plugins/Validation/valid
+ valid: function() {
+ if ( $(this[0]).is('form')) {
+ return this.validate().form();
+ } else {
+ var valid = true;
+ var validator = $(this[0].form).validate();
+ this.each(function() {
+ valid &= validator.element(this);
+ });
+ return valid;
+ }
+ },
+ // attributes: space seperated list of attributes to retrieve and remove
+ removeAttrs: function(attributes) {
+ var result = {},
+ $element = this;
+ $.each(attributes.split(/\s/), function(index, value) {
+ result[value] = $element.attr(value);
+ $element.removeAttr(value);
+ });
+ return result;
+ },
+ // http://docs.jquery.com/Plugins/Validation/rules
+ rules: function(command, argument) {
+ var element = this[0];
+
+ if (command) {
+ var settings = $.data(element.form, 'validator').settings;
+ var staticRules = settings.rules;
+ var existingRules = $.validator.staticRules(element);
+ switch(command) {
+ case "add":
+ $.extend(existingRules, $.validator.normalizeRule(argument));
+ staticRules[element.name] = existingRules;
+ if (argument.messages)
+ settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages );
+ break;
+ case "remove":
+ if (!argument) {
+ delete staticRules[element.name];
+ return existingRules;
+ }
+ var filtered = {};
+ $.each(argument.split(/\s/), function(index, method) {
+ filtered[method] = existingRules[method];
+ delete existingRules[method];
+ });
+ return filtered;
+ }
+ }
+
+ var data = $.validator.normalizeRules(
+ $.extend(
+ {},
+ $.validator.metadataRules(element),
+ $.validator.classRules(element),
+ $.validator.attributeRules(element),
+ $.validator.staticRules(element)
+ ), element);
+
+ // make sure required is at front
+ if (data.required) {
+ var param = data.required;
+ delete data.required;
+ data = $.extend({required: param}, data);
+ }
+
+ return data;
+ }
+});
+
+// Custom selectors
+$.extend($.expr[":"], {
+ // http://docs.jquery.com/Plugins/Validation/blank
+ blank: function(a) {return !$.trim("" + a.value);},
+ // http://docs.jquery.com/Plugins/Validation/filled
+ filled: function(a) {return !!$.trim("" + a.value);},
+ // http://docs.jquery.com/Plugins/Validation/unchecked
+ unchecked: function(a) {return !a.checked;}
+});
+
+// constructor for validator
+$.validator = function( options, form ) {
+ this.settings = $.extend( true, {}, $.validator.defaults, options );
+ this.currentForm = form;
+ this.init();
+};
+
+$.validator.format = function(source, params) {
+ if ( arguments.length == 1 )
+ return function() {
+ var args = $.makeArray(arguments);
+ args.unshift(source);
+ return $.validator.format.apply( this, args );
+ };
+ if ( arguments.length > 2 && params.constructor != Array ) {
+ params = $.makeArray(arguments).slice(1);
+ }
+ if ( params.constructor != Array ) {
+ params = [ params ];
+ }
+ $.each(params, function(i, n) {
+ source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
+ });
+ return source;
+};
+
+$.extend($.validator, {
+
+ defaults: {
+ messages: {},
+ groups: {},
+ rules: {},
+ errorClass: "error",
+ validClass: "valid",
+ errorElement: "label",
+ focusInvalid: true,
+ errorContainer: $( [] ),
+ errorLabelContainer: $( [] ),
+ onsubmit: true,
+ ignore: ":hidden",
+ ignoreTitle: false,
+ onfocusin: function(element, event) {
+ this.lastActive = element;
+
+ // hide error label and remove error class on focus if enabled
+ if ( this.settings.focusCleanup && !this.blockFocusCleanup ) {
+ this.settings.unhighlight && this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
+ this.addWrapper(this.errorsFor(element)).hide();
+ }
+ },
+ onfocusout: function(element, event) {
+ if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) {
+ this.element(element);
+ }
+ },
+ onkeyup: function(element, event) {
+ if ( element.name in this.submitted || element == this.lastElement ) {
+ this.element(element);
+ }
+ },
+ onclick: function(element, event) {
+ // click on selects, radiobuttons and checkboxes
+ if ( element.name in this.submitted )
+ this.element(element);
+ // or option elements, check parent select in that case
+ else if (element.parentNode.name in this.submitted)
+ this.element(element.parentNode);
+ },
+ highlight: function(element, errorClass, validClass) {
+ if (element.type === 'radio') {
+ this.findByName(element.name).addClass(errorClass).removeClass(validClass);
+ } else {
+ $(element).addClass(errorClass).removeClass(validClass);
+ }
+ },
+ unhighlight: function(element, errorClass, validClass) {
+ if (element.type === 'radio') {
+ this.findByName(element.name).removeClass(errorClass).addClass(validClass);
+ } else {
+ $(element).removeClass(errorClass).addClass(validClass);
+ }
+ }
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
+ setDefaults: function(settings) {
+ $.extend( $.validator.defaults, settings );
+ },
+
+ messages: {
+ required: "This field is required.",
+ remote: "Please fix this field.",
+ email: "Please enter a valid email address.",
+ url: "Please enter a valid URL.",
+ date: "Please enter a valid date.",
+ dateISO: "Please enter a valid date (ISO).",
+ number: "Please enter a valid number.",
+ digits: "Please enter only digits.",
+ creditcard: "Please enter a valid credit card number.",
+ equalTo: "Please enter the same value again.",
+ accept: "Please enter a value with a valid extension.",
+ maxlength: $.validator.format("Please enter no more than {0} characters."),
+ minlength: $.validator.format("Please enter at least {0} characters."),
+ rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
+ range: $.validator.format("Please enter a value between {0} and {1}."),
+ max: $.validator.format("Please enter a value less than or equal to {0}."),
+ min: $.validator.format("Please enter a value greater than or equal to {0}.")
+ },
+
+ autoCreateRanges: false,
+
+ prototype: {
+
+ init: function() {
+ this.labelContainer = $(this.settings.errorLabelContainer);
+ this.errorContext = this.labelContainer.length && this.labelContainer || $(this.currentForm);
+ this.containers = $(this.settings.errorContainer).add( this.settings.errorLabelContainer );
+ this.submitted = {};
+ this.valueCache = {};
+ this.pendingRequest = 0;
+ this.pending = {};
+ this.invalid = {};
+ this.reset();
+
+ var groups = (this.groups = {});
+ $.each(this.settings.groups, function(key, value) {
+ $.each(value.split(/\s/), function(index, name) {
+ groups[name] = key;
+ });
+ });
+ var rules = this.settings.rules;
+ $.each(rules, function(key, value) {
+ rules[key] = $.validator.normalizeRule(value);
+ });
+
+ function delegate(event) {
+ var validator = $.data(this[0].form, "validator"),
+ eventType = "on" + event.type.replace(/^validate/, "");
+ validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event);
+ }
+ $(this.currentForm)
+ .validateDelegate("[type='text'], [type='password'], [type='file'], select, textarea, " +
+ "[type='number'], [type='search'] ,[type='tel'], [type='url'], " +
+ "[type='email'], [type='datetime'], [type='date'], [type='month'], " +
+ "[type='week'], [type='time'], [type='datetime-local'], " +
+ "[type='range'], [type='color'] ",
+ "focusin focusout keyup", delegate)
+ .validateDelegate("[type='radio'], [type='checkbox'], select, option", "click", delegate);
+
+ if (this.settings.invalidHandler)
+ $(this.currentForm).bind("invalid-form.validate", this.settings.invalidHandler);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/form
+ form: function() {
+ this.checkForm();
+ $.extend(this.submitted, this.errorMap);
+ this.invalid = $.extend({}, this.errorMap);
+ if (!this.valid())
+ $(this.currentForm).triggerHandler("invalid-form", [this]);
+ this.showErrors();
+ return this.valid();
+ },
+
+ // 원본소스
+ /*
+ checkForm: function() {
+ this.prepareForm();
+ for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+ this.check( elements[i] );
+ }
+ return this.valid();
+ },
+ */
+
+ // 수정소스 : 동일한 name 속성의 개체 array에 대해서도 validation을 하도록 변경
+ checkForm: function() {
+ this.prepareForm();
+ for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+ if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
+ for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
+ this.check( this.findByName( elements[i].name )[cnt] );
+ }
+ } else {
+ this.check( elements[i] );
+ }
+ }
+ return this.valid();
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/element
+ element: function( element ) {
+ element = this.validationTargetFor( this.clean( element ) );
+ this.lastElement = element;
+ this.prepareElement( element );
+ this.currentElements = $(element);
+ var result = this.check( element );
+ if ( result ) {
+ delete this.invalid[element.name];
+ } else {
+ this.invalid[element.name] = true;
+ }
+ if ( !this.numberOfInvalids() ) {
+ // Hide error containers on last error
+ this.toHide = this.toHide.add( this.containers );
+ }
+ this.showErrors();
+ return result;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/showErrors
+ showErrors: function(errors) {
+ if(errors) {
+ // add items to error list and map
+ $.extend( this.errorMap, errors );
+ this.errorList = [];
+ for ( var name in errors ) {
+ this.errorList.push({
+ message: errors[name],
+ element: this.findByName(name)[0]
+ });
+ }
+ // remove items from success list
+ this.successList = $.grep( this.successList, function(element) {
+ return !(element.name in errors);
+ });
+ }
+ this.settings.showErrors
+ ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
+ : this.defaultShowErrors();
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/resetForm
+ resetForm: function() {
+ if ( $.fn.resetForm )
+ $( this.currentForm ).resetForm();
+ this.submitted = {};
+ this.lastElement = null;
+ this.prepareForm();
+ this.hideErrors();
+ this.elements().removeClass( this.settings.errorClass );
+ },
+
+ numberOfInvalids: function() {
+ return this.objectLength(this.invalid);
+ },
+
+ objectLength: function( obj ) {
+ var count = 0;
+ for ( var i in obj )
+ count++;
+ return count;
+ },
+
+ hideErrors: function() {
+ this.addWrapper( this.toHide ).hide();
+ },
+
+ valid: function() {
+ return this.size() == 0;
+ },
+
+ size: function() {
+ return this.errorList.length;
+ },
+
+ focusInvalid: function() {
+ if( this.settings.focusInvalid ) {
+ try {
+ $(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
+ .filter(":visible")
+ .focus()
+ // manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
+ .trigger("focusin");
+ } catch(e) {
+ // ignore IE throwing errors when focusing hidden elements
+ }
+ }
+ },
+
+ findLastActive: function() {
+ var lastActive = this.lastActive;
+ return lastActive && $.grep(this.errorList, function(n) {
+ return n.element.name == lastActive.name;
+ }).length == 1 && lastActive;
+ },
+
+ elements: function() {
+ var validator = this,
+ rulesCache = {};
+
+ // select all valid inputs inside the form (no submit or reset buttons)
+ return $(this.currentForm)
+ .find("input, select, textarea")
+ .not(":submit, :reset, :image, [disabled]")
+ .not( this.settings.ignore )
+ .filter(function() {
+ !this.name && validator.settings.debug && window.console && console.error( "%o has no name assigned", this);
+
+ // select only the first element for each name, and only those with rules specified
+ if ( this.name in rulesCache || !validator.objectLength($(this).rules()) )
+ return false;
+
+ rulesCache[this.name] = true;
+ return true;
+ });
+ },
+
+ clean: function( selector ) {
+ return $( selector )[0];
+ },
+
+ errors: function() {
+ return $( this.settings.errorElement + "." + this.settings.errorClass, this.errorContext );
+ },
+
+ reset: function() {
+ this.successList = [];
+ this.errorList = [];
+ this.errorMap = {};
+ this.toShow = $([]);
+ this.toHide = $([]);
+ this.currentElements = $([]);
+ },
+
+ prepareForm: function() {
+ this.reset();
+ this.toHide = this.errors().add( this.containers );
+ },
+
+ prepareElement: function( element ) {
+ this.reset();
+ this.toHide = this.errorsFor(element);
+ },
+
+ check: function( element ) {
+ element = this.validationTargetFor( this.clean( element ) );
+
+ var rules = $(element).rules();
+ var dependencyMismatch = false;
+ for (var method in rules ) {
+ var rule = { method: method, parameters: rules[method] };
+ try {
+ var result = $.validator.methods[method].call( this, element.value.replace(/\r/g, ""), element, rule.parameters );
+
+ // if a method indicates that the field is optional and therefore valid,
+ // don't mark it as valid when there are no other rules
+ if ( result == "dependency-mismatch" ) {
+ dependencyMismatch = true;
+ continue;
+ }
+ dependencyMismatch = false;
+
+ if ( result == "pending" ) {
+ this.toHide = this.toHide.not( this.errorsFor(element) );
+ return;
+ }
+
+ if( !result ) {
+ this.formatAndAdd( element, rule );
+ return false;
+ }
+ } catch(e) {
+ this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
+ + ", check the '" + rule.method + "' method", e);
+ throw e;
+ }
+ }
+ if (dependencyMismatch)
+ return;
+ if ( this.objectLength(rules) )
+ this.successList.push(element);
+ return true;
+ },
+
+ // return the custom message for the given element and validation method
+ // specified in the element's "messages" metadata
+ customMetaMessage: function(element, method) {
+ if (!$.metadata)
+ return;
+
+ var meta = this.settings.meta
+ ? $(element).metadata()[this.settings.meta]
+ : $(element).metadata();
+
+ return meta && meta.messages && meta.messages[method];
+ },
+
+ // return the custom message for the given element name and validation method
+ customMessage: function( name, method ) {
+ var m = this.settings.messages[name];
+ return m && (m.constructor == String
+ ? m
+ : m[method]);
+ },
+
+ // return the first defined argument, allowing empty strings
+ findDefined: function() {
+ for(var i = 0; i < arguments.length; i++) {
+ if (arguments[i] !== undefined)
+ return arguments[i];
+ }
+ return undefined;
+ },
+
+ defaultMessage: function( element, method) {
+ return this.findDefined(
+ this.customMessage( element.name, method ),
+ this.customMetaMessage( element, method ),
+ // title is never undefined, so handle empty string as undefined
+ !this.settings.ignoreTitle && element.title || undefined,
+ $.validator.messages[method],
+ "<strong>Warning: No message defined for " + element.name + "</strong>"
+ );
+ },
+
+ formatAndAdd: function( element, rule ) {
+ var message = this.defaultMessage( element, rule.method ),
+ theregex = /\$?\{(\d+)\}/g;
+ if ( typeof message == "function" ) {
+ message = message.call(this, rule.parameters, element);
+ } else if (theregex.test(message)) {
+ message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
+ }
+ this.errorList.push({
+ message: message,
+ element: element
+ });
+
+ this.errorMap[element.name] = message;
+ this.submitted[element.name] = message;
+ },
+
+ addWrapper: function(toToggle) {
+ if ( this.settings.wrapper )
+ toToggle = toToggle.add( toToggle.parent( this.settings.wrapper ) );
+ return toToggle;
+ },
+
+ defaultShowErrors: function() {
+ for ( var i = 0; this.errorList[i]; i++ ) {
+ var error = this.errorList[i];
+ this.settings.highlight && this.settings.highlight.call( this, error.element, this.settings.errorClass, this.settings.validClass );
+ this.showLabel( error.element, error.message );
+ }
+ if( this.errorList.length ) {
+ this.toShow = this.toShow.add( this.containers );
+ }
+ if (this.settings.success) {
+ for ( var i = 0; this.successList[i]; i++ ) {
+ this.showLabel( this.successList[i] );
+ }
+ }
+ if (this.settings.unhighlight) {
+ for ( var i = 0, elements = this.validElements(); elements[i]; i++ ) {
+ this.settings.unhighlight.call( this, elements[i], this.settings.errorClass, this.settings.validClass );
+ }
+ }
+ this.toHide = this.toHide.not( this.toShow );
+ this.hideErrors();
+ this.addWrapper( this.toShow ).show();
+ },
+
+ validElements: function() {
+ return this.currentElements.not(this.invalidElements());
+ },
+
+ invalidElements: function() {
+ return $(this.errorList).map(function() {
+ return this.element;
+ });
+ },
+
+ showLabel: function(element, message) {
+ var label = this.errorsFor( element );
+ if ( label.length ) {
+ // refresh error/success class
+ label.removeClass( this.settings.validClass ).addClass( this.settings.errorClass );
+
+ // check if we have a generated label, replace the message then
+ label.attr("generated") && label.html(message);
+ } else {
+ // create label
+ label = $("<" + this.settings.errorElement + "/>")
+ .attr({"for": this.idOrName(element), generated: true})
+ .addClass(this.settings.errorClass)
+ .html(message || "");
+ if ( this.settings.wrapper ) {
+ // make sure the element is visible, even in IE
+ // actually showing the wrapped element is handled elsewhere
+ label = label.hide().show().wrap("<" + this.settings.wrapper + "/>").parent();
+ }
+ if ( !this.labelContainer.append(label).length )
+ this.settings.errorPlacement
+ ? this.settings.errorPlacement(label, $(element) )
+ : label.insertAfter(element);
+ }
+ if ( !message && this.settings.success ) {
+ label.text("");
+ typeof this.settings.success == "string"
+ ? label.addClass( this.settings.success )
+ : this.settings.success( label );
+ }
+ this.toShow = this.toShow.add(label);
+ },
+
+ errorsFor: function(element) {
+ var name = this.idOrName(element);
+ return this.errors().filter(function() {
+ return $(this).attr('for') == name;
+ });
+ },
+
+ idOrName: function(element) {
+ return this.groups[element.name] || (this.checkable(element) ? element.name : element.id || element.name);
+ },
+
+ validationTargetFor: function(element) {
+ // if radio/checkbox, validate first element in group instead
+ if (this.checkable(element)) {
+ element = this.findByName( element.name ).not(this.settings.ignore)[0];
+ }
+ return element;
+ },
+
+ checkable: function( element ) {
+ return /radio|checkbox/i.test(element.type);
+ },
+
+ findByName: function( name ) {
+ // select by name and filter by form for performance over form.find("[name=...]")
+ var form = this.currentForm;
+ return $(document.getElementsByName(name)).map(function(index, element) {
+ return element.form == form && element.name == name && element || null;
+ });
+ },
+
+ getLength: function(value, element) {
+ switch( element.nodeName.toLowerCase() ) {
+ case 'select':
+ return $("option:selected", element).length;
+ case 'input':
+ if( this.checkable( element) )
+ return this.findByName(element.name).filter(':checked').length;
+ }
+ return value.length;
+ },
+
+ depend: function(param, element) {
+ return this.dependTypes[typeof param]
+ ? this.dependTypes[typeof param](param, element)
+ : true;
+ },
+
+ dependTypes: {
+ "boolean": function(param, element) {
+ return param;
+ },
+ "string": function(param, element) {
+ return !!$(param, element.form).length;
+ },
+ "function": function(param, element) {
+ return param(element);
+ }
+ },
+
+ optional: function(element) {
+ return !$.validator.methods.required.call(this, $.trim(element.value), element) && "dependency-mismatch";
+ },
+
+ startRequest: function(element) {
+ if (!this.pending[element.name]) {
+ this.pendingRequest++;
+ this.pending[element.name] = true;
+ }
+ },
+
+ stopRequest: function(element, valid) {
+ this.pendingRequest--;
+ // sometimes synchronization fails, make sure pendingRequest is never < 0
+ if (this.pendingRequest < 0)
+ this.pendingRequest = 0;
+ delete this.pending[element.name];
+ if ( valid && this.pendingRequest == 0 && this.formSubmitted && this.form() ) {
+ $(this.currentForm).submit();
+ this.formSubmitted = false;
+ } else if (!valid && this.pendingRequest == 0 && this.formSubmitted) {
+ $(this.currentForm).triggerHandler("invalid-form", [this]);
+ this.formSubmitted = false;
+ }
+ },
+
+ previousValue: function(element) {
+ return $.data(element, "previousValue") || $.data(element, "previousValue", {
+ old: null,
+ valid: true,
+ message: this.defaultMessage( element, "remote" )
+ });
+ }
+
+ },
+
+ classRuleSettings: {
+ required: {required: true},
+ email: {email: true},
+ url: {url: true},
+ date: {date: true},
+ dateISO: {dateISO: true},
+ dateDE: {dateDE: true},
+ number: {number: true},
+ numberDE: {numberDE: true},
+ digits: {digits: true},
+ creditcard: {creditcard: true}
+ },
+
+ addClassRules: function(className, rules) {
+ className.constructor == String ?
+ this.classRuleSettings[className] = rules :
+ $.extend(this.classRuleSettings, className);
+ },
+
+ classRules: function(element) {
+ var rules = {};
+ var classes = $(element).attr('class');
+ classes && $.each(classes.split(' '), function() {
+ if (this in $.validator.classRuleSettings) {
+ $.extend(rules, $.validator.classRuleSettings[this]);
+ }
+ });
+ return rules;
+ },
+
+ attributeRules: function(element) {
+ var rules = {};
+ var $element = $(element);
+
+ for (var method in $.validator.methods) {
+ var value;
+ // If .prop exists (jQuery >= 1.6), use it to get true/false for required
+ if (method === 'required' && typeof $.fn.prop === 'function') {
+ value = $element.prop(method);
+ } else {
+ value = $element.attr(method);
+ }
+ if (value) {
+ rules[method] = value;
+ } else if ($element[0].getAttribute("type") === method) {
+ rules[method] = true;
+ }
+ }
+
+ // maxlength may be returned as -1, 2147483647 (IE) and 524288 (safari) for text inputs
+ if (rules.maxlength && /-1|2147483647|524288/.test(rules.maxlength)) {
+ delete rules.maxlength;
+ }
+
+ return rules;
+ },
+
+ metadataRules: function(element) {
+ if (!$.metadata) return {};
+
+ var meta = $.data(element.form, 'validator').settings.meta;
+ return meta ?
+ $(element).metadata()[meta] :
+ $(element).metadata();
+ },
+
+ staticRules: function(element) {
+ var rules = {};
+ var validator = $.data(element.form, 'validator');
+ if (validator.settings.rules) {
+ rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
+ }
+ return rules;
+ },
+
+ normalizeRules: function(rules, element) {
+ // handle dependency check
+ $.each(rules, function(prop, val) {
+ // ignore rule when param is explicitly false, eg. required:false
+ if (val === false) {
+ delete rules[prop];
+ return;
+ }
+ if (val.param || val.depends) {
+ var keepRule = true;
+ switch (typeof val.depends) {
+ case "string":
+ keepRule = !!$(val.depends, element.form).length;
+ break;
+ case "function":
+ keepRule = val.depends.call(element, element);
+ break;
+ }
+ if (keepRule) {
+ rules[prop] = val.param !== undefined ? val.param : true;
+ } else {
+ delete rules[prop];
+ }
+ }
+ });
+
+ // evaluate parameters
+ $.each(rules, function(rule, parameter) {
+ rules[rule] = $.isFunction(parameter) ? parameter(element) : parameter;
+ });
+
+ // clean number parameters
+ $.each(['minlength', 'maxlength', 'min', 'max'], function() {
+ if (rules[this]) {
+ rules[this] = Number(rules[this]);
+ }
+ });
+ $.each(['rangelength', 'range'], function() {
+ if (rules[this]) {
+ rules[this] = [Number(rules[this][0]), Number(rules[this][1])];
+ }
+ });
+
+ if ($.validator.autoCreateRanges) {
+ // auto-create ranges
+ if (rules.min && rules.max) {
+ rules.range = [rules.min, rules.max];
+ delete rules.min;
+ delete rules.max;
+ }
+ if (rules.minlength && rules.maxlength) {
+ rules.rangelength = [rules.minlength, rules.maxlength];
+ delete rules.minlength;
+ delete rules.maxlength;
+ }
+ }
+
+ // To support custom messages in metadata ignore rule methods titled "messages"
+ if (rules.messages) {
+ delete rules.messages;
+ }
+
+ return rules;
+ },
+
+ // Converts a simple string to a {string: true} rule, e.g., "required" to {required:true}
+ normalizeRule: function(data) {
+ if( typeof data == "string" ) {
+ var transformed = {};
+ $.each(data.split(/\s/), function() {
+ transformed[this] = true;
+ });
+ data = transformed;
+ }
+ return data;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Validator/addMethod
+ addMethod: function(name, method, message) {
+ $.validator.methods[name] = method;
+ $.validator.messages[name] = message != undefined ? message : $.validator.messages[name];
+ if (method.length < 3) {
+ $.validator.addClassRules(name, $.validator.normalizeRule(name));
+ }
+ },
+
+ methods: {
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/required
+ required: function(value, element, param) {
+ // check if dependency is met
+ if ( !this.depend(param, element) )
+ return "dependency-mismatch";
+ switch( element.nodeName.toLowerCase() ) {
+ case 'select':
+ // could be an array for select-multiple or a string, both are fine this way
+ var val = $(element).val();
+ return val && val.length > 0;
+ case 'input':
+ if ( this.checkable(element) )
+ return this.getLength(value, element) > 0;
+ default:
+ return $.trim(value).length > 0;
+ }
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/remote
+ remote: function(value, element, param) {
+ if ( this.optional(element) )
+ return "dependency-mismatch";
+
+ var previous = this.previousValue(element);
+ if (!this.settings.messages[element.name] )
+ this.settings.messages[element.name] = {};
+ previous.originalMessage = this.settings.messages[element.name].remote;
+ this.settings.messages[element.name].remote = previous.message;
+
+ param = typeof param == "string" && {url:param} || param;
+
+ if ( this.pending[element.name] ) {
+ return "pending";
+ }
+ if ( previous.old === value ) {
+ return previous.valid;
+ }
+
+ previous.old = value;
+ var validator = this;
+ this.startRequest(element);
+ var data = {};
+ data[element.name] = value;
+ $.ajax($.extend(true, {
+ url: param,
+ mode: "abort",
+ port: "validate" + element.name,
+ dataType: "json",
+ data: data,
+ success: function(response) {
+ validator.settings.messages[element.name].remote = previous.originalMessage;
+ var valid = response === true;
+ if ( valid ) {
+ var submitted = validator.formSubmitted;
+ validator.prepareElement(element);
+ validator.formSubmitted = submitted;
+ validator.successList.push(element);
+ validator.showErrors();
+ } else {
+ var errors = {};
+ var message = response || validator.defaultMessage( element, "remote" );
+ errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
+ validator.showErrors(errors);
+ }
+ previous.valid = valid;
+ validator.stopRequest(element, valid);
+ }
+ }, param));
+ return "pending";
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/minlength
+ minlength: function(value, element, param) {
+ return this.optional(element) || this.getLength($.trim(value), element) >= param;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/maxlength
+ maxlength: function(value, element, param) {
+ return this.optional(element) || this.getLength($.trim(value), element) <= param;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/rangelength
+ rangelength: function(value, element, param) {
+ var length = this.getLength($.trim(value), element);
+ return this.optional(element) || ( length >= param[0] && length <= param[1] );
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/min
+ min: function( value, element, param ) {
+ return this.optional(element) || value >= param;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/max
+ max: function( value, element, param ) {
+ return this.optional(element) || value <= param;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/range
+ range: function( value, element, param ) {
+ return this.optional(element) || ( value >= param[0] && value <= param[1] );
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/email
+ email: function(value, element) {
+ // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
+ return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/url
+ url: function(value, element) {
+ // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
+ return this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/date
+ date: function(value, element) {
+ return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/dateISO
+ dateISO: function(value, element) {
+ return this.optional(element) || /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(value);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/number
+ number: function(value, element) {
+ return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/.test(value);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/digits
+ digits: function(value, element) {
+ return this.optional(element) || /^\d+$/.test(value);
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/creditcard
+ // based on http://en.wikipedia.org/wiki/Luhn
+ creditcard: function(value, element) {
+ if ( this.optional(element) )
+ return "dependency-mismatch";
+ // accept only spaces, digits and dashes
+ if (/[^0-9 -]+/.test(value))
+ return false;
+ var nCheck = 0,
+ nDigit = 0,
+ bEven = false;
+
+ value = value.replace(/\D/g, "");
+
+ for (var n = value.length - 1; n >= 0; n--) {
+ var cDigit = value.charAt(n);
+ var nDigit = parseInt(cDigit, 10);
+ if (bEven) {
+ if ((nDigit *= 2) > 9)
+ nDigit -= 9;
+ }
+ nCheck += nDigit;
+ bEven = !bEven;
+ }
+
+ return (nCheck % 10) == 0;
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/accept
+ accept: function(value, element, param) {
+ param = typeof param == "string" ? param.replace(/,/g, '|') : "png|jpe?g|gif";
+ return this.optional(element) || value.match(new RegExp(".(" + param + ")$", "i"));
+ },
+
+ // http://docs.jquery.com/Plugins/Validation/Methods/equalTo
+ equalTo: function(value, element, param) {
+ // bind to the blur event of the target in order to revalidate whenever the target field is updated
+ // TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
+ var target = $(param).unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
+ $(element).valid();
+ });
+ return value == target.val();
+ }
+
+ }
+
+});
+
+// deprecated, use $.validator.format instead
+$.format = $.validator.format;
+
+})(jQuery);
+
+// ajax mode: abort
+// usage: $.ajax({ mode: "abort"[, port: "uniqueport"]});
+// if mode:"abort" is used, the previous request on that port (port can be undefined) is aborted via XMLHttpRequest.abort()
+;(function($) {
+ var pendingRequests = {};
+ // Use a prefilter if available (1.5+)
+ if ( $.ajaxPrefilter ) {
+ $.ajaxPrefilter(function(settings, _, xhr) {
+ var port = settings.port;
+ if (settings.mode == "abort") {
+ if ( pendingRequests[port] ) {
+ pendingRequests[port].abort();
+ }
+ pendingRequests[port] = xhr;
+ }
+ });
+ } else {
+ // Proxy ajax
+ var ajax = $.ajax;
+ $.ajax = function(settings) {
+ var mode = ( "mode" in settings ? settings : $.ajaxSettings ).mode,
+ port = ( "port" in settings ? settings : $.ajaxSettings ).port;
+ if (mode == "abort") {
+ if ( pendingRequests[port] ) {
+ pendingRequests[port].abort();
+ }
+ return (pendingRequests[port] = ajax.apply(this, arguments));
+ }
+ return ajax.apply(this, arguments);
+ };
+ }
+})(jQuery);
+
+// provides cross-browser focusin and focusout events
+// IE has native support, in other browsers, use event caputuring (neither bubbles)
+
+// provides delegate(type: String, delegate: Selector, handler: Callback) plugin for easier event delegation
+// handler is only called when $(event.target).is(delegate), in the scope of the jquery-object for event.target
+;(function($) {
+ // only implement if not provided by jQuery core (since 1.4)
+ // TODO verify if jQuery 1.4's implementation is compatible with older jQuery special-event APIs
+ if (!jQuery.event.special.focusin && !jQuery.event.special.focusout && document.addEventListener) {
+ $.each({
+ focus: 'focusin',
+ blur: 'focusout'
+ }, function( original, fix ){
+ $.event.special[fix] = {
+ setup:function() {
+ this.addEventListener( original, handler, true );
+ },
+ teardown:function() {
+ this.removeEventListener( original, handler, true );
+ },
+ handler: function(e) {
+ arguments[0] = $.event.fix(e);
+ arguments[0].type = fix;
+ return $.event.handle.apply(this, arguments);
+ }
+ };
+ function handler(e) {
+ e = $.event.fix(e);
+ e.type = fix;
+ return $.event.handle.call(this, e);
+ }
+ });
+ };
+ $.extend($.fn, {
+ validateDelegate: function(delegate, type, handler) {
+ return this.bind(type, function(event) {
+ var target = $(event.target);
+ if (target.is(delegate)) {
+ return handler.apply(target, arguments);
+ }
+ });
+ }
+ });
+})(jQuery);
+
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
+
+/*
+ * jScrollPane - v2.0.0beta12 - 2012-07-24
+ * http://jscrollpane.kelvinluck.com/
+ *
+ * Copyright (c) 2010 Kelvin Luck
+ * Dual licensed under the MIT and GPL licenses.
+ */
+(function(b,a,c){b.fn.jScrollPane=function(e){function d(D,O){var ay,Q=this,Y,aj,v,al,T,Z,y,q,az,aE,au,i,I,h,j,aa,U,ap,X,t,A,aq,af,am,G,l,at,ax,x,av,aH,f,L,ai=true,P=true,aG=false,k=false,ao=D.clone(false,false).empty(),ac=b.fn.mwheelIntent?"mwheelIntent.jsp":"mousewheel.jsp";aH=D.css("paddingTop")+" "+D.css("paddingRight")+" "+D.css("paddingBottom")+" "+D.css("paddingLeft");f=(parseInt(D.css("paddingLeft"),10)||0)+(parseInt(D.css("paddingRight"),10)||0);function ar(aQ){var aL,aN,aM,aJ,aI,aP,aO=false,aK=false;ay=aQ;if(Y===c){aI=D.scrollTop();aP=D.scrollLeft();D.css({overflow:"hidden",padding:0});aj=D.innerWidth()+f;v=D.innerHeight();D.width(aj);Y=b('<div class="jspPane" />').css("padding",aH).append(D.children());al=b('<div class="jspContainer" />').css({width:aj+"px",height:v+"px"}).append(Y).appendTo(D)}else{D.css("width","");aO=ay.stickToBottom&&K();aK=ay.stickToRight&&B();aJ=D.innerWidth()+f!=aj||D.outerHeight()!=v;if(aJ){aj=D.innerWidth()+f;v=D.innerHeight();al.css({width:aj+"px",height:v+"px"})}if(!aJ&&L==T&&Y.outerHeight()==Z){D.width(aj);return}L=T;Y.css("width","");D.width(aj);al.find(">.jspVerticalBar,>.jspHorizontalBar").remove().end()}Y.css("overflow","auto");if(aQ.contentWidth){T=aQ.contentWidth}else{T=Y[0].scrollWidth}Z=Y[0].scrollHeight;Y.css("overflow","");y=T/aj;q=Z/v;az=q>1;aE=y>1;if(!(aE||az)){D.removeClass("jspScrollable");Y.css({top:0,width:al.width()-f});n();E();R();w()}else{D.addClass("jspScrollable");aL=ay.maintainPosition&&(I||aa);if(aL){aN=aC();aM=aA()}aF();z();F();if(aL){N(aK?(T-aj):aN,false);M(aO?(Z-v):aM,false)}J();ag();an();if(ay.enableKeyboardNavigation){S()}if(ay.clickOnTrack){p()}C();if(ay.hijackInternalLinks){m()}}if(ay.autoReinitialise&&!av){av=setInterval(function(){ar(ay)},ay.autoReinitialiseDelay)}else{if(!ay.autoReinitialise&&av){clearInterval(av)}}aI&&D.scrollTop(0)&&M(aI,false);aP&&D.scrollLeft(0)&&N(aP,false);D.trigger("jsp-initialised",[aE||az])}function aF(){if(az){al.append(b('<div class="jspVerticalBar" />').append(b('<div class="jspCap jspCapTop" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragTop" />'),b('<div class="jspDragBottom" />'))),b('<div class="jspCap jspCapBottom" />')));U=al.find(">.jspVerticalBar");ap=U.find(">.jspTrack");au=ap.find(">.jspDrag");if(ay.showArrows){aq=b('<a class="jspArrow jspArrowUp" />').bind("mousedown.jsp",aD(0,-1)).bind("click.jsp",aB);af=b('<a class="jspArrow jspArrowDown" />').bind("mousedown.jsp",aD(0,1)).bind("click.jsp",aB);if(ay.arrowScrollOnHover){aq.bind("mouseover.jsp",aD(0,-1,aq));af.bind("mouseover.jsp",aD(0,1,af))}ak(ap,ay.verticalArrowPositions,aq,af)}t=v;al.find(">.jspVerticalBar>.jspCap:visible,>.jspVerticalBar>.jspArrow").each(function(){t-=b(this).outerHeight()});au.hover(function(){au.addClass("jspHover")},function(){au.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);au.addClass("jspActive");var s=aI.pageY-au.position().top;b("html").bind("mousemove.jsp",function(aJ){V(aJ.pageY-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});o()}}function o(){ap.height(t+"px");I=0;X=ay.verticalGutter+ap.outerWidth();Y.width(aj-X-f);try{if(U.position().left===0){Y.css("margin-left",X+"px")}}catch(s){}}function z(){if(aE){al.append(b('<div class="jspHorizontalBar" />').append(b('<div class="jspCap jspCapLeft" />'),b('<div class="jspTrack" />').append(b('<div class="jspDrag" />').append(b('<div class="jspDragLeft" />'),b('<div class="jspDragRight" />'))),b('<div class="jspCap jspCapRight" />')));am=al.find(">.jspHorizontalBar");G=am.find(">.jspTrack");h=G.find(">.jspDrag");if(ay.showArrows){ax=b('<a class="jspArrow jspArrowLeft" />').bind("mousedown.jsp",aD(-1,0)).bind("click.jsp",aB);x=b('<a class="jspArrow jspArrowRight" />').bind("mousedown.jsp",aD(1,0)).bind("click.jsp",aB);
+if(ay.arrowScrollOnHover){ax.bind("mouseover.jsp",aD(-1,0,ax));x.bind("mouseover.jsp",aD(1,0,x))}ak(G,ay.horizontalArrowPositions,ax,x)}h.hover(function(){h.addClass("jspHover")},function(){h.removeClass("jspHover")}).bind("mousedown.jsp",function(aI){b("html").bind("dragstart.jsp selectstart.jsp",aB);h.addClass("jspActive");var s=aI.pageX-h.position().left;b("html").bind("mousemove.jsp",function(aJ){W(aJ.pageX-s,false)}).bind("mouseup.jsp mouseleave.jsp",aw);return false});l=al.innerWidth();ah()}}function ah(){al.find(">.jspHorizontalBar>.jspCap:visible,>.jspHorizontalBar>.jspArrow").each(function(){l-=b(this).outerWidth()});G.width(l+"px");aa=0}function F(){if(aE&&az){var aI=G.outerHeight(),s=ap.outerWidth();t-=aI;b(am).find(">.jspCap:visible,>.jspArrow").each(function(){l+=b(this).outerWidth()});l-=s;v-=s;aj-=aI;G.parent().append(b('<div class="jspCorner" />').css("width",aI+"px"));o();ah()}if(aE){Y.width((al.outerWidth()-f)+"px")}Z=Y.outerHeight();q=Z/v;if(aE){at=Math.ceil(1/y*l);if(at>ay.horizontalDragMaxWidth){at=ay.horizontalDragMaxWidth}else{if(at<ay.horizontalDragMinWidth){at=ay.horizontalDragMinWidth}}h.width(at+"px");j=l-at;ae(aa)}if(az){A=Math.ceil(1/q*t);if(A>ay.verticalDragMaxHeight){A=ay.verticalDragMaxHeight}else{if(A<ay.verticalDragMinHeight){A=ay.verticalDragMinHeight}}au.height(A+"px");i=t-A;ad(I)}}function ak(aJ,aL,aI,s){var aN="before",aK="after",aM;if(aL=="os"){aL=/Mac/.test(navigator.platform)?"after":"split"}if(aL==aN){aK=aL}else{if(aL==aK){aN=aL;aM=aI;aI=s;s=aM}}aJ[aN](aI)[aK](s)}function aD(aI,s,aJ){return function(){H(aI,s,this,aJ);this.blur();return false}}function H(aL,aK,aO,aN){aO=b(aO).addClass("jspActive");var aM,aJ,aI=true,s=function(){if(aL!==0){Q.scrollByX(aL*ay.arrowButtonSpeed)}if(aK!==0){Q.scrollByY(aK*ay.arrowButtonSpeed)}aJ=setTimeout(s,aI?ay.initialDelay:ay.arrowRepeatFreq);aI=false};s();aM=aN?"mouseout.jsp":"mouseup.jsp";aN=aN||b("html");aN.bind(aM,function(){aO.removeClass("jspActive");aJ&&clearTimeout(aJ);aJ=null;aN.unbind(aM)})}function p(){w();if(az){ap.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageY-aO.top-I,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageY-aR.top-A/2,aP=v*ay.scrollPagePercent,aQ=i*aP/(Z-v);if(aM<0){if(I-aQ>aS){Q.scrollByY(-aP)}else{V(aS)}}else{if(aM>0){if(I+aQ<aS){Q.scrollByY(aP)}else{V(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}if(aE){G.bind("mousedown.jsp",function(aN){if(aN.originalTarget===c||aN.originalTarget==aN.currentTarget){var aL=b(this),aO=aL.offset(),aM=aN.pageX-aO.left-aa,aJ,aI=true,s=function(){var aR=aL.offset(),aS=aN.pageX-aR.left-at/2,aP=aj*ay.scrollPagePercent,aQ=j*aP/(T-aj);if(aM<0){if(aa-aQ>aS){Q.scrollByX(-aP)}else{W(aS)}}else{if(aM>0){if(aa+aQ<aS){Q.scrollByX(aP)}else{W(aS)}}else{aK();return}}aJ=setTimeout(s,aI?ay.initialDelay:ay.trackClickRepeatFreq);aI=false},aK=function(){aJ&&clearTimeout(aJ);aJ=null;b(document).unbind("mouseup.jsp",aK)};s();b(document).bind("mouseup.jsp",aK);return false}})}}function w(){if(G){G.unbind("mousedown.jsp")}if(ap){ap.unbind("mousedown.jsp")}}function aw(){b("html").unbind("dragstart.jsp selectstart.jsp mousemove.jsp mouseup.jsp mouseleave.jsp");if(au){au.removeClass("jspActive")}if(h){h.removeClass("jspActive")}}function V(s,aI){if(!az){return}if(s<0){s=0}else{if(s>i){s=i}}if(aI===c){aI=ay.animateScroll}if(aI){Q.animate(au,"top",s,ad)}else{au.css("top",s);ad(s)}}function ad(aI){if(aI===c){aI=au.position().top}al.scrollTop(0);I=aI;var aL=I===0,aJ=I==i,aK=aI/i,s=-aK*(Z-v);if(ai!=aL||aG!=aJ){ai=aL;aG=aJ;D.trigger("jsp-arrow-change",[ai,aG,P,k])}u(aL,aJ);Y.css("top",s);D.trigger("jsp-scroll-y",[-s,aL,aJ]).trigger("scroll")}function W(aI,s){if(!aE){return}if(aI<0){aI=0}else{if(aI>j){aI=j}}if(s===c){s=ay.animateScroll}if(s){Q.animate(h,"left",aI,ae)
+}else{h.css("left",aI);ae(aI)}}function ae(aI){if(aI===c){aI=h.position().left}al.scrollTop(0);aa=aI;var aL=aa===0,aK=aa==j,aJ=aI/j,s=-aJ*(T-aj);if(P!=aL||k!=aK){P=aL;k=aK;D.trigger("jsp-arrow-change",[ai,aG,P,k])}r(aL,aK);Y.css("left",s);D.trigger("jsp-scroll-x",[-s,aL,aK]).trigger("scroll")}function u(aI,s){if(ay.showArrows){aq[aI?"addClass":"removeClass"]("jspDisabled");af[s?"addClass":"removeClass"]("jspDisabled")}}function r(aI,s){if(ay.showArrows){ax[aI?"addClass":"removeClass"]("jspDisabled");x[s?"addClass":"removeClass"]("jspDisabled")}}function M(s,aI){var aJ=s/(Z-v);V(aJ*i,aI)}function N(aI,s){var aJ=aI/(T-aj);W(aJ*j,s)}function ab(aV,aQ,aJ){var aN,aK,aL,s=0,aU=0,aI,aP,aO,aS,aR,aT;try{aN=b(aV)}catch(aM){return}aK=aN.outerHeight();aL=aN.outerWidth();al.scrollTop(0);al.scrollLeft(0);while(!aN.is(".jspPane")){s+=aN.position().top;aU+=aN.position().left;aN=aN.offsetParent();if(/^body|html$/i.test(aN[0].nodeName)){return}}aI=aA();aO=aI+v;if(s<aI||aQ){aR=s-ay.verticalGutter}else{if(s+aK>aO){aR=s-v+aK+ay.verticalGutter}}if(aR){M(aR,aJ)}aP=aC();aS=aP+aj;if(aU<aP||aQ){aT=aU-ay.horizontalGutter}else{if(aU+aL>aS){aT=aU-aj+aL+ay.horizontalGutter}}if(aT){N(aT,aJ)}}function aC(){return -Y.position().left}function aA(){return -Y.position().top}function K(){var s=Z-v;return(s>20)&&(s-aA()<10)}function B(){var s=T-aj;return(s>20)&&(s-aC()<10)}function ag(){al.unbind(ac).bind(ac,function(aL,aM,aK,aI){var aJ=aa,s=I;Q.scrollBy(aK*ay.mouseWheelSpeed,-aI*ay.mouseWheelSpeed,false);return aJ==aa&&s==I})}function n(){al.unbind(ac)}function aB(){return false}function J(){Y.find(":input,a").unbind("focus.jsp").bind("focus.jsp",function(s){ab(s.target,false)})}function E(){Y.find(":input,a").unbind("focus.jsp")}function S(){var s,aI,aK=[];aE&&aK.push(am[0]);az&&aK.push(U[0]);Y.focus(function(){D.focus()});D.attr("tabindex",0).unbind("keydown.jsp keypress.jsp").bind("keydown.jsp",function(aN){if(aN.target!==this&&!(aK.length&&b(aN.target).closest(aK).length)){return}var aM=aa,aL=I;switch(aN.keyCode){case 40:case 38:case 34:case 32:case 33:case 39:case 37:s=aN.keyCode;aJ();break;case 35:M(Z-v);s=null;break;case 36:M(0);s=null;break}aI=aN.keyCode==s&&aM!=aa||aL!=I;return !aI}).bind("keypress.jsp",function(aL){if(aL.keyCode==s){aJ()}return !aI});if(ay.hideFocus){D.css("outline","none");if("hideFocus" in al[0]){D.attr("hideFocus",true)}}else{D.css("outline","");if("hideFocus" in al[0]){D.attr("hideFocus",false)}}function aJ(){var aM=aa,aL=I;switch(s){case 40:Q.scrollByY(ay.keyboardSpeed,false);break;case 38:Q.scrollByY(-ay.keyboardSpeed,false);break;case 34:case 32:Q.scrollByY(v*ay.scrollPagePercent,false);break;case 33:Q.scrollByY(-v*ay.scrollPagePercent,false);break;case 39:Q.scrollByX(ay.keyboardSpeed,false);break;case 37:Q.scrollByX(-ay.keyboardSpeed,false);break}aI=aM!=aa||aL!=I;return aI}}function R(){D.attr("tabindex","-1").removeAttr("tabindex").unbind("keydown.jsp keypress.jsp")}function C(){if(location.hash&&location.hash.length>1){var aK,aI,aJ=escape(location.hash.substr(1));try{aK=b("#"+aJ+', a[name="'+aJ+'"]')}catch(s){return}if(aK.length&&Y.find(aJ)){if(al.scrollTop()===0){aI=setInterval(function(){if(al.scrollTop()>0){ab(aK,true);b(document).scrollTop(al.position().top);clearInterval(aI)}},50)}else{ab(aK,true);b(document).scrollTop(al.position().top)}}}}function m(){if(b(document.body).data("jspHijack")){return}b(document.body).data("jspHijack",true);b(document.body).delegate("a[href*=#]","click",function(s){var aI=this.href.substr(0,this.href.indexOf("#")),aK=location.href,aO,aP,aJ,aM,aL,aN;if(location.href.indexOf("#")!==-1){aK=location.href.substr(0,location.href.indexOf("#"))}if(aI!==aK){return}aO=escape(this.href.substr(this.href.indexOf("#")+1));aP;try{aP=b("#"+aO+', a[name="'+aO+'"]')}catch(aQ){return}if(!aP.length){return}aJ=aP.closest(".jspScrollable");aM=aJ.data("jsp");aM.scrollToElement(aP,true);if(aJ[0].scrollIntoView){aL=b(a).scrollTop();aN=aP.offset().top;if(aN<aL||aN>aL+b(a).height()){aJ[0].scrollIntoView()}}s.preventDefault()
+})}function an(){var aJ,aI,aL,aK,aM,s=false;al.unbind("touchstart.jsp touchmove.jsp touchend.jsp click.jsp-touchclick").bind("touchstart.jsp",function(aN){var aO=aN.originalEvent.touches[0];aJ=aC();aI=aA();aL=aO.pageX;aK=aO.pageY;aM=false;s=true}).bind("touchmove.jsp",function(aQ){if(!s){return}var aP=aQ.originalEvent.touches[0],aO=aa,aN=I;Q.scrollTo(aJ+aL-aP.pageX,aI+aK-aP.pageY);aM=aM||Math.abs(aL-aP.pageX)>5||Math.abs(aK-aP.pageY)>5;return aO==aa&&aN==I}).bind("touchend.jsp",function(aN){s=false}).bind("click.jsp-touchclick",function(aN){if(aM){aM=false;return false}})}function g(){var s=aA(),aI=aC();D.removeClass("jspScrollable").unbind(".jsp");D.replaceWith(ao.append(Y.children()));ao.scrollTop(s);ao.scrollLeft(aI);if(av){clearInterval(av)}}b.extend(Q,{reinitialise:function(aI){aI=b.extend({},ay,aI);ar(aI)},scrollToElement:function(aJ,aI,s){ab(aJ,aI,s)},scrollTo:function(aJ,s,aI){N(aJ,aI);M(s,aI)},scrollToX:function(aI,s){N(aI,s)},scrollToY:function(s,aI){M(s,aI)},scrollToPercentX:function(aI,s){N(aI*(T-aj),s)},scrollToPercentY:function(aI,s){M(aI*(Z-v),s)},scrollBy:function(aI,s,aJ){Q.scrollByX(aI,aJ);Q.scrollByY(s,aJ)},scrollByX:function(s,aJ){var aI=aC()+Math[s<0?"floor":"ceil"](s),aK=aI/(T-aj);W(aK*j,aJ)},scrollByY:function(s,aJ){var aI=aA()+Math[s<0?"floor":"ceil"](s),aK=aI/(Z-v);V(aK*i,aJ)},positionDragX:function(s,aI){W(s,aI)},positionDragY:function(aI,s){V(aI,s)},animate:function(aI,aL,s,aK){var aJ={};aJ[aL]=s;aI.animate(aJ,{duration:ay.animateDuration,easing:ay.animateEase,queue:false,step:aK})},getContentPositionX:function(){return aC()},getContentPositionY:function(){return aA()},getContentWidth:function(){return T},getContentHeight:function(){return Z},getPercentScrolledX:function(){return aC()/(T-aj)},getPercentScrolledY:function(){return aA()/(Z-v)},getIsScrollableH:function(){return aE},getIsScrollableV:function(){return az},getContentPane:function(){return Y},scrollToBottom:function(s){V(i,s)},hijackInternalLinks:b.noop,destroy:function(){g()}});ar(O)}e=b.extend({},b.fn.jScrollPane.defaults,e);b.each(["mouseWheelSpeed","arrowButtonSpeed","trackClickSpeed","keyboardSpeed"],function(){e[this]=e[this]||e.speed});return this.each(function(){var f=b(this),g=f.data("jsp");if(g){g.reinitialise(e)}else{b("script",f).filter('[type="text/javascript"],not([type])').remove();g=new d(f,e);f.data("jsp",g)}})};b.fn.jScrollPane.defaults={showArrows:false,maintainPosition:true,stickToBottom:false,stickToRight:false,clickOnTrack:true,autoReinitialise:false,autoReinitialiseDelay:500,verticalDragMinHeight:0,verticalDragMaxHeight:99999,horizontalDragMinWidth:0,horizontalDragMaxWidth:99999,contentWidth:c,animateScroll:false,animateDuration:300,animateEase:"linear",hijackInternalLinks:false,verticalGutter:4,horizontalGutter:4,mouseWheelSpeed:0,arrowButtonSpeed:0,arrowRepeatFreq:50,arrowScrollOnHover:false,trackClickSpeed:0,trackClickRepeatFreq:70,verticalArrowPositions:"split",horizontalArrowPositions:"split",enableKeyboardNavigation:true,hideFocus:false,keyboardSpeed:0,initialDelay:300,speed:30,scrollPagePercent:0.8}})(jQuery,this);
\ No newline at end of file
--- /dev/null
+/*
+ * zClip :: jQuery ZeroClipboard v1.1.1
+ * http://steamdev.com/zclip
+ *
+ * Copyright 2011, SteamDev
+ * Released under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Date: Wed Jun 01, 2011
+ */
+
+(function(a){a.fn.zclip=function(c){if(typeof c=="object"&&!c.length){var b=a.extend({path:"ZeroClipboard.swf",copy:null,beforeCopy:null,afterCopy:null,clickAfter:true,setHandCursor:true,setCSSEffects:true},c);return this.each(function(){var e=a(this);if(e.is(":visible")&&(typeof b.copy=="string"||a.isFunction(b.copy))){ZeroClipboard.setMoviePath(b.path);var d=new ZeroClipboard.Client();if(a.isFunction(b.copy)){e.bind("zClip_copy",b.copy)}if(a.isFunction(b.beforeCopy)){e.bind("zClip_beforeCopy",b.beforeCopy)}if(a.isFunction(b.afterCopy)){e.bind("zClip_afterCopy",b.afterCopy)}d.setHandCursor(b.setHandCursor);d.setCSSEffects(b.setCSSEffects);d.addEventListener("mouseOver",function(f){e.trigger("mouseenter")});d.addEventListener("mouseOut",function(f){e.trigger("mouseleave")});d.addEventListener("mouseDown",function(f){e.trigger("mousedown");if(!a.isFunction(b.copy)){d.setText(b.copy)}else{d.setText(e.triggerHandler("zClip_copy"))}if(a.isFunction(b.beforeCopy)){e.trigger("zClip_beforeCopy")}});d.addEventListener("complete",function(f,g){if(a.isFunction(b.afterCopy)){e.trigger("zClip_afterCopy")}else{if(g.length>500){g=g.substr(0,500)+"...\n\n("+(g.length-500)+" characters not shown)"}e.removeClass("hover");alert("Copied text to clipboard:\n\n "+g)}if(b.clickAfter){e.trigger("click")}});d.glue(e[0],e.parent()[0]);a(window).bind("load resize",function(){d.reposition()})}})}else{if(typeof c=="string"){return this.each(function(){var f=a(this);c=c.toLowerCase();var e=f.data("zclipId");var d=a("#"+e+".zclip");if(c=="remove"){d.remove();f.removeClass("active hover")}else{if(c=="hide"){d.hide();f.removeClass("active hover")}else{if(c=="show"){d.show()}}}})}}}})(jQuery);var ZeroClipboard={version:"1.0.7",clients:{},moviePath:"ZeroClipboard.swf",nextId:1,$:function(a){if(typeof(a)=="string"){a=document.getElementById(a)}if(!a.addClass){a.hide=function(){this.style.display="none"};a.show=function(){this.style.display=""};a.addClass=function(b){this.removeClass(b);this.className+=" "+b};a.removeClass=function(d){var e=this.className.split(/\s+/);var b=-1;for(var c=0;c<e.length;c++){if(e[c]==d){b=c;c=e.length}}if(b>-1){e.splice(b,1);this.className=e.join(" ")}return this};a.hasClass=function(b){return !!this.className.match(new RegExp("\\s*"+b+"\\s*"))}}return a},setMoviePath:function(a){this.moviePath=a},dispatch:function(d,b,c){var a=this.clients[d];if(a){a.receiveEvent(b,c)}},register:function(b,a){this.clients[b]=a},getDOMObjectPosition:function(c,a){var b={left:0,top:0,width:c.width?c.width:c.offsetWidth,height:c.height?c.height:c.offsetHeight};if(c&&(c!=a)){b.left+=c.offsetLeft;b.top+=c.offsetTop}return b},Client:function(a){this.handlers={};this.id=ZeroClipboard.nextId++;this.movieId="ZeroClipboardMovie_"+this.id;ZeroClipboard.register(this.id,this);if(a){this.glue(a)}}};ZeroClipboard.Client.prototype={id:0,ready:false,movie:null,clipText:"",handCursorEnabled:true,cssEffects:true,handlers:null,glue:function(d,b,e){this.domElement=ZeroClipboard.$(d);var f=99;if(this.domElement.style.zIndex){f=parseInt(this.domElement.style.zIndex,10)+1}if(typeof(b)=="string"){b=ZeroClipboard.$(b)}else{if(typeof(b)=="undefined"){b=document.getElementsByTagName("body")[0]}}var c=ZeroClipboard.getDOMObjectPosition(this.domElement,b);this.div=document.createElement("div");this.div.className="zclip";this.div.id="zclip-"+this.movieId;$(this.domElement).data("zclipId","zclip-"+this.movieId);var a=this.div.style;a.position="absolute";a.left=""+c.left+"px";a.top=""+c.top+"px";a.width=""+c.width+"px";a.height=""+c.height+"px";a.zIndex=f;if(typeof(e)=="object"){for(addedStyle in e){a[addedStyle]=e[addedStyle]}}b.appendChild(this.div);this.div.innerHTML=this.getHTML(c.width,c.height)},getHTML:function(d,a){var c="";var b="id="+this.id+"&width="+d+"&height="+a;if(navigator.userAgent.match(/MSIE/)){var e=location.href.match(/^https/i)?"https://":"http://";c+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+e+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+d+'" height="'+a+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+b+'"/><param name="wmode" value="transparent"/></object>'}else{c+='<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+d+'" height="'+a+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+b+'" wmode="transparent" />'}return c},hide:function(){if(this.div){this.div.style.left="-2000px"}},show:function(){this.reposition()},destroy:function(){if(this.domElement&&this.div){this.hide();this.div.innerHTML="";var a=document.getElementsByTagName("body")[0];try{a.removeChild(this.div)}catch(b){}this.domElement=null;this.div=null}},reposition:function(c){if(c){this.domElement=ZeroClipboard.$(c);if(!this.domElement){this.hide()}}if(this.domElement&&this.div){var b=ZeroClipboard.getDOMObjectPosition(this.domElement);var a=this.div.style;a.left=""+b.left+"px";a.top=""+b.top+"px"}},setText:function(a){this.clipText=a;if(this.ready){this.movie.setText(a)}},addEventListener:function(a,b){a=a.toString().toLowerCase().replace(/^on/,"");if(!this.handlers[a]){this.handlers[a]=[]}this.handlers[a].push(b)},setHandCursor:function(a){this.handCursorEnabled=a;if(this.ready){this.movie.setHandCursor(a)}},setCSSEffects:function(a){this.cssEffects=!!a},receiveEvent:function(d,f){d=d.toString().toLowerCase().replace(/^on/,"");switch(d){case"load":this.movie=document.getElementById(this.movieId);if(!this.movie){var c=this;setTimeout(function(){c.receiveEvent("load",null)},1);return}if(!this.ready&&navigator.userAgent.match(/Firefox/)&&navigator.userAgent.match(/Windows/)){var c=this;setTimeout(function(){c.receiveEvent("load",null)},100);this.ready=true;return}this.ready=true;try{this.movie.setText(this.clipText)}catch(h){}try{this.movie.setHandCursor(this.handCursorEnabled)}catch(h){}break;case"mouseover":if(this.domElement&&this.cssEffects){this.domElement.addClass("hover");if(this.recoverActive){this.domElement.addClass("active")}}break;case"mouseout":if(this.domElement&&this.cssEffects){this.recoverActive=false;if(this.domElement.hasClass("active")){this.domElement.removeClass("active");this.recoverActive=true}this.domElement.removeClass("hover")}break;case"mousedown":if(this.domElement&&this.cssEffects){this.domElement.addClass("active")}break;case"mouseup":if(this.domElement&&this.cssEffects){this.domElement.removeClass("active");this.recoverActive=false}break}if(this.handlers[d]){for(var b=0,a=this.handlers[d].length;b<a;b++){var g=this.handlers[d][b];if(typeof(g)=="function"){g(this,f)}else{if((typeof(g)=="object")&&(g.length==2)){g[0][g[1]](this,f)}else{if(typeof(g)=="string"){window[g](this,f)}}}}}}};
\ No newline at end of file
--- /dev/null
+//<![CDATA[
+ var staticURL = "http://img-developer.samsung.com";
+ var sslCall = "";
+
+ if('' !== 'N') {
+ var locationStr = location.href;
+ if(locationStr.indexOf("https://") > -1) {
+ location.href = "http://" + locationStr.substring(8);
+ }
+ }
+
+// if( typeof($) === function ) {
+ //https? ??? $SD? ??? ??? https ???? http? js ???? ???? ???.
+ //? ??? ?? ?? ??? ?? ?? ???.
+// }
+ $SD.pagination.alt = {
+ first:"go first",
+ prev:"go prev",
+ next:"go next",
+ last:"go last"
+ };
+ $(document).ready(function(){
+ var myVar;
+ topSearchInit();//top search ??
+ $('#searchTop').attr("autocomplete","off");
+ var searchingBoolean = false;
+
+ var topSearchChange = function(){
+
+ if (searchingBoolean) return;
+
+ var searchInput = $('#searchTop').val();
+
+ if($('#searchTop').val() != ""){
+ $("#topAutocomplete").hide();
+ searchingBoolean = true;
+
+ var jsonData = {
+ url : "/search/autoComplete.do;jsessionid=hphlTh5pL0pypqhNXb18Tnhbxwzk2hBC6KxnThCvysc2Hz2WG1y2!1103778492",
+ async : true,
+ data : { searchInput : searchInput},
+ success : function(data){
+ if (searchInput == $('#searchTop').val()){
+ var autoComplete = data.kwdNm;
+ var tmpHtml = "";
+
+ if (autoComplete.length > 0){
+ $('#topAutocomplete').children().remove();
+ $('#topAutocomplete').append($('<ul id="topAutocompleteList"><\/ul>'));
+ $.each(autoComplete, function(i, item){
+ var a = $("<a href='javascript:;'><em>"+data.searchInput+"<\/em>"+item.kwdNmSub+"<\/a>");
+ a.data('keyword', item.kwdNm);
+ $('#topAutocompleteList').append($('<li><\/li>').html(a));
+ });
+ $("#topAutocompleteList").find("li").last().on("keydown", function(e) {
+ if(e.which == 9 && e.shiftKey) {
+ return true;
+ }
+
+ if(e.which == 9) {
+ e.preventDefault();
+ $('#topAutocomplete').hide();
+ setTimeout(function() {
+ $("#searchTopBtn").focus();
+ }, 1);
+ }
+
+ });
+ $("#searchTopBtn").off("focusout", function(e) {});
+ $("#searchTopBtn").on("focusout", function(e) {
+ $('#topAutocomplete').hide();
+ });
+ }else{
+ $('#topAutocomplete').children().remove();
+ }
+ if($('#searchTop').val() == ""){
+ $("#topAutocomplete").hide();
+ searchingBoolean = false;
+ return;
+ }else{
+ if (searchInput == $('#searchTop').val()){
+ searchingBoolean = false;
+ }else{
+ searchingBoolean = false;
+ topSearchChange();
+ }
+ }
+ if (autoComplete.length == 0){
+ $("#topAutocomplete").hide();
+ }else{
+ if (searchInput == $('#searchTop').val()){
+ $("#topAutocomplete").show();
+ var $searchList = $("#topAutocomplete").find('ul');
+ var hei = $searchList.outerHeight();
+ if(hei>180){
+ $searchList.css({'height':'180px','overflow-y':'auto'});
+ }
+ }else{
+ searchingBoolean = false;
+ topSearchChange();
+ }
+ }
+ }else{
+ searchingBoolean = false;
+ topSearchChange();
+ }
+ },
+ error : function() {searchingBoolean = false;}
+
+ };
+ //setTimeout(function(){$SD.ajax.get(jsonData);},100);
+ $SD.ajax.get(jsonData);
+ searchingBoolean = false;
+ }
+
+ //console.log("/search/autoComplete.do end");
+ //console.groupEnd();
+ };
+
+ $('#searchTop').keyup(function(e){
+ if($('#searchTop').val() == ""){
+ $('#topAutocomplete').children().remove();
+ $("#topAutocomplete").hide();
+ }else{
+ if(e.which == 13){
+ search();
+ }else{
+ topSearchChange();
+ }
+ }
+ });
+
+ var search = function(){
+ if($.trim($('#searchTop').val()) == ""){
+ alert('Search keyword is required.');
+ }else{
+ $('#topSearchForm').submit();
+ }
+ };
+ $("#topAutocomplete").on('mousedown','ul li a', function(e){
+ e.preventDefault();
+ var keyword = $(this).data('keyword');
+ $("#searchTop").val(keyword);
+ $('#topSearchForm').submit();
+ });
+
+ $("#topAutocomplete").on('keydown keypress','ul li a', function(e){
+ if(e.which == 13) {
+ e.preventDefault();
+ var keyword = $(this).data('keyword');
+ $("#searchTop").val(keyword);
+ $('#topSearchForm').submit();
+ }
+ });
+
+ $('#searchTopBtn').click(function(e){
+ search();
+ });
+ });
+
+ function topSearchEnter(){
+ if($.trim($('#searchTop').val()) == "" || $.trim($('#searchTop').val()) == "Search"){
+ alert('Search keyword is required.');
+ return false;
+ }else{
+ return true;
+ }
+ }
+
+/* Tracking Code TOTAL */
+ var _gaq = _gaq || [];
+ var pluginUrl = '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
+ _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
+ _gaq.push(['_setAccount', 'UA-6892706-3']);
+ _gaq.push(['_setDomainName', 'samsung.com']);
+ _gaq.push(['_setAllowLinker', true]);
+ _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);
+ })();
+
+ <!--// Tracking Code 1 -->
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-6892706-4']);
+ _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);
+ })();
--- /dev/null
+/**
+ * [PAGE] Search Result
+ * date : 20120810
+ * author : 전종호
+ */
+function searchInit()
+{
+ var focusTarget = "input";
+
+ //$("#autocomplete").hide();
+
+ //$("#searchInput").bind("keydown", checkSearchText);
+
+ $("#searchInput").focusout(function() {
+ if( focusTarget == "dropdown" )
+ {
+ return false;
+ }
+ else
+ {
+ //toggleClass( false );
+ }
+ });
+
+ $( "#searchInput" ).focusin( function() {
+ focusTarget = "input";
+ });
+
+ $("#btnDropdown").mousedown( function(){
+ focusTarget = "dropdown";
+ });
+
+ $(".autocomplete ul li").focusin( function() {
+ //
+ });
+
+ $("#autocomplete").bind("mouseleave",function(){
+ $(this).hide();
+ $("#btnDropdown").removeClass("dropdownoff");
+ $("#btnDropdown").addClass("dropdown");
+ });
+
+ $(".autocomplete ul li:last-child").focusout( function() {
+ toggleClass( false );
+ });
+
+ $("#btnDropdown").click( function(){
+ //alert("btn click");
+ if( $("#searchInput").val().length == 0 ){
+ return false;
+ }
+ else{
+ if( $("#btnDropdown").hasClass("dropdown") ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }
+
+ return false;
+ });
+
+ function checkSearchText(){
+ setTimeout(function(){
+ var txt = $("#searchInput").val();
+
+ if( txt.length > 0 ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }, 1);
+ }
+
+ function toggleClass( bo ){
+ if( bo ){
+ //$(".autocomplete").css("visibility", "visible");
+ $("#autocomplete").show();
+
+ $("#btnDropdown").removeClass("dropdown");
+ $("#btnDropdown").addClass("dropdownoff");
+ }
+ else{
+ //$(".autocomplete").css("visibility", "hidden");
+ $("#autocomplete").hide();
+
+ $("#btnDropdown").removeClass("dropdownoff");
+ $("#btnDropdown").addClass("dropdown");
+ }
+ }
+}
+
+
+
+function topSearchInit()
+{
+ var focusTarget = "input";
+
+ //$("#searchTop").bind("keydown", checkSearchText);
+
+ $("#searchTop").focusout(function() {
+ if( focusTarget == "dropdown" )
+ {
+ return false;
+ }
+ else
+ {
+ //toggleClass( false );
+ }
+ });
+
+ $( "#searchTop" ).focusin( function() {
+ focusTarget = "input";
+ });
+
+ $("#btnDropdown").mousedown( function(){
+ focusTarget = "dropdown";
+ });
+
+ $(".autocomplete ul li").focusin( function() {
+ //
+ });
+
+ $(".autocomplete ul li:last-child").focusout( function() {
+ toggleClass( false );
+ })
+
+ $("#btnDropdown").click( function(){
+ //alert("btn click");
+ if( $("#searchInput").val().length == 0 ){
+ return false;
+ }
+ else{
+ if( $("#btnDropdown").hasClass("dropdown") ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }
+
+ return false;
+ });
+
+ function checkSearchText(){
+ setTimeout(function(){
+ var txt = $("#searchTop").val();
+
+ if( txt.length > 0 ){
+ toggleClass( true );
+ }
+ else{
+ toggleClass( false );
+ }
+ }, 1);
+ }
+
+ function toggleClass( bo ){
+ if( bo ){
+ $(".topAutocomplete").css("visibility", "visible");
+ }else{
+ $(".topAutocomplete").css("visibility", "hidden");
+ $("#topAutocomplete").hide();
+ }
+ }
+}
--- /dev/null
+/*all Show Hide devicespecs List*/
+if($('div#contents').find('.devicespecs-util').length){
+var self = $('div#contents').find('.devicespecs-util');
+
+$('.showA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+var me = $(this);
+var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+if ( !me.next().is(':visible') ){
+ me.find("a").css('background-image', me.find("a").css('background-image').replace('_.gif','.gif'));
+ me.find('em').text('Hide');
+ me.next().show();
+}
+});
+return false;
+})
+$('.hideA', self).bind ("click", function (){
+$(this).parents('.devicespecs-util').next().find('.devicespec-tit').each(function(){
+
+ var me = $(this);
+ var idx = $('.devicespecifications .devicespec-tit').index(this);
+
+ if ( me.next().is(':visible') ){
+ me.find("a").css('background-image', me.find("a").css('background-image').replace('.gif','_.gif'));
+ me.find('em').text('Show');
+ me.next().hide();
+ }
+
+});
+return false;
+})
+}
+
+/*toggle devicespecs List*/
+if($('div#contents').find('.devicespec-tit').length){
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+$('a', self).bind ("click", function(){
+ var idx = $('.devicespec-tit a').index(this);
+
+ if ( $(this).parent().parent().next().is(':visible') ){
+ $(this).css('background-image', $(this).css('background-image').replace('.gif','_.gif'));
+
+ self.find('em').text('Show');
+ self.next().hide();
+
+ return false;
+ }else{
+ $(this).css('background-image', $(this).css('background-image').replace('_.gif','.gif'));
+ self.find('em').text('Hide');
+
+ self.next().show();
+
+ return false;
+ }
+
+});
+
+});
+}
+
+$('ul.devicespecifications li div.devicespec-con').hide();
+
+
+$('.devicespec-tit').each(function(){
+var self = $(this);
+var arrow = $('a', self);
+
+if(self.next().is(':visible')){
+arrow.css('background-image', arrow.css('background-image').replace('_.gif','.gif'));
+self.find('em').text('Hide');
+}else{
+arrow.css('background-image', arrow.css('background-image').replace('.gif','_.gif'));
+self.find('em').text('Show');
+}
+
+});
+
+$(document).ready(function(){
+ var openheading = function(target) {
+ var origin = $(target);
+ target = origin.closest('.devicespec-con');
+ if (!(target.length > 0)) {
+ target = origin.closest('.devicespec-tit');
+ }
+ if (target.length > 0) {
+ if (!$('.devicespec-con', target.parent()).is(":visible")) {
+ $("div.devicespec-tit a.bt-arr", target.parent()).click();
+ }
+ }
+
+ $(window.location.hash)[0].scrollIntoView();
+ };
+
+ $(".opensection").click(function(){
+ var target = $($(this).attr("href"));//.closest('.devicespec-con');
+ openheading(target);
+ });
+
+ if (window.location.hash) {
+ var target = $(window.location.hash);
+ openheading(target);
+ //$(target).focus(); //uncomment if fail to work
+ }
+
+ var isScrolledIntoView = function(elem)
+ {
+ var docViewTop = $('#contents').scrollTop();
+ var docViewBottom = docViewTop + $('#contents').height();
+
+ var elemTop = $(elem).offset().top;
+ var elemBottom = elemTop + $(elem).height();
+
+ return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
+ && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
+ }
+
+ $('#contents').scroll();
+
+ var checkBreadCrumbs = function() {
+ if (!isScrolledIntoView($('#contents .content h1')))
+ {
+ $('a.top.sms').show();
+ $('.help_breadcrumbs').hide();
+ } else {
+ $('a.top.sms').hide();
+ $('.help_breadcrumbs').show();
+ }
+ $('#contents').css('padding-top', $('.help_breadcrumbs').outerHeight()*(7/6));
+ }
+
+ var updateH = function(){
+ checkBreadCrumbs();
+ $('a.top').css('bottom', $('#footer').outerHeight());
+ $('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'))
+ {
+ $('#toc').css('height', $(window).height()-$('#toc').position()['top']-($(window).height() - $('a.top').position()['top']) - 10);
+ } else {
+ $('#toc').css('height', $(window).height()-$('#toc').position()['top']-$('#footer').outerHeight() - 20);
+ }
+ $('#toc').css('height', $('#toc').css('height') - 5);
+
+ $('#toc_border').height($('#toc').outerHeight() + 5);
+ $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+ //$('#toc').css('top', $('#toc_border').position()['top'] + 2);
+ $('#toc').css('top', $('#toc_border').position()['top'] + 7);
+ $('#contents').css('right', $(window).width() - $('#toc-navigation').position()['left'] + 5);
+ //$('#toc').css('width', $('#toc_border').width() - 40);
+ $('#toc').css('width', $('#toc_border').width() - 49);
+ };
+
+ var updateH_no_toc = function() {
+ checkBreadCrumbs();
+ if (!isScrolledIntoView($('#contents .content h1')))
+ {
+ $('a.top.sms').show();
+ } else {
+ $('a.top.sms').hide();
+ }
+ $('a.top').css('bottom', $('#footer').outerHeight());
+
+ $('#container #contents').css('margin-bottom', $('#footer').outerHeight());
+ }
+
+ if ($('body').hasClass('no-toc')) {
+ updateH = updateH_no_toc;
+ }
+ $(window).resize(updateH);
+ $('#contents').scroll(updateH);
+ $(window).resize();
+
+ $('a.top').click(function(){$('#contents').scrollTop(0)});
+
+ var hashchanged = function() {
+ if (window.location.hash.length) {
+ openheading(window.location.hash);
+ //$(window.location.hash).scrollTo();
+ $(window.location.hash)[0].scrollIntoView();
+
+ } else
+ {
+ $('#contents').scrollTop(0);
+ }
+ };
+
+ if (("onhashchange" in window) && !($.browser.msie)) {
+ $(window).bind( 'hashchange',hashchanged);
+ }
+ else {
+ var prevHash = window.location.hash;
+ window.setInterval(function () {
+ if (window.location.hash != prevHash) {
+ hashchanged();
+ prevHash = window.location.hash;
+ }
+ }, 100);
+ }
+});
--- /dev/null
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ *
+ * <p>
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source. At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ * {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules. See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ * {@code class=prettyprint.}
+ * You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ * printer needs to do more substantial DOM manipulations to support that, so
+ * some css styles may not be preserved.
+ * </ol>
+ * That's it. I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ * Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+(function () {
+ // Keyword lists for various languages.
+ // We use things that coerce to strings to make them compact when minified
+ // and to defeat aggressive optimizers that fold large string constants.
+ var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
+ var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
+ "double,enum,extern,float,goto,int,long,register,short,signed,sizeof," +
+ "static,struct,switch,typedef,union,unsigned,void,volatile"];
+ var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
+ "new,operator,private,protected,public,this,throw,true,try,typeof"];
+ var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
+ "concept,concept_map,const_cast,constexpr,decltype," +
+ "dynamic_cast,explicit,export,friend,inline,late_check," +
+ "mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast," +
+ "template,typeid,typename,using,virtual,where"];
+ var JAVA_KEYWORDS = [COMMON_KEYWORDS,
+ "abstract,boolean,extends,final,finally,implements,import," +
+ "instanceof,null,native,package,strictfp,super,synchronized,throws," +
+ "transient"];
+ var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
+ "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
+ "fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock," +
+ "object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed," +
+ "stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"];
+ var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
+ "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
+ "true,try,unless,until,when,while,yes";
+ var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
+ "debugger,eval,export,function,get,null,set,undefined,var,with," +
+ "Infinity,NaN"];
+ var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
+ "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
+ "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
+ var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
+ "elif,except,exec,finally,from,global,import,in,is,lambda," +
+ "nonlocal,not,or,pass,print,raise,try,with,yield," +
+ "False,True,None"];
+ var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
+ "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
+ "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
+ "BEGIN,END"];
+ var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
+ "function,in,local,set,then,until"];
+ var ALL_KEYWORDS = [
+ CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS +
+ PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
+ var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/;
+
+ // token style names. correspond to css classes
+ /**
+ * token style for a string literal
+ * @const
+ */
+ var PR_STRING = 'str';
+ /**
+ * token style for a keyword
+ * @const
+ */
+ var PR_KEYWORD = 'kwd';
+ /**
+ * token style for a comment
+ * @const
+ */
+ var PR_COMMENT = 'com';
+ /**
+ * token style for a type
+ * @const
+ */
+ var PR_TYPE = 'typ';
+ /**
+ * token style for a literal value. e.g. 1, null, true.
+ * @const
+ */
+ var PR_LITERAL = 'lit';
+ /**
+ * token style for a punctuation string.
+ * @const
+ */
+ var PR_PUNCTUATION = 'pun';
+ /**
+ * token style for a punctuation string.
+ * @const
+ */
+ var PR_PLAIN = 'pln';
+
+ /**
+ * token style for an sgml tag.
+ * @const
+ */
+ var PR_TAG = 'tag';
+ /**
+ * token style for a markup declaration such as a DOCTYPE.
+ * @const
+ */
+ var PR_DECLARATION = 'dec';
+ /**
+ * token style for embedded source.
+ * @const
+ */
+ var PR_SOURCE = 'src';
+ /**
+ * token style for an sgml attribute name.
+ * @const
+ */
+ var PR_ATTRIB_NAME = 'atn';
+ /**
+ * token style for an sgml attribute value.
+ * @const
+ */
+ var PR_ATTRIB_VALUE = 'atv';
+
+ /**
+ * A class that indicates a section of markup that is not code, e.g. to allow
+ * embedding of line numbers within code listings.
+ * @const
+ */
+ var PR_NOCODE = 'nocode';
+
+
+
+/**
+ * A set of tokens that can precede a regular expression literal in
+ * javascript
+ * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
+ * has the full list, but I've removed ones that might be problematic when
+ * seen in languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ * @const
+ */
+var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|\\!|\\!=|\\!==|\\#|\\%|\\%=|&|&&|&&=|&=|\\(|\\*|\\*=|\\+=|\\,|\\-=|\\->|\\/|\\/=|:|::|\\;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\@|\\[|\\^|\\^=|\\^\\^|\\^\\^=|\\{|\\||\\|=|\\|\\||\\|\\|=|\\~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
+
+// CAVEAT: this does not properly handle the case where a regular
+// expression immediately follows another since a regular expression may
+// have flags for case-sensitivity and the like. Having regexp tokens
+// adjacent is not valid in any language I'm aware of, so I'm punting.
+// TODO: maybe style special characters inside a regexp as punctuation.
+
+
+ /**
+ * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+ * matches the union of the sets of strings matched by the input RegExp.
+ * Since it matches globally, if the input strings have a start-of-input
+ * anchor (/^.../), it is ignored for the purposes of unioning.
+ * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+ * @return {RegExp} a global regex.
+ */
+ function combinePrefixPatterns(regexs) {
+ var capturedGroupIndex = 0;
+
+ var needToFoldCase = false;
+ var ignoreCase = false;
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.ignoreCase) {
+ ignoreCase = true;
+ } else if (/[a-z]/i.test(regex.source.replace(
+ /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+ needToFoldCase = true;
+ ignoreCase = false;
+ break;
+ }
+ }
+
+ var escapeCharToCodeUnit = {
+ 'b': 8,
+ 't': 9,
+ 'n': 0xa,
+ 'v': 0xb,
+ 'f': 0xc,
+ 'r': 0xd
+ };
+
+ function decodeEscape(charsetPart) {
+ var cc0 = charsetPart.charCodeAt(0);
+ if (cc0 !== 92 /* \\ */) {
+ return cc0;
+ }
+ var c1 = charsetPart.charAt(1);
+ cc0 = escapeCharToCodeUnit[c1];
+ if (cc0) {
+ return cc0;
+ } else if ('0' <= c1 && c1 <= '7') {
+ return parseInt(charsetPart.substring(1), 8);
+ } else if (c1 === 'u' || c1 === 'x') {
+ return parseInt(charsetPart.substring(2), 16);
+ } else {
+ return charsetPart.charCodeAt(1);
+ }
+ }
+
+ function encodeEscape(charCode) {
+ if (charCode < 0x20) {
+ return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+ }
+ var ch = String.fromCharCode(charCode);
+ if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+ ch = '\\' + ch;
+ }
+ return ch;
+ }
+
+ function caseFoldCharset(charSet) {
+ var charsetParts = charSet.substring(1, charSet.length - 1).match(
+ new RegExp(
+ '\\\\u[0-9A-Fa-f]{4}'
+ + '|\\\\x[0-9A-Fa-f]{2}'
+ + '|\\\\[0-3][0-7]{0,2}'
+ + '|\\\\[0-7]{1,2}'
+ + '|\\\\[\\s\\S]'
+ + '|-'
+ + '|[^-\\\\]',
+ 'g'));
+ var groups = [];
+ var ranges = [];
+ var inverse = charsetParts[0] === '^';
+ for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+ var p = charsetParts[i];
+ if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups.
+ groups.push(p);
+ } else {
+ var start = decodeEscape(p);
+ var end;
+ if (i + 2 < n && '-' === charsetParts[i + 1]) {
+ end = decodeEscape(charsetParts[i + 2]);
+ i += 2;
+ } else {
+ end = start;
+ }
+ ranges.push([start, end]);
+ // If the range might intersect letters, then expand it.
+ // This case handling is too simplistic.
+ // It does not deal with non-latin case folding.
+ // It works for latin source code identifiers though.
+ if (!(end < 65 || start > 122)) {
+ if (!(end < 65 || start > 90)) {
+ ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+ }
+ if (!(end < 97 || start > 122)) {
+ ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+ }
+ }
+ }
+ }
+
+ // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+ // -> [[1, 12], [14, 14], [16, 17]]
+ ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
+ var consolidatedRanges = [];
+ var lastRange = [NaN, NaN];
+ for (var i = 0; i < ranges.length; ++i) {
+ var range = ranges[i];
+ if (range[0] <= lastRange[1] + 1) {
+ lastRange[1] = Math.max(lastRange[1], range[1]);
+ } else {
+ consolidatedRanges.push(lastRange = range);
+ }
+ }
+
+ var out = ['['];
+ if (inverse) { out.push('^'); }
+ out.push.apply(out, groups);
+ for (var i = 0; i < consolidatedRanges.length; ++i) {
+ var range = consolidatedRanges[i];
+ out.push(encodeEscape(range[0]));
+ if (range[1] > range[0]) {
+ if (range[1] + 1 > range[0]) { out.push('-'); }
+ out.push(encodeEscape(range[1]));
+ }
+ }
+ out.push(']');
+ return out.join('');
+ }
+
+ function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+ // Split into character sets, escape sequences, punctuation strings
+ // like ('(', '(?:', ')', '^'), and runs of characters that do not
+ // include any of the above.
+ var parts = regex.source.match(
+ new RegExp(
+ '(?:'
+ + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
+ + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
+ + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
+ + '|\\\\[0-9]+' // a back-reference or octal escape
+ + '|\\\\[^ux0-9]' // other escape sequence
+ + '|\\(\\?[:!=]' // start of a non-capturing group
+ + '|[\\(\\)\\^]' // start/emd of a group, or line start
+ + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
+ + ')',
+ 'g'));
+ var n = parts.length;
+
+ // Maps captured group numbers to the number they will occupy in
+ // the output or to -1 if that has not been determined, or to
+ // undefined if they need not be capturing in the output.
+ var capturedGroups = [];
+
+ // Walk over and identify back references to build the capturedGroups
+ // mapping.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ // groups are 1-indexed, so max group index is count of '('
+ ++groupIndex;
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ capturedGroups[decimalValue] = -1;
+ }
+ }
+ }
+
+ // Renumber groups and reduce capturing groups to non-capturing groups
+ // where possible.
+ for (var i = 1; i < capturedGroups.length; ++i) {
+ if (-1 === capturedGroups[i]) {
+ capturedGroups[i] = ++capturedGroupIndex;
+ }
+ }
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ ++groupIndex;
+ if (capturedGroups[groupIndex] === undefined) {
+ parts[i] = '(?:';
+ }
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ parts[i] = '\\' + capturedGroups[groupIndex];
+ }
+ }
+ }
+
+ // Remove any prefix anchors so that the output will match anywhere.
+ // ^^ really does mean an anchored match though.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+ }
+
+ // Expand letters to groups to handle mixing of case-sensitive and
+ // case-insensitive patterns if necessary.
+ if (regex.ignoreCase && needToFoldCase) {
+ for (var i = 0; i < n; ++i) {
+ var p = parts[i];
+ var ch0 = p.charAt(0);
+ if (p.length >= 2 && ch0 === '[') {
+ parts[i] = caseFoldCharset(p);
+ } else if (ch0 !== '\\') {
+ // TODO: handle letters in numeric escapes.
+ parts[i] = p.replace(
+ /[a-zA-Z]/g,
+ function (ch) {
+ var cc = ch.charCodeAt(0);
+ return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+ });
+ }
+ }
+ }
+
+ return parts.join('');
+ }
+
+ var rewritten = [];
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.global || regex.multiline) { throw new Error('' + regex); }
+ rewritten.push(
+ '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+ }
+
+ return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+ }
+
+
+ /**
+ * Split markup into a string of source code and an array mapping ranges in
+ * that string to the text nodes in which they appear.
+ *
+ * <p>
+ * The HTML DOM structure:</p>
+ * <pre>
+ * (Element "p"
+ * (Element "b"
+ * (Text "print ")) ; #1
+ * (Text "'Hello '") ; #2
+ * (Element "br") ; #3
+ * (Text " + 'World';")) ; #4
+ * </pre>
+ * <p>
+ * corresponds to the HTML
+ * {@code <p><b>print </b>'Hello '<br> + 'World';</p>}.</p>
+ *
+ * <p>
+ * It will produce the output:</p>
+ * <pre>
+ * {
+ * sourceCode: "print 'Hello '\n + 'World';",
+ * // 1 2
+ * // 012345678901234 5678901234567
+ * spans: [0, #1, 6, #2, 14, #3, 15, #4]
+ * }
+ * </pre>
+ * <p>
+ * where #1 is a reference to the {@code "print "} text node above, and so
+ * on for the other text nodes.
+ * </p>
+ *
+ * <p>
+ * The {@code} spans array is an array of pairs. Even elements are the start
+ * indices of substrings, and odd elements are the text nodes (or BR elements)
+ * that contain the text for those substrings.
+ * Substrings continue until the next index or the end of the source.
+ * </p>
+ *
+ * @param {Node} node an HTML DOM subtree containing source-code.
+ * @return {Object} source code and the text nodes in which they occur.
+ */
+ function extractSourceSpans(node) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+
+ var chunks = [];
+ var length = 0;
+ var spans = [];
+ var k = 0;
+
+ var whitespace;
+ if (node.currentStyle) {
+ whitespace = node.currentStyle.whiteSpace;
+ } else if (window.getComputedStyle) {
+ whitespace = document.defaultView.getComputedStyle(node, null)
+ .getPropertyValue('white-space');
+ }
+ var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { return; }
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ var nodeName = node.nodeName;
+ if ('BR' === nodeName || 'LI' === nodeName) {
+ chunks[k] = '\n';
+ spans[k << 1] = length++;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ case 3: case 4: // Text
+ var text = node.nodeValue;
+ if (text.length) {
+ if (!isPreformatted) {
+ text = text.replace(/[ \t\r\n]+/g, ' ');
+ } else {
+ text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
+ }
+ // TODO: handle tabs here?
+ chunks[k] = text;
+ spans[k << 1] = length;
+ length += text.length;
+ spans[(k++ << 1) | 1] = node;
+ }
+ break;
+ }
+ }
+
+ walk(node);
+
+ return {
+ sourceCode: chunks.join('').replace(/\n$/, ''),
+ spans: spans
+ };
+ }
+
+
+ /**
+ * Apply the given language handler to sourceCode and add the resulting
+ * decorations to out.
+ * @param {number} basePos the index of sourceCode within the chunk of source
+ * whose decorations are already present on out.
+ */
+ function appendDecorations(basePos, sourceCode, langHandler, out) {
+ if (!sourceCode) { return; }
+ var job = {
+ sourceCode: sourceCode,
+ basePos: basePos
+ };
+ langHandler(job);
+ out.push.apply(out, job.decorations);
+ }
+
+ var notWs = /\S/;
+
+ /**
+ * Given an element, if it contains only one child element and any text nodes
+ * it contains contain only space characters, return the sole child element.
+ * Otherwise returns undefined.
+ * <p>
+ * This is meant to return the CODE element in {@code <pre><code ...>} when
+ * there is a single child element that contains all the non-space textual
+ * content, but not to return anything where there are multiple child elements
+ * as in {@code <pre><code>...</code><code>...</code></pre>} or when there
+ * is textual content.
+ */
+ function childContentWrapper(element) {
+ var wrapper = undefined;
+ for (var c = element.firstChild; c; c = c.nextSibling) {
+ var type = c.nodeType;
+ wrapper = (type === 1) // Element Node
+ ? (wrapper ? element : c)
+ : (type === 3) // Text Node
+ ? (notWs.test(c.nodeValue) ? element : wrapper)
+ : wrapper;
+ }
+ return wrapper === element ? undefined : wrapper;
+ }
+
+ /** Given triples of [style, pattern, context] returns a lexing function,
+ * The lexing function interprets the patterns to find token boundaries and
+ * returns a decoration list of the form
+ * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+ * where index_n is an index into the sourceCode, and style_n is a style
+ * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
+ * all characters in sourceCode[index_n-1:index_n].
+ *
+ * The stylePatterns is a list whose elements have the form
+ * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+ *
+ * Style is a style constant like PR_PLAIN, or can be a string of the
+ * form 'lang-FOO', where FOO is a language extension describing the
+ * language of the portion of the token in $1 after pattern executes.
+ * E.g., if style is 'lang-lisp', and group 1 contains the text
+ * '(hello (world))', then that portion of the token will be passed to the
+ * registered lisp handler for formatting.
+ * The text before and after group 1 will be restyled using this decorator
+ * so decorators should take care that this doesn't result in infinite
+ * recursion. For example, the HTML lexer rule for SCRIPT elements looks
+ * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
+ * '<script>foo()<\/script>', which would cause the current decorator to
+ * be called with '<script>' which would not match the same rule since
+ * group 1 must not be empty, so it would be instead styled as PR_TAG by
+ * the generic tag rule. The handler registered for the 'js' extension would
+ * then be called with 'foo()', and finally, the current decorator would
+ * be called with '<\/script>' which would not match the original rule and
+ * so the generic tag rule would identify it as a tag.
+ *
+ * Pattern must only match prefixes, and if it matches a prefix, then that
+ * match is considered a token with the same style.
+ *
+ * Context is applied to the last non-whitespace, non-comment token
+ * recognized.
+ *
+ * Shortcut is an optional string of characters, any of which, if the first
+ * character, gurantee that this pattern and only this pattern matches.
+ *
+ * @param {Array} shortcutStylePatterns patterns that always start with
+ * a known character. Must have a shortcut string.
+ * @param {Array} fallthroughStylePatterns patterns that will be tried in
+ * order if the shortcut ones fail. May have shortcuts.
+ *
+ * @return {function (Object)} a
+ * function that takes source code and returns a list of decorations.
+ */
+ function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+ var shortcuts = {};
+ var tokenizer;
+ (function () {
+ var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+ var allRegexs = [];
+ var regexKeys = {};
+ for (var i = 0, n = allPatterns.length; i < n; ++i) {
+ var patternParts = allPatterns[i];
+ var shortcutChars = patternParts[3];
+ if (shortcutChars) {
+ for (var c = shortcutChars.length; --c >= 0;) {
+ shortcuts[shortcutChars.charAt(c)] = patternParts;
+ }
+ }
+ var regex = patternParts[1];
+ var k = '' + regex;
+ if (!regexKeys.hasOwnProperty(k)) {
+ allRegexs.push(regex);
+ regexKeys[k] = null;
+ }
+ }
+ allRegexs.push(/[\0-\uffff]/);
+ tokenizer = combinePrefixPatterns(allRegexs);
+ })();
+
+ var nPatterns = fallthroughStylePatterns.length;
+
+ /**
+ * Lexes job.sourceCode and produces an output array job.decorations of
+ * style classes preceded by the position at which they start in
+ * job.sourceCode in order.
+ *
+ * @param {Object} job an object like <pre>{
+ * sourceCode: {string} sourceText plain text,
+ * basePos: {int} position of job.sourceCode in the larger chunk of
+ * sourceCode.
+ * }</pre>
+ */
+ var decorate = function (job) {
+ var sourceCode = job.sourceCode, basePos = job.basePos;
+ /** Even entries are positions in source in ascending order. Odd enties
+ * are style markers (e.g., PR_COMMENT) that run from that position until
+ * the end.
+ * @type {Array.<number|string>}
+ */
+ var decorations = [basePos, PR_PLAIN];
+ var pos = 0; // index into sourceCode
+ var tokens = sourceCode.match(tokenizer) || [];
+ var styleCache = {};
+
+ for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+ var token = tokens[ti];
+ var style = styleCache[token];
+ var match = void 0;
+
+ var isEmbedded;
+ if (typeof style === 'string') {
+ isEmbedded = false;
+ } else {
+ var patternParts = shortcuts[token.charAt(0)];
+ if (patternParts) {
+ match = token.match(patternParts[1]);
+ style = patternParts[0];
+ } else {
+ for (var i = 0; i < nPatterns; ++i) {
+ patternParts = fallthroughStylePatterns[i];
+ match = token.match(patternParts[1]);
+ if (match) {
+ style = patternParts[0];
+ break;
+ }
+ }
+
+ if (!match) { // make sure that we make progress
+ style = PR_PLAIN;
+ }
+ }
+
+ isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+ if (isEmbedded && !(match && typeof match[1] === 'string')) {
+ isEmbedded = false;
+ style = PR_SOURCE;
+ }
+
+ if (!isEmbedded) { styleCache[token] = style; }
+ }
+
+ var tokenStart = pos;
+ pos += token.length;
+
+ if (!isEmbedded) {
+ decorations.push(basePos + tokenStart, style);
+ } else { // Treat group 1 as an embedded block of source code.
+ var embeddedSource = match[1];
+ var embeddedSourceStart = token.indexOf(embeddedSource);
+ var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+ if (match[2]) {
+ // If embeddedSource can be blank, then it would match at the
+ // beginning which would cause us to infinitely recurse on the
+ // entire token, so we catch the right context in match[2].
+ embeddedSourceEnd = token.length - match[2].length;
+ embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+ }
+ var lang = style.substring(5);
+ // Decorate the left of the embedded source
+ appendDecorations(
+ basePos + tokenStart,
+ token.substring(0, embeddedSourceStart),
+ decorate, decorations);
+ // Decorate the embedded source
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceStart,
+ embeddedSource,
+ langHandlerForExtension(lang, embeddedSource),
+ decorations);
+ // Decorate the right of the embedded section
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceEnd,
+ token.substring(embeddedSourceEnd),
+ decorate, decorations);
+ }
+ }
+ job.decorations = decorations;
+ };
+ return decorate;
+ }
+
+ /** returns a function that produces a list of decorations from source text.
+ *
+ * This code treats ", ', and ` as string delimiters, and \ as a string
+ * escape. It does not recognize perl's qq() style strings.
+ * It has no special handling for double delimiter escapes as in basic, or
+ * the tripled delimiters used in python, but should work on those regardless
+ * although in those cases a single string literal may be broken up into
+ * multiple adjacent string literals.
+ *
+ * It recognizes C, C++, and shell style comments.
+ *
+ * @param {Object} options a set of optional parameters.
+ * @return {function (Object)} a function that examines the source code
+ * in the input job and builds the decoration list.
+ */
+ function sourceDecorator(options) {
+ var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+ if (options['tripleQuotedStrings']) {
+ // '''multi-line-string''', 'single-line-string', and double-quoted
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+ null, '\'"']);
+ } else if (options['multiLineStrings']) {
+ // 'multi-line-string', "multi-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+ null, '\'"`']);
+ } else {
+ // 'single-line-string', "single-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING,
+ /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+ null, '"\'']);
+ }
+ if (options['verbatimStrings']) {
+ // verbatim-string-literal production from the C# grammar. See issue 93.
+ fallthroughStylePatterns.push(
+ [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+ }
+ var hc = options['hashComments'];
+ if (hc) {
+ if (options['cStyleComments']) {
+ if (hc > 1) { // multiline hash comments
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, null, '#']);
+
+ } else {
+ // Stop C preprocessor declarations at an unclosed open comment
+// shortcutStylePatterns.push(
+// [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+// null, '#']);
+ }
+ fallthroughStylePatterns.push(
+ [PR_STRING,
+ /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+ null]);
+ } else {
+ shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+ }
+ }
+ if (options['cStyleComments']) {
+ fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+ fallthroughStylePatterns.push(
+ [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+ }
+ if (options['regexLiterals']) {
+ /**
+ * @const
+ */
+ var REGEX_LITERAL = (
+ // A regular expression literal starts with a slash that is
+ // not followed by * or / so that it is not confused with
+ // comments.
+ '/(?=[^/*])'
+ // and then contains any number of raw characters,
+ + '(?:[^/\\x5B\\x5C]'
+ // escape sequences (\x5C),
+ + '|\\x5C[\\s\\S]'
+ // or non-nesting character sets (\x5B\x5D);
+ + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+ // finally closed by a /.
+ + '/');
+ fallthroughStylePatterns.push(
+ ['lang-regex',
+ new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+ ]);
+ }
+
+ var types = options['types'];
+ if (types) {
+ fallthroughStylePatterns.push([PR_TYPE, types]);
+ }
+
+ var keywords = ("" + options['keywords']).replace(/^ | $/g, '');
+ if (keywords.length) {
+ fallthroughStylePatterns.push(
+ [PR_KEYWORD,
+ new RegExp('^(?:' + keywords.replace(/[\s,]+/g, '|') + ')\\b'),
+ null]);
+ }
+
+ shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
+ fallthroughStylePatterns.push(
+ // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+ [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_TYPE, /^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/, null],
+ [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_LITERAL,
+ new RegExp(
+ '^(?:'
+ // A hex number
+ + '0x[a-f0-9]+'
+ // or an octal or decimal number,
+ + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+ // possibly in scientific notation
+ + '(?:e[+\\-]?\\d+)?'
+ + ')'
+ // with an optional modifier like UL for unsigned long
+ + '[a-z]*', 'i'),
+ null, '0123456789'],
+ // Don't treat escaped quotes in bash as starting strings. See issue 144.
+ [PR_PLAIN, /^\\[\s\S]?/, null],
+ [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#\\]*/, null]);
+
+ return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+ }
+
+ var decorateSource = sourceDecorator({
+ 'keywords': ALL_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ });
+
+ /**
+ * Given a DOM subtree, wraps it in a list, and puts each line into its own
+ * list item.
+ *
+ * @param {Node} node modified in place. Its content is pulled into an
+ * HTMLOListElement, and each line is moved into a separate list item.
+ * This requires cloning elements, so the input might not have unique
+ * IDs after numbering.
+ */
+ function numberLines(node, opt_startLineNum) {
+ var nocode = /(?:^|\s)nocode(?:\s|$)/;
+ var lineBreak = /\r\n?|\n/;
+
+ var document = node.ownerDocument;
+
+ var whitespace;
+ if (node.currentStyle) {
+ whitespace = node.currentStyle.whiteSpace;
+ } else if (window.getComputedStyle) {
+ whitespace = document.defaultView.getComputedStyle(node, null)
+ .getPropertyValue('white-space');
+ }
+ // If it's preformatted, then we need to split lines on line breaks
+ // in addition to <BR>s.
+ var isPreformatted = whitespace && 'pre' === whitespace.substring(0, 3);
+
+ var li = document.createElement('LI');
+ while (node.firstChild) {
+ li.appendChild(node.firstChild);
+ }
+ // An array of lines. We split below, so this is initialized to one
+ // un-split line.
+ var listItems = [li];
+
+ function walk(node) {
+ switch (node.nodeType) {
+ case 1: // Element
+ if (nocode.test(node.className)) { break; }
+ if ('BR' === node.nodeName) {
+ breakAfter(node);
+ // Discard the <BR> since it is now flush against a </LI>.
+ if (node.parentNode) {
+ node.parentNode.removeChild(node);
+ }
+ } else {
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ walk(child);
+ }
+ }
+ break;
+ case 3: case 4: // Text
+ if (isPreformatted) {
+ var text = node.nodeValue;
+ var match = text.match(lineBreak);
+ if (match) {
+ var firstLine = text.substring(0, match.index);
+ node.nodeValue = firstLine;
+ var tail = text.substring(match.index + match[0].length);
+ if (tail) {
+ var parent = node.parentNode;
+ parent.insertBefore(
+ document.createTextNode(tail), node.nextSibling);
+ }
+ breakAfter(node);
+ if (!firstLine) {
+ // Don't leave blank text nodes in the DOM.
+ node.parentNode.removeChild(node);
+ }
+ }
+ }
+ break;
+ }
+ }
+
+ // Split a line after the given node.
+ function breakAfter(lineEndNode) {
+ // If there's nothing to the right, then we can skip ending the line
+ // here, and move root-wards since splitting just before an end-tag
+ // would require us to create a bunch of empty copies.
+ while (!lineEndNode.nextSibling) {
+ lineEndNode = lineEndNode.parentNode;
+ if (!lineEndNode) { return; }
+ }
+
+ function breakLeftOf(limit, copy) {
+ // Clone shallowly if this node needs to be on both sides of the break.
+ var rightSide = copy ? limit.cloneNode(false) : limit;
+ var parent = limit.parentNode;
+ if (parent) {
+ // We clone the parent chain.
+ // This helps us resurrect important styling elements that cross lines.
+ // E.g. in <i>Foo<br>Bar</i>
+ // should be rewritten to <li><i>Foo</i></li><li><i>Bar</i></li>.
+ var parentClone = breakLeftOf(parent, 1);
+ // Move the clone and everything to the right of the original
+ // onto the cloned parent.
+ var next = limit.nextSibling;
+ parentClone.appendChild(rightSide);
+ for (var sibling = next; sibling; sibling = next) {
+ next = sibling.nextSibling;
+ parentClone.appendChild(sibling);
+ }
+ }
+ return rightSide;
+ }
+
+ var copiedListItem = breakLeftOf(lineEndNode.nextSibling, 0);
+
+ // Walk the parent chain until we reach an unattached LI.
+ for (var parent;
+ // Check nodeType since IE invents document fragments.
+ (parent = copiedListItem.parentNode) && parent.nodeType === 1;) {
+ copiedListItem = parent;
+ }
+ // Put it on the list of lines for later processing.
+ listItems.push(copiedListItem);
+ }
+
+ // Split lines while there are lines left to split.
+ for (var i = 0; // Number of lines that have been split so far.
+ i < listItems.length; // length updated by breakAfter calls.
+ ++i) {
+ walk(listItems[i]);
+ }
+
+ // Make sure numeric indices show correctly.
+ if (opt_startLineNum === (opt_startLineNum|0)) {
+ listItems[0].setAttribute('value', opt_startLineNum);
+ }
+
+ var ol = document.createElement('OL');
+ ol.className = 'linenums';
+ var offset = Math.max(0, ((opt_startLineNum - 1 /* zero index */)) | 0) || 0;
+ for (var i = 0, n = listItems.length; i < n; ++i) {
+ li = listItems[i];
+ // Stick a class on the LIs so that stylesheets can
+ // color odd/even rows, or any other row pattern that
+ // is co-prime with 10.
+ li.className = 'L' + ((i + offset) % 10);
+ if (!li.firstChild) {
+ li.appendChild(document.createTextNode('\xA0'));
+ }
+ ol.appendChild(li);
+ }
+
+ node.appendChild(ol);
+ }
+
+ /**
+ * Breaks {@code job.sourceCode} around style boundaries in
+ * {@code job.decorations} and modifies {@code job.sourceNode} in place.
+ * @param {Object} job like <pre>{
+ * sourceCode: {string} source as plain text,
+ * spans: {Array.<number|Node>} alternating span start indices into source
+ * and the text node or element (e.g. {@code <BR>}) corresponding to that
+ * span.
+ * decorations: {Array.<number|string} an array of style classes preceded
+ * by the position at which they start in job.sourceCode in order
+ * }</pre>
+ * @private
+ */
+ function recombineTagsAndDecorations(job) {
+ var isIE = /\bMSIE\b/.test(navigator.userAgent);
+ var newlineRe = /\n/g;
+
+ var source = job.sourceCode;
+ var sourceLength = source.length;
+ // Index into source after the last code-unit recombined.
+ var sourceIndex = 0;
+
+ var spans = job.spans;
+ var nSpans = spans.length;
+ // Index into spans after the last span which ends at or before sourceIndex.
+ var spanIndex = 0;
+
+ var decorations = job.decorations;
+ var nDecorations = decorations.length;
+ // Index into decorations after the last decoration which ends at or before
+ // sourceIndex.
+ var decorationIndex = 0;
+
+ // Remove all zero-length decorations.
+ decorations[nDecorations] = sourceLength;
+ var decPos, i;
+ for (i = decPos = 0; i < nDecorations;) {
+ if (decorations[i] !== decorations[i + 2]) {
+ decorations[decPos++] = decorations[i++];
+ decorations[decPos++] = decorations[i++];
+ } else {
+ i += 2;
+ }
+ }
+ nDecorations = decPos;
+
+ // Simplify decorations.
+ for (i = decPos = 0; i < nDecorations;) {
+ var startPos = decorations[i];
+ // Conflate all adjacent decorations that use the same style.
+ var startDec = decorations[i + 1];
+ var end = i + 2;
+ while (end + 2 <= nDecorations && decorations[end + 1] === startDec) {
+ end += 2;
+ }
+ decorations[decPos++] = startPos;
+ decorations[decPos++] = startDec;
+ i = end;
+ }
+
+ nDecorations = decorations.length = decPos;
+
+ var decoration = null;
+ while (spanIndex < nSpans) {
+ var spanStart = spans[spanIndex];
+ var spanEnd = spans[spanIndex + 2] || sourceLength;
+
+ var decStart = decorations[decorationIndex];
+ var decEnd = decorations[decorationIndex + 2] || sourceLength;
+
+ var end = Math.min(spanEnd, decEnd);
+
+ var textNode = spans[spanIndex + 1];
+ var styledText;
+ if (textNode.nodeType !== 1 // Don't muck with <BR>s or <LI>s
+ // Don't introduce spans around empty text nodes.
+ && (styledText = source.substring(sourceIndex, end))) {
+ // This may seem bizarre, and it is. Emitting LF on IE causes the
+ // code to display with spaces instead of line breaks.
+ // Emitting Windows standard issue linebreaks (CRLF) causes a blank
+ // space to appear at the beginning of every line but the first.
+ // Emitting an old Mac OS 9 line separator makes everything spiffy.
+ if (isIE) { styledText = styledText.replace(newlineRe, '\r'); }
+ textNode.nodeValue = styledText;
+ var document = textNode.ownerDocument;
+ var span = document.createElement('SPAN');
+ span.className = decorations[decorationIndex + 1];
+ var parentNode = textNode.parentNode;
+ parentNode.replaceChild(span, textNode);
+ span.appendChild(textNode);
+ if (sourceIndex < spanEnd) { // Split off a text node.
+ spans[spanIndex + 1] = textNode
+ // TODO: Possibly optimize by using '' if there's no flicker.
+ = document.createTextNode(source.substring(end, spanEnd));
+ parentNode.insertBefore(textNode, span.nextSibling);
+ }
+ }
+
+ sourceIndex = end;
+
+ if (sourceIndex >= spanEnd) {
+ spanIndex += 2;
+ }
+ if (sourceIndex >= decEnd) {
+ decorationIndex += 2;
+ }
+ }
+ }
+
+
+ /** Maps language-specific file extensions to handlers. */
+ var langHandlerRegistry = {};
+ /** Register a language handler for the given file extensions.
+ * @param {function (Object)} handler a function from source code to a list
+ * of decorations. Takes a single argument job which describes the
+ * state of the computation. The single parameter has the form
+ * {@code {
+ * sourceCode: {string} as plain text.
+ * decorations: {Array.<number|string>} an array of style classes
+ * preceded by the position at which they start in
+ * job.sourceCode in order.
+ * The language handler should assigned this field.
+ * basePos: {int} the position of source in the larger source chunk.
+ * All positions in the output decorations array are relative
+ * to the larger source chunk.
+ * } }
+ * @param {Array.<string>} fileExtensions
+ */
+ function registerLangHandler(handler, fileExtensions) {
+ for (var i = fileExtensions.length; --i >= 0;) {
+ var ext = fileExtensions[i];
+ if (!langHandlerRegistry.hasOwnProperty(ext)) {
+ langHandlerRegistry[ext] = handler;
+ } else if (window['console']) {
+ console['warn']('cannot override language handler %s', ext);
+ }
+ }
+ }
+ function langHandlerForExtension(extension, source) {
+ if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+ // Treat it as markup if the first non whitespace character is a < and
+ // the last non-whitespace character is a >.
+ extension = /^\s*</.test(source)
+ ? 'default-markup'
+ : 'default-code';
+ }
+ return langHandlerRegistry[extension];
+ }
+ registerLangHandler(decorateSource, ['default-code']);
+ registerLangHandler(
+ createSimpleLexer(
+ [],
+ [
+ [PR_PLAIN, /^[^<?]+/],
+ [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+ [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
+ // Unescaped content in an unknown language
+ ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
+ ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
+ [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+ ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+ // Unescaped content in javascript. (Or possibly vbscript).
+ ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+ // Contains unescaped stylesheet content
+ ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+ ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
+ ]),
+ ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+ registerLangHandler(
+ createSimpleLexer(
+ [
+ [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
+ [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+ ],
+ [
+ [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+ [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+ ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+ [PR_PUNCTUATION, /^[=<>\/]+/],
+ ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
+ ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
+ ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+ ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
+ ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
+ ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
+ ]),
+ ['in.tag']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CPP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'types': C_TYPES
+ }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': 'null,true,false'
+ }), ['json']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CSHARP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'verbatimStrings': true,
+ 'types': C_TYPES
+ }), ['cs']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JAVA_KEYWORDS,
+ 'cStyleComments': true
+ }), ['java']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': SH_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true
+ }), ['bsh', 'csh', 'sh']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PYTHON_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'tripleQuotedStrings': true
+ }), ['cv', 'py']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PERL_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['perl', 'pl', 'pm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': RUBY_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['rb']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JSCRIPT_KEYWORDS,
+ 'cStyleComments': true,
+ 'regexLiterals': true
+ }), ['js']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': COFFEE_KEYWORDS,
+ 'hashComments': 3, // ### style block comments
+ 'cStyleComments': true,
+ 'multilineStrings': true,
+ 'tripleQuotedStrings': true,
+ 'regexLiterals': true
+ }), ['coffee']);
+ registerLangHandler(createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+ function applyDecorator(job) {
+ var opt_langExtension = job.langExtension;
+
+ try {
+ // Extract tags, and convert the source code to plain text.
+ var sourceAndSpans = extractSourceSpans(job.sourceNode);
+ /** Plain text. @type {string} */
+ var source = sourceAndSpans.sourceCode;
+ job.sourceCode = source;
+ job.spans = sourceAndSpans.spans;
+ job.basePos = 0;
+
+ // Apply the appropriate language handler
+ langHandlerForExtension(opt_langExtension, source)(job);
+
+ // Integrate the decorations and tags back into the source code,
+ // modifying the sourceNode in place.
+ recombineTagsAndDecorations(job);
+ } catch (e) {
+ if ('console' in window) {
+ console['log'](e && e['stack'] ? e['stack'] : e);
+ }
+ }
+ }
+
+ /**
+ * @param sourceCodeHtml {string} The HTML to pretty print.
+ * @param opt_langExtension {string} The language name to use.
+ * Typically, a filename extension like 'cpp' or 'java'.
+ * @param opt_numberLines {number|boolean} True to number lines,
+ * or the 1-indexed number of the first line in sourceCodeHtml.
+ */
+ function prettyPrintOne(sourceCodeHtml, opt_langExtension, opt_numberLines) {
+ var container = document.createElement('PRE');
+ // This could cause images to load and onload listeners to fire.
+ // E.g. <img onerror="alert(1337)" src="nosuchimage.png">.
+ // We assume that the inner HTML is from a trusted source.
+ container.innerHTML = sourceCodeHtml;
+ if (opt_numberLines) {
+ numberLines(container, opt_numberLines);
+ }
+
+ var job = {
+ langExtension: opt_langExtension,
+ numberLines: opt_numberLines,
+ sourceNode: container
+ };
+ applyDecorator(job);
+ return container.innerHTML;
+ }
+
+ function prettyPrint(opt_whenDone) {
+ function byTagName(tn) { return document.getElementsByTagName(tn); }
+ // fetch a list of nodes to rewrite
+ var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+ var elements = [];
+ for (var i = 0; i < codeSegments.length; ++i) {
+ for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+ elements.push(codeSegments[i][j]);
+ }
+ }
+ codeSegments = null;
+
+ var clock = Date;
+ if (!clock['now']) {
+ clock = { 'now': function () { return +(new Date); } };
+ }
+
+ // The loop is broken into a series of continuations to make sure that we
+ // don't make the browser unresponsive when rewriting a large page.
+ var k = 0;
+ var prettyPrintingJob;
+
+ var langExtensionRe = /\blang(?:uage)?-([\w.]+)(?!\S)/;
+ var prettyPrintRe = /\bprettyprint\b/;
+
+ function doWork() {
+ var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+ clock['now']() + 250 /* ms */ :
+ Infinity);
+ for (; k < elements.length && clock['now']() < endTime; k++) {
+ var cs = elements[k];
+ var className = cs.className;
+ if (className.indexOf('prettyprint') >= 0) {
+ // If the classes includes a language extensions, use it.
+ // Language extensions can be specified like
+ // <pre class="prettyprint lang-cpp">
+ // the language extension "cpp" is used to find a language handler as
+ // passed to PR.registerLangHandler.
+ // HTML5 recommends that a language be specified using "language-"
+ // as the prefix instead. Google Code Prettify supports both.
+ // http://dev.w3.org/html5/spec-author-view/the-code-element.html
+ var langExtension = className.match(langExtensionRe);
+ // Support <pre class="prettyprint"><code class="language-c">
+ var wrapper;
+ if (!langExtension && (wrapper = childContentWrapper(cs))
+ && "CODE" === wrapper.tagName) {
+ langExtension = wrapper.className.match(langExtensionRe);
+ }
+
+ if (langExtension) {
+ langExtension = langExtension[1];
+ }
+
+ // make sure this is not nested in an already prettified element
+ var nested = false;
+ for (var p = cs.parentNode; p; p = p.parentNode) {
+ if ((p.tagName === 'pre' || p.tagName === 'code' ||
+ p.tagName === 'xmp') &&
+ p.className && p.className.indexOf('prettyprint') >= 0) {
+ nested = true;
+ break;
+ }
+ }
+ if (!nested) {
+ // Look for a class like linenums or linenums:<n> where <n> is the
+ // 1-indexed number of the first line.
+ var lineNums = cs.className.match(/\blinenums\b(?::(\d+))?/);
+ lineNums = lineNums
+ ? lineNums[1] && lineNums[1].length ? +lineNums[1] : true
+ : false;
+ if (lineNums) { numberLines(cs, lineNums); }
+
+ // do the pretty printing
+ prettyPrintingJob = {
+ langExtension: langExtension,
+ sourceNode: cs,
+ numberLines: lineNums
+ };
+ applyDecorator(prettyPrintingJob);
+ }
+ }
+ }
+ if (k < elements.length) {
+ // finish up in a continuation
+ setTimeout(doWork, 250);
+ } else if (opt_whenDone) {
+ opt_whenDone();
+ }
+ }
+
+ doWork();
+ }
+
+ /**
+ * Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ *
+ * @param {Function?} opt_whenDone if specified, called when the last entry
+ * has been finished.
+ */
+ window['prettyPrintOne'] = prettyPrintOne;
+ /**
+ * Pretty print a chunk of code.
+ *
+ * @param {string} sourceCodeHtml code as html
+ * @return {string} code as html, but prettier
+ */
+ window['prettyPrint'] = prettyPrint;
+ /**
+ * Contains functions for creating and registering new language handlers.
+ * @type {Object}
+ */
+ window['PR'] = {
+ 'createSimpleLexer': createSimpleLexer,
+ 'registerLangHandler': registerLangHandler,
+ 'sourceDecorator': sourceDecorator,
+ 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,
+ 'PR_ATTRIB_VALUE': PR_ATTRIB_VALUE,
+ 'PR_COMMENT': PR_COMMENT,
+ 'PR_DECLARATION': PR_DECLARATION,
+ 'PR_KEYWORD': PR_KEYWORD,
+ 'PR_LITERAL': PR_LITERAL,
+ 'PR_NOCODE': PR_NOCODE,
+ 'PR_PLAIN': PR_PLAIN,
+ 'PR_PUNCTUATION': PR_PUNCTUATION,
+ 'PR_SOURCE': PR_SOURCE,
+ 'PR_STRING': PR_STRING,
+ 'PR_TAG': PR_TAG,
+ 'PR_TYPE': PR_TYPE
+ };
+})();
--- /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>Native Sample Descriptions</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+ <h1>Native Sample Descriptions</h1>
+
+<p>Click the profile you want:</p>
+<p><a href="mobile_n/sd_mn.htm"><img alt="Mobile Native" src="images/mn_division.png"/></a> <a href="wearable_n/sd_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 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>Web Sample Descriptions</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+ <h1>Web Sample Descriptions</h1>
+
+<p>Click the profile you want:</p>
+<p><a href="mobile_w/sd_mw.htm"><img alt="Mobile Web" src="images/mw_division.png"/></a> <a href="wearable_w/sd_ww.htm"><img alt="Wearable Web" src="images/ww_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 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) Email Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Circle) Email Sample Overview</h1>
+
+ <p>The (Circle) Email sample application demonstrates how to implement a circular view with elementary UI components and EFL Extension circular UI components.</p>
+<p>The sample uses UI components, such as <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> for view management, and <span style="font-family: Courier New,Courier,monospace">elm_popup</span>, <span style="font-family: Courier New,Courier,monospace">elm_genlist</span>, and <span style="font-family: Courier New,Courier,monospace">eext_more_option_layout</span> for the content inside the main view. <span style="font-family: Courier New,Courier,monospace">eext_genlist</span> is also used for the content of the main view as well as for the circular scrollbar.</p>
+
+<p>The following figure illustrates the main view of the (Circle) Email sample application, its wireframe structure, and component tree.</p>
+
+ <p class="figure">Figure: (Circle) Email screen</p>
+ <p align="center"><img alt="(Circle) Email Screen" src="../images/circle_email_sd.png" /></p>
+ <p align="center"><img alt="(Circle) Email Tree" src="../images/circle_email_tree.png" /></p>
+
+<h2>Implementation</h2>
+
+<h3 id="mainview">Main View</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to add surface for the circular UI component visual effect render. The conformant contains a main view (genlist) created by the <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ // Window
+ Evas_Object *win, *conform;
+ win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ 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);
+
+ evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(win, conform);
+ evas_object_show(conform);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(conform);
+ elm_object_content_set(conform, ad->nf);
+ ad->circle_surface = eext_circle_surface_naviframe_add(ad->nf);
+
+ create_main_view(ad);
+
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function pushes the genlist into the naviframe to show the main view of the application.</p>
+<pre class="prettyprint">
+static void
+create_main_view(appdata_s *ad)
+{
+ Elm_Object_Item *nf_it;
+ Evas_Object *genlist;
+
+ genlist = create_genlist(ad);
+
+ nf_it = elm_naviframe_item_push(ad->nf, NULL, NULL, NULL, genlist, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, naviframe_pop_cb, NULL);
+}
+</pre>
+
+<p>Genlist is added using the <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function and set as the content of a multiple option layout. This genlist component has 3 item classes (<span style="font-family: Courier New,Courier,monospace">title_with_groupindex</span>, <span style="font-family: Courier New,Courier,monospace">groupindex</span>, and <span style="font-family: Courier New,Courier,monospace">3text</span> styles).</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_genlist(appdata_s *ad)
+{
+ int i;
+ Evas_Object *genlist;
+ Elm_Object_Item *item;
+
+ Elm_Genlist_Item_Class *tic = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *gic = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *iic = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *pic = elm_genlist_item_class_new();
+
+ tic->item_style = "title_with_groupindex";
+ tic->func.text_get = gl_text_get;
+ tic->func.content_get = NULL;
+ tic->func.del = gl_del;
+
+ gic->item_style = "groupindex";
+ gic->func.text_get = gl_text_get;
+ gic->func.content_get = NULL;
+ gic->func.del = gl_del;
+
+ iic->item_style = "3text";
+ iic->func.text_get = gl_text_get;
+ iic->func.content_get = NULL;
+ iic->func.del = gl_del;
+
+ pic->item_style = "padding";
+
+ genlist = elm_genlist_add(ad->more_option_layout);
+ ad->circle_genlist = eext_circle_object_genlist_add(genlist, ad->circle_surface);
+
+ eext_circle_object_genlist_scroller_policy_set(ad->circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+ eext_rotary_object_event_activated_set(ad->circle_genlist, EINA_TRUE);
+
+ for (i = 0; i < NUM_OF_ITEMS; i++)
+ {
+ item_data *id = calloc(sizeof(item_data), 1);
+ id->index = i;
+
+ if (i == 0)
+ item = elm_genlist_item_append(// Genlist object
+ genlist,
+ // Item class
+ tic,
+ // Data
+ id,
+ NULL,
+ ELM_GENLIST_ITEM_GROUP,
+ NULL,
+ NULL);
+ else if (i == 1)
+ item = elm_genlist_item_append(// Genlist object
+ genlist,
+ // Item class
+ gic,
+ // Data
+ id,
+ NULL,
+ ELM_GENLIST_ITEM_GROUP,
+ NULL,
+ NULL);
+ else
+ item = elm_genlist_item_append(// Genlist object
+ genlist,
+ // Item class
+ iic,
+ // Data
+ id,
+ NULL,
+ ELM_GENLIST_ITEM_NONE,
+ NULL,
+ NULL);
+ id->item = item;
+ }
+ // Padding Item Here
+ elm_genlist_item_append(genlist, pic, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, NULL);
+
+ elm_genlist_item_class_free(tic);
+ elm_genlist_item_class_free(gic);
+ elm_genlist_item_class_free(iic);
+ elm_genlist_item_class_free(pic);
+ evas_object_show(genlist);
+
+ return genlist;
+}
+</pre>
+
+<h3 id="detail">Detail View</h3>
+
+<p>The detail view is activated when the user clicks the genlist item.</p>
+
+ <p class="figure">Figure: (Circle) Email detail view</p>
+ <p align="center"><img alt="(Circle) Email detail view" src="../images/circle_email_detail_view.png" /></p>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">gl_selected_cb()</span> function adds a label for the naviframe content. This naviframe item has the title area with the name of the view.</p>
+
+<pre class="prettyprint">
+static void
+gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *label;
+ Elm_Object_Item *it = event_info;
+ appdata_s *ad = data;
+ elm_genlist_item_selected_set(it, EINA_FALSE);
+
+ label = create_label(ad, it);
+ // View changed to text detail view
+ elm_naviframe_item_push(ad->nf, elm_object_item_part_text_get(it, "elm.text"), NULL, NULL, label, NULL);
+
+ return;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_label()</span> function creates an <span style="font-family: Courier New,Courier,monospace">elm_label</span> with text.</p>
+<pre class="prettyprint">
+static Evas_Object*
+create_label(appdata_s *ad, Elm_Object_Item *it)
+{
+ Evas_Object *label;
+ char buf[PATH_MAX];
+
+ label = elm_label_add(ad->nf);
+
+ // Label created for text view
+ snprintf(buf, sizeof(buf), "%s %s", elm_object_item_part_text_get(it, "elm.text.1"), elm_object_item_part_text_get(it, "elm.text.2"));
+ elm_label_line_wrap_set(label, ELM_WRAP_MIXED);
+ elm_object_text_set(label, buf);
+ evas_object_show(label);
+
+ return label;
+}
+</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
--- /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) Settings Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Circle) Settings Sample Overview</h1>
+
+<p>The (Circle) Settings sample application demonstrates how to implement a circular view with the elementary UI components and EFL Extension circular UI components.</p>
+
+<p>The sample 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, <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for UI component management inside the view, and <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> for the content inside the main view. <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> has three items: volume, brightness and information. When the item is clicked, its content is shown. To display a circular genlist component, the genlist component uses a circular genlist component supported by the EFL Extension.</p>
+
+<p>The following figure illustrates the main view of the (Circle) Settings sample application, its wireframe structure, and component tree.</p>
+
+ <p class="figure">Figure: (Circle) Settings main view</p>
+ <p align="center"><img alt="(Circle) Settings main view" src="../images/circle_setting_sd.png" /></p>
+ <p align="center"><img alt="(Circle) Settings tree" src="../images/circle_setting_tree.png" /></p>
+
+<h2>Implementation</h2>
+
+<h3 id="mainview">Main View</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, then adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to add surface for the circular component visual effect renderer. The conformant contains a layout for <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> which is added to act as a view manager of the window.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *conform = NULL;
+
+ // Window
+ 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 };
+ 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);
+
+ // Conformant
+ conform = elm_conformant_add(ad->win);
+ 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
+ ad->naviframe = elm_naviframe_add(conform);
+ elm_object_content_set(conform, ad->naviframe);
+
+ // Eext Circle Surface
+ ad->circle_surface = eext_circle_surface_naviframe_add(ad->naviframe);
+
+ // Main View
+ create_list_view(ad);
+
+ eext_object_event_callback_add(ad->naviframe, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
+ eext_object_event_callback_add(ad->naviframe, EEXT_CALLBACK_MORE, eext_naviframe_more_cb, NULL);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_list_view()</span> function and it is added to the naviframe. In this function, the circular genlist is created for the circular UI which requires the genlist object to initialize itself. After that, three setting items are generated and appended to the circular genlist.</p>
+<pre class="prettyprint">
+static void
+create_list_view(appdata_s *ad)
+{
+ Evas_Object *genlist = NULL;
+ Evas_Object *naviframe = ad->naviframe;
+ Elm_Object_Item *nf_it = NULL;
+ Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *titc = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *pitc = elm_genlist_item_class_new();
+ item_data *id = NULL;
+ int index = 0;
+
+ // Genlist
+ genlist = elm_genlist_add(naviframe);
+ elm_genlist_mode_set(genlist, ELM_LIST_COMPRESS);
+ evas_object_smart_callback_add(genlist, "selected", NULL, NULL);
+
+ ad->circle_genlist = eext_circle_object_genlist_add(genlist, ad->circle_surface);
+ eext_circle_object_genlist_scroller_policy_set(ad->circle_genlist, ELM_SCROLLER_POLICY_OFF, ELM_SCROLLER_POLICY_AUTO);
+ eext_rotary_object_event_activated_set(ad->circle_genlist, EINA_TRUE);
+
+ // Genlist item style
+ itc->item_style = "default";
+ itc->func.text_get = _gl_main_text_get;
+ itc->func.del = _gl_del;
+
+ // Genlist title item style
+ titc->item_style = "title";
+ titc->func.text_get = _gl_title_text_get;
+ titc->func.del = _gl_del;
+
+ // Genlist padding item style
+ pitc->item_style = "padding";
+
+ // Title item here
+ elm_genlist_item_append(genlist, titc, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);
+
+ // Main menu items here
+ id = calloc(sizeof(item_data), 1);
+ id->index = index++;
+ id->item = elm_genlist_item_append(genlist, itc, id, NULL, ELM_GENLIST_ITEM_NONE, _setting_volume_cb, ad);
+ id = calloc(sizeof(item_data), 1);
+ id->index = index++;
+ id->item = elm_genlist_item_append(genlist, itc, id, NULL, ELM_GENLIST_ITEM_NONE, _setting_brightness_cb, ad);
+ id = calloc(sizeof(item_data), 1);
+ id->index = index++;
+ id->item = elm_genlist_item_append(genlist, itc, id, NULL, ELM_GENLIST_ITEM_NONE, _setting_information_cb, ad);
+
+ // Padding item here
+ elm_genlist_item_append(genlist, pitc, NULL, NULL, ELM_GENLIST_ITEM_NONE, NULL, ad);
+
+ nf_it = elm_naviframe_item_push(naviframe, NULL, NULL, NULL, genlist, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, _naviframe_pop_cb, ad->win);
+}
+</pre>
+
+<h3 id="volume">Volume View</h3>
+
+<p>When the volume item is clicked, the volume view is shown in the main view. The following figure illustrates the volume view and its wireframe structure.</p>
+
+ <p class="figure">Figure: (Circle) Settings volume view</p>
+ <p align="center"><img alt="(Circle) Settings volume view" src="../images/circle_setting_volume_view.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_setting_volume_cb()</span> callback function is called when the first item whose name is volume is clicked. In this function, a circular slider object is created by the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function. It needs the circular surface to render the circular slider on the surface. The <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function is called to receive the rotary event. After that, the <span style="font-family: Courier New,Courier,monospace">_value_changed_cb()</span> callback function is added to the circular slider to change the text as the circular slider value is changed.</p>
+<pre class="prettyprint">
+static void
+_setting_volume_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
+{
+ char edj_path[PATH_MAX] = {0, };
+ appdata_s *ad = data;
+ Evas_Object *naviframe = ad->naviframe;
+ Evas_Object *layout = NULL;
+ Evas_Object *slider = NULL;
+ Elm_Object_Item *nf_it = NULL;
+
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ layout = elm_layout_add(naviframe);
+ elm_layout_file_set(layout, edj_path, "slider_layout");
+ elm_object_part_text_set(layout, "elm.text.slider", "3.0");
+ evas_object_show(layout);
+
+ slider = eext_circle_object_slider_add(layout, ad->circle_surface);
+ eext_circle_object_value_min_max_set(slider, 0.0, 15.0);
+ eext_circle_object_value_set(slider, 3.0);
+
+ eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+ eext_circle_object_slider_step_set(slider, 0.5);
+ evas_object_smart_callback_add(slider, "value,changed", _volume_changed_cb, layout);
+
+ nf_it = elm_naviframe_item_push(naviframe, _("Slider"), NULL, NULL, layout, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, _setting_finished_cb, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_volume_changed_cb()</span> callback function is called when the volume value is changed. In this function, the layout text is changed using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function which gets the current value of the circular slider.</p>
+<pre class="prettyprint">
+static void
+_volume_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ char buf[PATH_MAX];
+ Evas_Object *layout = data;
+
+ snprintf(buf, sizeof(buf), "%.1lf", eext_circle_object_value_get(obj));
+ printf("Slider value = %s\n", buf);
+ elm_object_part_text_set(layout, "elm.text.slider", buf);
+}
+</pre>
+
+<h3 id="brightness">Brightness View</h3>
+
+<p>When the brightness item is clicked, the brightness view is shown in the main view. The following figure illustrates the brightness view and its wireframe structure.</p>
+
+ <p class="figure">Figure: (Circle) Settings brightness view</p>
+ <p align="center"><img alt="(Circle) Settings brightness view" src="../images/circle_setting_brightness_view.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_setting_brightness_cb()</span> callback function is called when the second item whose name is brightness is clicked. In this function, a circular slider object is created by the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_slider_add()</span> function and 10 rectangles are created to display the circular slider value visually. Also, the <span style="font-family: Courier New,Courier,monospace">_brightness_changed_cb()</span> callback function is registered to change the value as the circular slider has changed.</p>
+<pre class="prettyprint">
+static void
+_setting_brightness_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
+{
+ char edj_path[PATH_MAX] = {0, };
+ appdata_s *ad = data;
+ Evas_Object *naviframe = ad->naviframe;
+ Evas_Object *layout = NULL;
+ Evas_Object *slider = NULL;
+ Evas_Object *box = NULL;
+ Evas_Object *rect[10] = {NULL, };
+ Elm_Object_Item *nf_it = NULL;
+ int i;
+
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ layout = elm_layout_add(naviframe);
+ elm_layout_file_set(layout, edj_path, "slider_layout");
+ evas_object_show(layout);
+
+ box = elm_box_add(layout);
+ elm_box_horizontal_set(box, EINA_TRUE);
+ elm_box_padding_set(box, 3, 0);
+ evas_object_show(box);
+
+ elm_object_part_content_set(layout, "elm.swallow.content", box);
+
+ for (i = 0; i < 10; ++i)
+ {
+ rect[i] = evas_object_rectangle_add(evas_object_evas_get(layout));
+ evas_object_color_set(rect[i], 0, 255, 0, 75);
+ evas_object_size_hint_min_set(rect[i], 20, 20);
+ evas_object_show(rect[i]);
+ elm_box_pack_end(box, rect[i]);
+ }
+
+ for (i = 0; i < 10; ++i)
+ ad->rect[i] = rect[i];
+
+ slider = eext_circle_object_slider_add(layout, ad->circle_surface);
+ eext_circle_object_value_min_max_set(slider, 0.0, 10.0);
+ eext_circle_object_value_set(slider, 0.0);
+
+ eext_rotary_object_event_activated_set(slider, EINA_TRUE);
+ eext_circle_object_slider_step_set(slider, 1.0);
+ evas_object_smart_callback_add(slider, "value,changed", _brightness_changed_cb, ad);
+
+ nf_it = elm_naviframe_item_push(naviframe, _("Slider"), NULL, NULL, layout, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, _setting_finished_cb, ad);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_brightness_changed_cb()</span> callback is called when the brightness value is changed. Here, the rectangles are redrawn using the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_value_get()</span> function value.</p>
+<pre class="prettyprint">
+static void
+_brightness_changed_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+ int i, value;
+
+ value = eext_circle_object_value_get(obj);
+
+ for (i = 0; i < 10; ++i)
+ {
+ if (i < value)
+ evas_object_color_set(ad->rect[i], 0, 255, 0, 150);
+ else
+ evas_object_color_set(ad->rect[i], 0, 255, 0, 75);
+ }
+}
+</pre>
+
+
+<h3 id="information">Information View</h3>
+
+<p>When the information item is clicked, the information view is shown in the main view. The following figure illustrates the information view and its wireframe structure.</p>
+
+ <p class="figure">Figure: (Circle) Settings information view</p>
+ <p align="center"><img alt="(Circle) Settings information view" src="../images/circle_setting_information_view.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">_setting_information_cb()</span> function creates a layout whose name is <span style="font-family: Courier New,Courier,monospace">slider_layout</span>. The layout has two swallow parts for a scroller and a button. The scroller with the label set to <span style="font-family: Courier New,Courier,monospace">elm.swallow.content</span> and the button is set to <span style="font-family: Courier New,Courier,monospace">elm.swallow.button</span> with the bottom style.</p>
+<pre class="prettyprint">
+static void
+_setting_information_cb(void *data, Evas_Object *obj, void *event_info EINA_UNUSED)
+{
+ char edj_path[PATH_MAX] = {0, };
+ appdata_s *ad = data;
+ Evas_Object *naviframe = ad->naviframe;
+ Evas_Object *layout = NULL;
+ Evas_Object *label = NULL;
+ Evas_Object *button = NULL;
+ Evas_Object *scroller = NULL;
+ Evas_Object *circle_scroller = NULL;
+ Elm_Object_Item *nf_it = NULL;
+
+ app_get_resource(EDJ_FILE, edj_path, (int)PATH_MAX);
+ layout = elm_layout_add(naviframe);
+ elm_layout_file_set(layout, edj_path, "info_layout");
+ evas_object_show(layout);
+
+ scroller = elm_scroller_add(layout);
+ evas_object_show(scroller);
+
+ elm_object_part_content_set(layout, "elm.swallow.content", scroller);
+
+ circle_scroller = eext_circle_object_scroller_add(scroller, ad->circle_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);
+
+ label = elm_label_add(scroller);
+ elm_label_line_wrap_set(label, ELM_WRAP_MIXED);
+ elm_object_text_set(label, "This is setting application, "
+ "By using the movement of the rotary, "
+ "you can change the value of volume and brightness.");
+ evas_object_show(label);
+
+ elm_object_content_set(scroller, label);
+
+ button = elm_button_add(layout);
+ elm_object_style_set(button, "bottom/queue");
+ elm_object_text_set(button, "OK");
+ elm_object_part_content_set(layout, "elm.swallow.button", button);
+ evas_object_smart_callback_add(button, "clicked", _button_clicked_cb, ad);
+ evas_object_show(button);
+
+ nf_it = elm_naviframe_item_push(naviframe, _("Slider"), NULL, NULL, layout, "empty");
+}
+</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
--- /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) Setting Time Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Circle) Setting Time Sample Overview</h1>
+
+<p>The (Circle) Setting Time sample application demonstrates how to implement a circular view with elementary UI components and EFL Extension circle UI components.</p>
+
+<p>The sample 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, <span style="font-family: Courier New,Courier,monospace">elm_layout</span> for UI component management inside the view, and <span style="font-family: Courier New,Courier,monospace">elm_label</span> and <span style="font-family: Courier New,Courier,monospace">elm_button</span> for the content inside the main view. The Datetime component that is provided by EFL Extension is also used for content of the main view.</p>
+
+<p>The following figure illustrates the main view of the (Circle) Setting Time sample application, its wireframe structure, and component tree.</p>
+
+ <p class="figure">Figure: (Circle) Setting Time main view</p>
+ <p align="center"><img alt=" (Circle) Setting Time main view" src="../images/circle_setting_time_sd.png" /></p>
+ <p align="center"><img alt=" (Circle) Setting Time tree" src="../images/circle_setting_time_tree.png" /></p>
+
+<h2>Implementation</h2>
+
+<h3 id="mainview">Main View</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, and adds <span style="font-family: Courier New,Courier,monospace">elm_conformant</span>. The conformant contains a naviframe for main view of this application. <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> adds the surface for the circular UI component visual effect rendering, and it is added to act as a view manager of the window and to provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function and added to the naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *win, *conform;
+ // Window
+ win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_autodel_set(win, EINA_TRUE);
+
+ evas_object_smart_callback_add(win, "delete,request", win_delete_request_cb, NULL);
+ // eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ // Conformant
+ conform = elm_conformant_add(win);
+ evas_object_size_hint_weight_set(conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_resize_object_add(win, conform);
+ evas_object_show(conform);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(conform);
+ create_main_view(ad);
+ elm_object_content_set(conform, ad->nf);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
+
+ // Add a surface for the circle object
+ ad->circle_surface = eext_circle_surface_naviframe_add(ad->nf);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_main_view()</span> function creates the content of the main view. It consists of a naviframe containing a layout that has a bottom button swallow part. The naviframe has a title on top, and a content area in the middle of the view. The <span style="font-family: Courier New,Courier,monospace">elm_label</span> is added to the content area of naviframe. This function calls the <span style="font-family: Courier New,Courier,monospace">current_time_set()</span> function to set the text of the <span style="font-family: Courier New,Courier,monospace">elm_label</span>.</p>
+<pre class="prettyprint">
+static void
+create_main_view(appdata_s *ad)
+{
+ Elm_Object_Item *nf_it;
+ Evas_Object *button, *layout;
+ time_t local_time = time(NULL);
+ struct tm *time_info = localtime(&local_time);
+
+ ad->saved_time = *time_info;
+
+ layout = elm_layout_add(ad->nf);
+ evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_layout_theme_set(layout, "layout", "bottom_button", "default");
+ evas_object_show(layout);
+
+ ad->label = elm_label_add(layout);
+ evas_object_size_hint_weight_set(ad->label, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+ label_text_set(ad->label, ad->saved_time);
+
+ evas_object_show(ad->label);
+ elm_object_part_content_set(layout, "elm.swallow.content", ad->label);
+
+ button = elm_button_add(layout);
+ elm_object_style_set(button, "bottom/queue");
+ elm_object_text_set(button, "Set Time");
+ elm_object_part_content_set(layout, "elm.swallow.button", button);
+ evas_object_smart_callback_add(button, "clicked", time_set_button_clicked_cb, ad);
+ evas_object_show(button);
+
+ nf_it = elm_naviframe_item_push(ad->nf, "Setting time", NULL, NULL, layout, NULL);
+ elm_naviframe_item_pop_cb_set(nf_it, naviframe_pop_cb, NULL);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">label_text_set()</span> function gets the time according to the format specification (hour and minute in this case), and places the result in the label.</p>
+<pre class="prettyprint">
+static void
+label_text_set(Evas_Object *label, struct tm t)
+{
+ char buf[200] = {0};
+ char text_buf[PATH_MAX];
+
+ strftime(buf, sizeof(buf), "%H:%M", &t);
+ snprintf(text_buf, sizeof(text_buf), "<align=center><font_size=80>%s</font_size></align>", buf);
+ elm_object_text_set(label, text_buf);
+}
+</pre>
+
+<h3 id="set_time">Set Time View</h3>
+
+<p>When the bottom button is clicked, the time picker view is added on main view.</p>
+
+ <p class="figure">Figure: (Circle) Setting Time set time view</p>
+ <p align="center"><img alt="(Circle) Setting Time set time view" src="../images/circle_setting_time_set_time_view.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">time_set_button_clicked_cb()</span> function is called when the user clicks the bottom button in the main view.</p>
+<p>The function creates the content of the time picker. The time picker consists of a layout containing the datetime view and a bottom button area. The <span style="font-family: Courier New,Courier,monospace">elm_button</span> has been added to the bottom of layout with a check icon. Then the text for <span style="font-family: Courier New,Courier,monospace">elm.text</span> part is set as <strong>Set Time</strong>, and the <span style="font-family: Courier New,Courier,monospace">eext_circle_object_datetime_add()</span> function is called with the created circle surface object to represent the circular visual effect on the datetime. The <span style="font-family: Courier New,Courier,monospace">eext_rotary_object_event_activated_set()</span> function is also needed to let the datetime get the rotary event callback.</p>
+<pre class="prettyprint">
+static void
+time_set_button_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ struct appdata *ad = data;
+ Evas_Object *button, *icon, *layout, *circle_datetime;
+ Elm_Object_Item *nf_it = NULL;
+
+ layout = elm_layout_add(ad->nf);
+ elm_layout_theme_set(layout, "layout", "circle", "datetime");
+
+ button = elm_button_add(layout);
+ elm_object_style_set(button, "bottom");
+
+ icon = elm_image_add(button);
+ elm_image_file_set(icon, ICON_DIR "/check.png", NULL);
+ elm_object_content_set(button, icon);
+ evas_object_show(icon);
+
+ elm_object_part_content_set(layout, "elm.swallow.btn", button);
+ evas_object_smart_callback_add(button, "clicked", set_clicked_cb, ad);
+
+ elm_object_part_text_set(layout, "elm.text", "Set Time");
+
+ ad->datetime = elm_datetime_add(layout);
+
+ circle_datetime = eext_circle_object_datetime_add(ad->datetime, ad->circle_surface);
+ eext_rotary_object_event_activated_set(circle_datetime, EINA_TRUE);
+
+ elm_datetime_format_set(ad->datetime, FORMAT);
+ elm_datetime_value_set(ad->datetime, &ad->saved_time);
+
+ elm_object_style_set(ad->datetime, "timepicker/circle");
+ elm_object_part_content_set(layout, "elm.swallow.content", ad->datetime);
+
+ nf_it = elm_naviframe_item_push(ad->nf, "Time picker", NULL, NULL, layout, NULL);
+ elm_naviframe_item_title_enabled_set(nf_it, EINA_FALSE, EINA_FALSE);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">set_clicked_cb()</span> function is called when the user clicks the bottom button in the time picker view. It changes the label text to the selected value and the view is changed to the main view.</p>
+<pre class="prettyprint">
+static void
+set_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ appdata_s *ad = data;
+
+ elm_datetime_value_get(ad->datetime, &ad->saved_time);
+
+ label_text_set(ad->label, ad->saved_time);
+
+ elm_naviframe_item_pop(ad->nf);
+}
+</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
--- /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) UI Components Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Circle) UI Components Sample Overview</h1>
+ <p>The (Circle) UI Components Elementary sample application demonstrates how to implement an interactive application GUI using basic UI components of the circular style, such as button, slider, datetime, and (Eext) more option.</p>
+
+ <p>The following figure illustrates some of the screens of the (Circle) UI Components.</p>
+
+ <p class="figure">Figure: (Circle) UI Components screens</p>
+ <p align="center"><img alt="(Circle) UI Components screens" src="../images/circle_ui_components_sd.png" /></p>
+
+<p>The application opens with the Tizen UI main screen, which displays a list of circular UI components. To access the UI component functionalities, click a list item. In the list, there are some UI components with an <span style="font-family: Courier New,Courier,monospace">Eext</span> prefix. These UI components use the EFL Extension (Eext) APIs, which specialize in the circular UI and are controlled by the rotary event.</p>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">bg.c</span></td>
+ <td>This file creates and initializes a view, which displays the Background component.
+ <p>The file contains code for setting the color or image for the background view.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">button.c</span></td>
+ <td>This file creates and initializes a view, which displays the Button components. You can view and test various button styles.
+ <p>The file contains code for handling the user events related to the buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">check.c</span></td>
+ <td>This file creates and initializes a view, which displays the Check button components. You can view and test various check button styles.
+ <p>The file contains code for handling the user events related to the check buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">entry.c</span>
+<p><span style="font-family: Courier New,Courier,monospace">entry.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Entry components.
+ <p>The files contain code for handling the entry style.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">genlist.c</span></td>
+ <td>This file creates and initializes a view, which displays the Genlist components. You can view and test various list styles, such as group index, 1 line, and multiline.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">image.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">image.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Image components.
+ <p>The files contain code for setting the image properties.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">index.edc</span></p></td>
+ <td>These files create and initialize the scrollable views with a page indicator. This page indicator can be implemented by the Index widget, as shown in the file.
+ <p>The files contain code for setting the index style properties.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">layout.c</span></td>
+ <td>This file creates and initializes a view, which displays the Layout component.
+ <p>The file contains code for creating views with no content and views with a title.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">main.c</span></td>
+ <td>This file creates and initializes a view, which displays the main UI component list.
+ <p>The file contains code for constructing the Window, Conformant, Layout, and Naviframe, and event registrations related to the application life-cycle.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">map.c</span></td>
+ <td>This file creates and initializes a view, which displays the Map components.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">popup.c</span></td>
+ <td>This file creates and initializes a view, which displays the Popup component. You can view and test various pop-up styles.
+ <p>The file contains code for handling the user events related to pop-ups, such as opening and closing a pop-up, and setting pop-up styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">progressbar.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">progressbar.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Progressbar component. You can view and test progress bar usage.
+ <p>The files contain code for handling user events related to progress bars, such as timing and deleting the progress bar.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">radio.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">radio.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Radio button component. You can view and test various radio button styles.
+ <p>The files contain code for handling the user events related to the radio buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">scroller.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">scroller.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Scroller component. You can view and test two types of scroll style, horizontal style and vertical style.
+ <p>The files contain code for setting the scroller styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_datetime.c</span></td>
+ <td>This file creates and initializes a view, which displays the (Eext) Datetime component. You can view and test changing the time and date with the rotary event.
+ <p>The file contains code for handling user events related to the datetime in the circular UI.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_genlist.c</span></td>
+ <td>This file creates and initializes a view, which displays the (Eext) Genlist components. You can view and test various list styles, such as title, 1text, 2text and so on.
+ <p>The file contains code for handling user events related to genlist which has a scroll bar in the circular UI.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_more_option.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_more_option.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the (Eext) More option component. You can view and test more option items rotating on the x-z axis.
+ <p>The files contain code for handling user events related to more options in the circular UI.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_progressbar.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">eext_progressbar.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the (Eext) Progressbar component. You can view and test progressbar usage.
+ <p>The files contain code for handling user events related to progressbar in the circular UI.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_scroller.c</span></td>
+ <td>This file creates and initializes a view, which displays the (Eext) Scroller. You can view and test scroller usage.
+ <p>The file contains code for handling user events related to scroller in the circular UI.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">eext_slider.c</span></td>
+ <td>This file creates and initializes a view, which displays the (Eext) Slider component. You can view and test slider usage.
+ <p>The file contains code for handling user events related to the scroller in the circular UI.</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>
\ 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>(Rectangle) Email Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Rectangle) Email Sample Overview</h1>
+
+ <p>The (Rectangle) Email sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a UI component hierarchy.</p>
+<p>The sample 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 the view management, and the <span style="font-family: Courier New,Courier,monospace">elm_genlist</span> UI component for the content inside the main view.</p>
+
+<p>The following figure illustrates the main view of the (Rectangle) Email, its wireframe structure, and the UI component tree. </p>
+
+ <p class="figure">Figure: (Rectangle) Email screen</p>
+ <p align="center"><img alt="(Rectangle) Email screen" src="../images/rectemail_sd.png" /></p>
+ <p align="center"><img alt="(Rectangle) Email screen" src="../images/rectemail_tree.png" /></p>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, and adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. The <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component is added to act as the window view manager and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function and added to the naviframe.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *btn;
+ Elm_Object_Item *nf_it;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+
+ if (elm_win_wm_rotation_supported_get(ad->win))
+ {
+ 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);
+
+ // Conformant
+ ad->conform = elm_conformant_add(ad->win);
+ evas_object_size_hint_weight_set(ad->conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ elm_win_indicator_mode_set(ad->win, ELM_WIN_INDICATOR_SHOW);
+ elm_win_indicator_opacity_set(ad->win, ELM_WIN_INDICATOR_OPAQUE);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ elm_object_content_set(ad->conform, ad->nf);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, eext_naviframe_back_cb, NULL);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_MORE, eext_naviframe_more_cb, NULL);
+ evas_object_show(ad->nf);
+
+ // Genlist
+ ad->genlist = create_genlist(ad);
+
+ btn = create_title_btn(ad);
+ nf_it = elm_naviframe_item_push(ad->nf, "Email", NULL, btn, ad->genlist, NULL);
+ elm_naviframe_item_pop_cb_set(nf_it, naviframe_pop_cb, NULL);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function creates a genlist, which has 2 item classes: group item and item.</p>
+
+<pre class="prettyprint">
+static Evas_Object*
+create_genlist(appdata_s *ad)
+{
+ Evas_Object *genlist;
+ Elm_Object_Item *item;
+ int index = 0;
+
+ // Create item class
+ Elm_Genlist_Item_Class *gtc = elm_genlist_item_class_new();
+ Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+ gtc->item_style = "title";
+ gtc->func.text_get = gl_text_get;
+ gtc->func.content_get = gl_icon_get;
+ gtc->func.del = gl_del_cb;
+
+ itc->item_style = "2text";
+ itc->func.text_get = gl_text_get;
+ itc->func.content_get = gl_icon_get;
+ itc->func.del = gl_del_cb;
+
+ // Genlist
+ genlist = elm_genlist_add(ad->nf);
+ // COMPRESS MODE
+ // For the mobile view, because it has a full window, compress mode must be used
+ elm_genlist_mode_set(genlist, ELM_LIST_COMPRESS);
+ // HOMOGENEOUS MODE
+ // If item height is same when each style name is same, use homogeneous mode
+ elm_genlist_homogeneous_set(genlist, EINA_TRUE);
+
+ for (index = 0; index < 20; index++)
+ {
+ item_data_s *id = calloc(sizeof(item_data_s), 1);
+ id->index = index;
+ if (index == 0)
+ {
+ item = elm_genlist_item_append(genlist, // Genlist object
+ gtc, // Item class
+ id, // Item class user data
+ NULL,
+ ELM_GENLIST_ITEM_GROUP, // Item type
+ gl_selected_cb, // Select smart callback
+ ad); // Smart callback user data
+ elm_genlist_item_select_mode_set(item, ELM_OBJECT_SELECT_MODE_DISPLAY_ONLY);
+ }
+ else
+ {
+ item = elm_genlist_item_append(genlist, // Genlist object
+ itc, // Item class
+ id, // Item class user data
+ NULL,
+ ELM_GENLIST_ITEM_NONE, // Item type
+ gl_selected_cb, // Select smart callback
+ ad); // Smart callback user data
+ }
+ id->item = item;
+ }
+
+ elm_genlist_item_class_free(gtc);
+ elm_genlist_item_class_free(itc);
+ evas_object_show(genlist);
+
+ return genlist;
+}
+</pre>
+
+<p>When the genlist is clicked, the main view changes to the second view.</p>
+
+ <p class="figure">Figure: Second view screen</p>
+ <p align="center"><img alt="Second view screen" src="../images/rectemail2_sd.png" /></p>
+
+<pre class="prettyprint">
+static void
+gl_selected_cb(void *data, Evas_Object *obj, void *event_info)
+{
+ Evas_Object *label;
+ Elm_Object_Item *it = event_info;
+ appdata_s *ad = data;
+ elm_genlist_item_selected_set(it, EINA_FALSE);
+ label = create_label(ad, elm_object_item_part_text_get(it, "elm.text"));
+ elm_naviframe_item_push(ad->nf, elm_object_item_part_text_get(it, "elm.text.1"), NULL, NULL, label, NULL);
+
+ 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>
\ 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>(Rectangle) Settings Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Rectangle) Settings Sample Overview</h1>
+
+ <p>The (Rectangle) Settings sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a UI component hierarchy.</p>
+<p>The sample uses UI components for the view management (for example, <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> and <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span>), UI component management inside the view (<span style="font-family: Courier New,Courier,monospace">elm_layout</span>) and content inside the main view (<span style="font-family: Courier New,Courier,monospace">elm_genlist</span>).</p>
+
+<p>The following figure illustrates the main view of the (Rectangle) Settings, its wireframe structure, and the UI component tree. </p>
+
+ <p class="figure">Figure: (Rectangle) Settings screen</p>
+ <p align="center"><img alt="(Rectangle) Settings screen" src="../images/rectsettings_sd.png" /></p>
+ <p align="center"><img alt="(Rectangle) Settings screen" src="../images/rectsettings_tree.png" /></p>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, and adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. The <span style="font-family: Courier New,Courier,monospace">elm_naviframe</span> component is added to act as the window view manager and provide the window title functionality. The main view is created using the <span style="font-family: Courier New,Courier,monospace">create_genlist()</span> function and added to the naviframe.</p>
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Elm_Object_Item *nf_it;
+
+ // Window
+ ad->win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+ elm_win_conformant_set(ad->win, EINA_TRUE);
+ elm_win_autodel_set(ad->win, EINA_TRUE);
+ evas_object_smart_callback_add(ad->win, "delete,request", win_delete_request_cb, NULL);
+
+ // Conformant
+ ad->conform = elm_conformant_add(ad->win);
+ elm_win_resize_object_add(ad->win, ad->conform);
+ evas_object_show(ad->conform);
+
+ // Naviframe
+ ad->nf = elm_naviframe_add(ad->conform);
+ eext_object_event_callback_add(ad->nf, EEXT_CALLBACK_BACK, nf_back_cb, ad);
+ elm_object_content_set(ad->conform, ad->nf);
+ evas_object_show(ad->nf);
+
+ // Genlist
+ ad->genlist = create_genlist(ad->nf);
+
+ nf_it = elm_naviframe_item_push(ad->nf, "Settings", NULL, NULL, ad->genlist, "empty");
+ elm_naviframe_item_pop_cb_set(nf_it, nf_it_pop_cb, ad);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}</pre>
+
+<p>When the genlist is clicked, the main view changes to the second view.</p>
+
+ <p class="figure">Figure: Second view screen</p>
+ <p align="center"><img alt="Second view screen" src="../images/rectsettings2_sd.png" /></p>
+
+<pre class="prettyprint">
+static void
+gl_selected_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info)
+{
+ Evas_Object *nf = (Evas_Object *)data, *label;
+ Elm_Object_Item *it = event_info;
+ Item_Data *id = elm_object_item_data_get(it);
+
+ // Unhighlight item
+ elm_genlist_item_selected_set(id->item, EINA_FALSE);
+
+ // Create second view
+ label = create_label(nf, "This is sample view");
+ elm_naviframe_item_push(nf, "Second View", NULL, NULL, label, NULL);
+}</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
--- /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>(Rectangle) UI Components Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Rectangle) UI Components Sample Overview</h1>
+ <p>The (Rectangle) UI Components Elementary sample application demonstrates how to implement an interactive application GUI using basic UI components, such as a button, entry, and popup.</p>
+
+ <p>The following figure illustrates some of the screens of the (Rectangle) UI Components.</p>
+
+ <p class="figure">Figure: (Rectangle) UI Components screens</p>
+ <p align="center"><img alt="(Rectangle) UI Components screens" src="../images/rectuicomponents_sd.png" /></p>
+
+<p>The application opens with the Tizen UI main screen, which displays a list of rectangular UI components. To access the UI component functionalities, click a list item.</p>
+
+<h2>Source Files</h2>
+
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">bg.c</span></td>
+ <td>This file creates and initializes a view, which displays the Background component.
+ <p>The file contains code for setting the color or image for the background view.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">button.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">button.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Button components. You can view and test various button styles.
+ <p>The files contain code for handling the user events related to buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">check.c</span></td>
+ <td>This file creates and initializes a view, which displays the Check button components. You can view and test various check button styles.
+ <p>The file contains code for handling user events related to check buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">ctxpopup.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">ctxpopup.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Ctxpopup. You can view and test the ctxpopup usage.
+ <p>The files contain code for handling user events related to key events and ctxpopup.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">datetime.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">datetime.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Datetime styles and picker. You can view and test changing the time and date with the picker.
+ <p>The files contain code for handling user events related to the datetime picker.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">entry.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">entry.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Entry components. You can view and test various entry styles.
+ <p>The files contain code for setting entry style properties.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">fastscroll.c</span></td>
+ <td>This file creates and initializes a view, which displays the Fastscroll implemented using the index component. You can view and test the fastscroll usage.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">genlist.c</span></td>
+ <td>This file creates and initializes a view, which displays the Genlist components. You can view and test various list styles, such as group index, 1 line, and multiline.
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.c</span></td>
+ <td>This file creates and initializes the scrollable views with a page indicator. This page indicator can be implemented by the Index widget as you can see in the file.
+ <p>The file contains code for setting the index style properties.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">label.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">label_slide.c</span></p>
+ <p><span style="font-family: Courier New,Courier,monospace">label.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Label component. You can see the basic use of label and also check label with sliding style.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">layout.c</span></td>
+ <td>This file creates and initializes a view, which displays the Layout component.
+ <p>The file contains code for creating views with no content and views with a title.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">main.c</span></td>
+ <td>This file creates and initializes a view, which displays the main UI component list.
+ <p>The file contains code for constructing the Window, Conformant, Layout, and Naviframe, and event registrations related to the application life-cycle.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">naviframe.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">naviframe.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Naviframe components. You can view and test various naviframe styles.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">popup.c</span></td>
+ <td>This file creates and initializes a view, which displays the Popup component. You can view and test various pop-up styles.
+ <p>The file contains code for handling user events related to pop-ups, such as opening and closing a pop-up, and setting pop-up styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">progressbar.c</span></td>
+ <td>This file creates and initializes a view, which displays the Progressbar component. You can view and test progress bar usage.
+ <p>The file contains code for handling user events related to progress bars, such as timing and deleting the progress bar.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">radio.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">radio.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Radio button component. You can view and test various radio button styles.
+ <p>The files contain code for handling user events related to the radio buttons.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">scroller.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">scroller.edc</span></p></td>
+ <td>These files creates and initialize a view, which displays the Scroller component. You can view and test two types of scroll style, horizontal style and vertical style.
+ <p>The files contain code for setting the scroller styles.</p>
+ </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">slider.c</span>
+ <p><span style="font-family: Courier New,Courier,monospace">slider.edc</span></p></td>
+ <td>These files create and initialize a view, which displays the Slider component. You can view and test various slider styles.
+ <p>The files contain code for setting the slider styles.</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>
\ 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>(Rectangle) UI Dialer Sample Overview</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>(Rectangle) UI Dialer Sample Overview</h1>
+
+ <p>The (Rectangle) UI Dialer sample demonstrates how to implement a complex view using EFL UI components and containers.</p>
+<p>The sample 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_panel</span>) for the view management, containers (such as <span style="font-family: Courier New,Courier,monospace">elm_grid</span> and <span style="font-family: Courier New,Courier,monospace">elm_table</span>) for UI component management inside the view, 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_entry</span>) for the content inside view.</p>
+
+<p>The following figure illustrates the main view of the (Rectangle) UI Dialer, its wireframe structure, and the UI component tree. </p>
+
+ <p class="figure">Figure: (Rectangle) UI Dialer screen</p>
+ <p align="center"><img alt="(Rectangle) UI Dialer screen" src="../images/rectuidialer_sd.png" /></p>
+ <p align="center"><img alt="(Rectangle) UI Dialer screen" src="../images/rectuidialer_tree.png" /></p>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">create_base_gui()</span> function is responsible for creating the application layout. It starts by creating a window, and adds the <span style="font-family: Courier New,Courier,monospace">elm_conformant</span> to it to decorate the window with an indicator. The window contains a grid structure for the entry display and its button panel. The entry display is aligned to the top of the grid and the button panel to the bottom of the grid.</p>
+
+<pre class="prettyprint">
+static void
+create_base_gui(appdata_s *ad)
+{
+ Evas_Object *panel;
+
+ 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};
+ 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);
+ eext_object_event_callback_add(ad->win, EEXT_CALLBACK_BACK, win_back_cb, ad);
+
+ // Conformant
+ ad->conform = create_conform(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);
+
+ // Grid
+ ad->grid = elm_grid_add(ad->conform);
+ evas_object_size_hint_weight_set(ad->grid, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(ad->grid, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_content_set(ad->conform, ad->grid);
+
+ // Entry
+ ad->entry = create_entry(ad->grid);
+ elm_grid_pack(ad->grid, ad->entry, 5, 5, 90, 20);
+
+ // Panel
+ panel = create_panel(grid, ad);
+ elm_grid_pack(grid, panel, 0, 30, 100, 70);
+
+ // Show the window after the base GUI is set up
+ evas_object_show(ad->win);
+}
+</pre>
+
+<p>To create the main view:</p>
+
+<ul><li><p>The <span style="font-family: Courier New,Courier,monospace">create_entry()</span> function creates the entry display. The input for the display is created with number buttons created in the next steps, so there is no need for a software keypad. Disable the software keypad by setting the <span style="font-family: Courier New,Courier,monospace">elm_entry_editable_set()</span> function to <span style="font-family: Courier New,Courier,monospace">false</span>. The display uses a center-aligned, 50 pt font.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_entry(Evas_Object *parent)
+{
+ Evas_Object *entry;
+
+ entry = elm_entry_add(parent);
+ elm_entry_editable_set(entry, EINA_FALSE);
+ elm_entry_single_line_set(entry, EINA_TRUE);
+ elm_entry_text_style_user_push(entry, "DEFAULT='font_size=50 align=center'");
+ evas_object_show(entry);
+
+ return entry;
+}
+</pre></li>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">create_panel()</span> function creates the number button panel. The buttons are arranged in a table structure with a 1-pixel padding.</p>
+
+<pre class="prettyprint">
+static Evas_Object *
+create_panel(Evas_Object *parent, appdata_s *ad)
+{
+ Evas_Object *table, *button;
+
+ table = elm_table_add(parent);
+ elm_table_padding_set(table, 1, 1);
+
+ button = elm_button_add(table);
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_text_set(button, "<font_size = 50>1</font_size>");
+ evas_object_smart_callback_add(button, "clicked", clicked_1_cb, ad->entry);
+ evas_object_show(button);
+ elm_table_pack(table, button, 0, 0, 1, 1);
+
+ button = elm_button_add(table);
+ evas_object_size_hint_weight_set(button, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+ evas_object_size_hint_align_set(button, EVAS_HINT_FILL, EVAS_HINT_FILL);
+ elm_object_text_set(button, "<font_size = 50>2</font_size>");
+ evas_object_smart_callback_add(button, "clicked", clicked_2_cb, ad->entry);
+ evas_object_show(button);
+ elm_table_pack(table, button, 1, 0, 1, 1);
+
+ evas_object_show(table);
+
+ return table;
+}
+</pre>
+
+<p>For example, when the user clicks the <strong>0</strong> button, the <span style="font-family: Courier New,Courier,monospace">clicked_0_cb()</span> function is called and adds the text in the entry display. When the user clicks the <strong>cancel</strong> button, the <span style="font-family: Courier New,Courier,monospace">clicked_cancel_cb() </span> function is called and removes the text in the entry display.</p>
+<pre class="prettyprint">
+static void
+clicked_0_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+ Evas_Object *entry = data;
+ elm_entry_entry_append(entry, "0");
+}
+
+static void
+clicked_cancel_cb(void *data, Evas_Object *obj EINA_UNUSED, void *event_info EINA_UNUSED)
+{
+ Evas_Object *entry = data;
+ char *ch = NULL;
+ int len;
+
+ ch = elm_entry_entry_get(entry);
+ len = strlen(ch);
+ if (len > 1)
+ {
+ ch[len-1] = '\0';
+ elm_entry_entry_set(entry, ch);
+ }
+ else
+ elm_entry_entry_set(entry, "");
+}
+</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>
\ 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>Wearable Native Sample Descriptions</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="Wearable native" src="../images/wn_icon.png"/></p>
+ </div>
+
+ <h1>Wearable Native Sample Descriptions</h1>
+
+ <p>To access general information about the native sample functionality and the content of the sample source files, click the sample name in the following tables.</p>
+
+ <table border="1">
+ <caption>
+ Table: Wearable native samples in the Tizen SDK
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="circleuicomponents_sd_wn.htm">(Circle) UI Components</a></td>
+ <td>Demonstrates how you can implement UI components in a circular view.</td>
+ </tr>
+ <tr>
+ <td><a href="rectuicomponents_sd_wn.htm">(Rectangle) UI Components</a></td>
+ <td>Demonstrates how you can implement UI components in a rectangular view.</td>
+ </tr>
+ <tr>
+ <td><a href="circleemail_sd_wn.htm">(Circle) Email</a></td>
+ <td>Demonstrates how you can implement a complex circular email view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="circlesettingtime_sd_wn.htm">(Circle) Setting Time</a></td>
+ <td>Demonstrates how you can implement a complex circular time setting view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="circlesettings_sd_wn.htm">(Circle) Settings</a></td>
+ <td>Demonstrates how you can implement a complex circular settings view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="rectemail_sd_wn.htm">(Rectangle) Email</a></td>
+ <td>Demonstrates how you can implement a complex rectangular email view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="rectsettings_sd_wn.htm">(Rectangle) Settings</a></td>
+ <td>Demonstrates how you can implement a complex rectangular settings view using EFL UI components and containers.</td>
+ </tr>
+ <tr>
+ <td><a href="rectuidialer_sd_wn.htm">(Rectangle) UI Dialer</a></td>
+ <td>Demonstrates how you can implement a rectangular dialer view.</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>Altimeter Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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/wearable/tizen/sensor.html">Sensor API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Altimeter Sample Overview</h1>
+ <p>The Altimeter sample application demonstrates how you can allow the user to measure the current altitude and pressure using the Gear device.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the Altimeter.</p>
+ <p class="figure">Figure: Altimeter screens</p>
+ <p align="center"><img alt="Altimeter screens" src="../images/altimeter_ww.png" /> </p>
+ <p>When the application opens, the calibration prompt popup asks you to perform a calibration to set up a reference pressure. The calibration is important because it affects the correctness of the calculated altitude.</p>
+ <p>To perform the calibration, click <strong>Yes</strong>. In the calibration confirmation pop-up, click <strong>Yes</strong> again. After the calibration is ready, the main screen is shown with the reference pressure. The current pressure and altitude are displayed too.</p>
+ <p>If you skip the calibration at the beginning and want to perform it later on, you can click <strong>Calibrate</strong> on the main screen at any time.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file initializes the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the core modules that are used in other parts of application code. The <span style="font-family: Courier New,Courier,monospace">core.js</span> file implements a simple AMD (Asynchronous Module Definition) and specifies module defining. The application uses a simple MV (Model View) architecture.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/</span></td>
+ <td>This directory contains the helper function that returns the parent node with a class name given as a second parameter.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contain the code for the main application object and its methods, the object that stores calibrated pressure data, and the <span style="font-family: Courier New,Courier,monospace">modelPressure</span> object that is used to calibrate, get results received from the pressure sensor, and handle UI events for all pages.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains files for implementing the application views.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The application code is separated into modules. Each module specifies its dependent modules.</p>
+<p>The entry point for the application is the <span style="font-family: Courier New,Courier,monospace">js/app.js</span> module. It is loaded first by the <span style="font-family: Courier New,Courier,monospace">js/core/core.js</span> library based on the <span style="font-family: Courier New,Courier,monospace">data-main</span> attribute:</p>
+<pre class="prettyprint">
+<!--index.html-->
+<script src="./js/core/core.js" data-main="./js/app.js"></script>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">js/app.js</span> module loads the <span style="font-family: Courier New,Courier,monospace">views/init</span> view initialization module by adding it as a dependent module in the required array:</p>
+ <pre class="prettyprint">
+/* js/app.js */
+define(
+{
+ name: 'app',
+ requires: ['views/init'],
+ def: function appInit()
+ {
+ 'use strict';
+
+ function init()
+ {
+ console.log('APP: init()');
+ }
+
+ return
+ {
+ init: init
+ };
+ }
+});
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">views/init</span> module loads the <span style="font-family: Courier New,Courier,monospace">views/main</span> view module as a dependency to let the views initialize. It also handles the Tizen hardware keys, checks the battery state, and fires the <span style="font-family: Courier New,Courier,monospace">device.ready</span> event that allows the application to start obtaining information from the Sensor API.</p>
+<pre class="prettyprint">
+/* js/views/init.js */
+define(
+{
+ name: 'views/init',
+ requires: ['core/event', 'core/application', 'core/systeminfo', 'views/main'],
+ def: function viewsInitPage(req)
+ {
+ 'use strict';
+
+ var e = req.core.event,
+ app = req.core.application,
+ sysInfo = req.core.systeminfo;
+
+ /* Register the view event listeners */
+ function bindEvents()
+ {
+ document.addEventListener('tizenhwkey', function onTizenhwkey(e)
+ {
+ if (e.keyName === 'back')
+ {
+ app.exit();
+ }
+ });
+ sysInfo.listenBatteryLowState();
+ }
+
+ /* Handle core.battery.low event */
+ function onLowBattery()
+ {
+ app.exit();
+ }
+
+ /* Handle the core.battery.checked state */
+ function onBatteryChecked()
+ {
+ e.fire('device.ready');
+ }
+
+ /* Initialize the module */
+ function init()
+ {
+ bindEvents();
+ sysInfo.checkBatteryLowState();
+ }
+
+ e.listeners(
+ {
+ 'core.systeminfo.battery.low': onLowBattery,
+ 'core.systeminfo.battery.checked': onBatteryChecked
+ });
+
+ return
+ {
+ init: init
+ };
+ }
+});
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">views/main</span> module has several responsibilities:</p>
+
+<ul><li>It loads the other modules as its dependencies. These include 2 important modules, <span style="font-family: Courier New,Courier,monospace">models/settings</span> and <span style="font-family: Courier New,Courier,monospace">models/pressure</span>, that manage the application data model.</li>
+
+<li>It handles most of the application UI interaction. For this purpose, it registers the event handlers that cover all user touch behaviors.</li>
+
+<li>It listens for the important events triggered by the <span style="font-family: Courier New,Courier,monospace">views/init</span> and <span style="font-family: Courier New,Courier,monospace">models/pressure</span> modules:
+<ul><li><p>When the <span style="font-family: Courier New,Courier,monospace">views.init.device.ready</span> event occurs, it calls the <span style="font-family: Courier New,Courier,monospace">onDeviceReady()</span> method. This method uses methods from the <span style="font-family: Courier New,Courier,monospace">models/pressure</span> module to obtain the sensor object from the Sensor API and to start listening to its data.</p></li>
+<li><p>When the <span style="font-family: Courier New,Courier,monospace">models.pressure.start</span> event occurs, the application displays a calibration popup to ask the user whether the device's reference pressure is updated. When the <span style="font-family: Courier New,Courier,monospace">models.pressure.error</span> event occurs, the application displays an error popup message, and in case of the <span style="font-family: Courier New,Courier,monospace">models.pressure.change</span> event, the application updates the current pressure value by calling the <span style="font-family: Courier New,Courier,monospace">updatePressureValue()</span> method and the calculates the current altitude by calling the <span style="font-family: Courier New,Courier,monospace">updateAltitudeValue()</span> method.</p></li></ul></li></ul>
+<pre class="prettyprint">
+/* js/views/main.js */
+define(
+{
+ name: 'views/main',
+ requires: ['core/event', 'models/settings', 'models/pressure', 'core/application'],
+ def: function viewsMainPage(req)
+ {
+ 'use strict';
+
+ var e = req.core.event,
+ sensor = req.models.pressure,
+ settings = req.models.settings,
+ app = req.core.application,
+
+ ARE_YOU_SURE_MSG = 'Are you sure you want to calibrate device?',
+ ON_TARGET_ONLY_MSG = 'App works only on Target. ' + 'Please run this on Target.',
+ SENSOR_NOT_AVAILABLE_MSG = 'Pressure sensor is not available.',
+ SENSOR_NOT_SUPPORTED_MSG = 'Pressure sensor is not supported ' + 'on this device.',
+ SENSOR_UNKNOWN_ERROR_MSG = 'Unknown sensor error occurs.',
+
+ calibrationMessage = null,
+ calibrationBtn = null,
+ yesBtn = null,
+ noBtn = null,
+ referenceValue = null,
+ pressureValue = null,
+ altitudeValue = null,
+ alertElement = null,
+ alertMessage = null,
+ alertOk = null,
+ popupCalibration = null;
+
+ /* Update the reference pressure value */
+ function updateReferenceValue()
+ {
+ referenceValue.innerText = settings.get('pressure').toFixed(2);
+ }
+
+ /* Update the current pressure value */
+ /* @param {number} value */
+ function updatePressureValue(value)
+ {
+ pressureValue.innerText = value.toFixed(2);
+ }
+
+ /* Update the altitude value */
+ /* @param {number} value */
+ function updateAltitudeValue(value)
+ {
+ var reference = settings.get('pressure'),
+ text = '',
+ altitude = -8727 * Math.log(value / reference);
+
+ text = altitude.toFixed(0);
+ if (text === '-0')
+ {
+ text = '0';
+ }
+ altitudeValue.innerText = text;
+ }
+
+ /* Reset the altitude value */
+ function resetAltitudeValue()
+ {
+ altitudeValue.innerText = '0';
+ }
+
+ /* Show the application working space */
+ function showWorkingSpace()
+ {
+ updateReferenceValue();
+ }
+
+ /* Show the application start popup */
+ function showCalibrationMonit()
+ {
+ tau.openPopup(popupCalibration);
+ }
+
+ /* Calibrate the pressure */
+ function calibratePressure()
+ {
+ settings.set('pressure', sensor.getAverageSensorValue());
+ resetAltitudeValue();
+ updateReferenceValue();
+ }
+
+ /* Show the alert popup */
+ /* @param {string} message Message */
+ function openAlert(message) {
+ alertMessage.innerHTML = message;
+ tau.openPopup(alertElement);
+ }
+
+ /* Handle the click event on the calibration button */
+ function onCalibrationBtnClick()
+ {
+ calibrationMessage.innerHTML = ARE_YOU_SURE_MSG;
+ showCalibrationMonit();
+ }
+
+ /* Handle the click event on the yes button */
+ function onYesBtnClick()
+ {
+ tau.closePopup();
+ showWorkingSpace();
+ calibratePressure();
+ }
+
+ /* Handle the click event on the no button */
+ function onNoBtnClick()
+ {
+ tau.closePopup();
+ showWorkingSpace();
+ }
+
+ /* Handle the sensor.start event */
+ function onSensorStart()
+ {
+ showCalibrationMonit();
+ }
+
+ /* Handle the models.pressure.error event */
+ /* @param {object} data */
+ function onSensorError(data)
+ {
+ var type = data.detail.type;
+
+ if (type === 'notavailable')
+ {
+ openAlert(SENSOR_NOT_AVAILABLE_MSG);
+ }
+ else if (type === 'notsupported')
+ {
+ openAlert(SENSOR_NOT_SUPPORTED_MSG);
+ }
+ else
+ {
+ openAlert(SENSOR_UNKNOWN_ERROR_MSG);
+ }
+ }
+
+ /* Handle the sensor.change event */
+ /* @param {Event} ev */
+ function onSensorChange(ev)
+ {
+ updatePressureValue(ev.detail.average);
+ updateAltitudeValue(ev.detail.average);
+ }
+
+ /* Handle the device.ready event */
+ function onDeviceReady()
+ {
+ sensor.initSensor();
+ if (sensor.isAvailable())
+ {
+ sensor.setChangeListener();
+ sensor.start();
+ }
+ }
+
+ /* Handle the click event for the OK button */
+ function onOkClick()
+ {
+ tau.closePopup();
+ }
+
+ /* Handle the popupHide event on the popup element */
+ function onPopupHide()
+ {
+ app.exit();
+ }
+
+ /* Register the event listeners */
+ function bindEvents()
+ {
+ calibrationBtn.addEventListener('click', onCalibrationBtnClick);
+ yesBtn.addEventListener('click', onYesBtnClick);
+ noBtn.addEventListener('click', onNoBtnClick);
+ alertElement.addEventListener('popuphide', onPopupHide);
+ alertOk.addEventListener('click', onOkClick);
+ }
+
+ /* Initialize the module */
+ function init()
+ {
+ calibrationMessage = document.getElementById('popup-calibration-message');
+ calibrationBtn = document.getElementById('calibration-btn');
+ yesBtn = document.getElementById('popup-calibration-yes');
+ noBtn = document.getElementById('popup-calibration-no');
+ referenceValue = document.getElementById('reference-value');
+ pressureValue = document.getElementById('current-value');
+ altitudeValue = document.getElementById('altitude-value');
+ alertElement = document.getElementById('alert');
+ alertMessage = document.getElementById('alert-message');
+ alertOk = document.getElementById('alert-ok');
+ popupCalibration = document.getElementById('popup-calibration');
+ bindEvents();
+ }
+
+ e.listeners(
+ {
+ 'models.pressure.start': onSensorStart,
+ 'models.pressure.error': onSensorError,
+ 'models.pressure.change': onSensorChange,
+ 'views.init.device.ready': onDeviceReady
+ });
+
+ return
+ {
+ init: init
+ };
+ }
+});
+</pre>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">js/models/settings.js</span> module allows the application to store the reference pressure value. This value is remembered even after the application is restarted. This value is used to calculate the proper value of the current altitude.</p>
+
+<pre class="prettyprint">
+/* js/models/settings.js */
+define(
+{
+ name: 'models/settings',
+ requires: ['core/storage/idb', 'core/event'],
+ def: function modelsSettings(req)
+ {
+ 'use strict';
+
+ var e = req.core.event,
+ s = req.core.storage.idb,
+
+ STORAGE_KEY = 'settings',
+
+ DEFAULT = Object.freeze(
+ {
+ pressure: 1013.25
+ }),
+
+ settings = {};
+
+ /* Save the settings to storage */
+ function saveSettings()
+ {
+ s.add(STORAGE_KEY, settings);
+ }
+
+ /* Set the given settings property */
+ /* @param {string} property */
+ /* @param {number} value */
+ /* @return {boolean} */
+ function set(property, value)
+ {
+ if (property !== undefined && value !== undefined)
+ {
+ settings[property] = value;
+ saveSettings();
+ return true;
+ }
+ return false;
+ }
+
+ /* Return the given settings property */
+ /* @param {string} property */
+ /* @return {number} */
+ function get(property)
+ {
+ if (settings[property] === undefined)
+ {
+ console.error('Settings not initialized yet.');
+ return null;
+ }
+ return settings[property];
+ }
+
+ /* Initialize the module */
+ function init()
+ {
+ s.get(STORAGE_KEY);
+ }
+
+ /* Handle the core.storage.idb.read event */
+ /* @param {event} ev */
+ function onRead(ev)
+ {
+ if (ev.detail.key !== STORAGE_KEY)
+ {
+ return;
+ }
+ if (typeof ev.detail.value !== 'object')
+ {
+ settings =
+ {
+ pressure: DEFAULT.pressure
+ };
+ saveSettings();
+ }
+ else
+ {
+ settings = ev.detail.value;
+ }
+ e.fire('ready');
+ }
+
+ /* Make sure that init is run when the storage is ready */
+ function runInit()
+ {
+ if (s.isReady())
+ {
+ init();
+ }
+ else
+ {
+ e.listen('core.storage.idb.open', init);
+ }
+ }
+
+ e.listeners(
+ {
+ 'core.storage.idb.read': onRead
+ });
+
+ return
+ {
+ init: runInit,
+ get: get,
+ set: set
+ };
+ }
+});
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">js/models/pressure.js</span> module uses the Sensor API to obtain the pressure sensor data used by the application:</p>
+<ul><li>When the <span style="font-family: Courier New,Courier,monospace">initSensor()</span> method from the module is called, the application tries to obtain the pressure sensor object from the Sensor API.</li>
+<li>When the <span style="font-family: Courier New,Courier,monospace">start()</span> method is called, the application calls the <span style="font-family: Courier New,Courier,monospace">start()</span> method of the Sensor API object and, in case of success, notifies the <span style="font-family: Courier New,Courier,monospace">views/main</span> module about it.</li>
+<li>When the events related to the <span style="font-family: Courier New,Courier,monospace">setChangeListener()</span> method occur, the application uses the received sensor data, calculates its average value, and notifies the <span style="font-family: Courier New,Courier,monospace">views/main</span> module that the pressure value has changed.</li></ul>
+
+<pre class="prettyprint">
+/* js/models/pressure.js */
+define(
+{
+ name: 'models/pressure',
+ requires: ['core/event','core/window'],
+ def: function modelsPressure(e, window)
+ {
+ 'use strict';
+
+ var sensorService = null,
+ pressureSensor = null,
+ SENSOR_TYPE = 'PRESSURE',
+ ERROR_TYPE_NOT_SUPPORTED = 'NotSupportedError',
+
+ previousPressures = [],
+ MAX_LENGTH = 7,
+ averagePressure = 0,
+ currentPressure = 0;
+
+ /* Perform the action on start sensor success */
+ function onSensorStartSuccess()
+ {
+ e.fire('start');
+ }
+
+ /* Perform the action on start sensor error */
+ /* @param {Error} e */
+ function onSensorStartError(e)
+ {
+ console.error('Pressure sensor start error: ', e);
+ e.fire('error', e);
+ }
+
+ function updateAveragePressure(currentPressure)
+ {
+ previousPressures.push(currentPressure);
+
+ var len = previousPressures.length;
+
+ if (len <= MAX_LENGTH)
+ {
+ /* Nothing to shift yet, recalculate whole average */
+ averagePressure = previousPressures.reduce(function sum(a, b)
+ {
+ return a + b;
+ }) / len;
+ }
+ else
+ {
+ /* Add the new item and subtract the one shifted out */
+ averagePressure += (
+ currentPressure - previousPressures.shift()
+ ) / len;
+ }
+ return averagePressure;
+ }
+
+ /* Perform the action on sensor change */
+ /* @param {object} data */
+ function onSensorChange(data)
+ {
+ currentPressure = data.pressure;
+ updateAveragePressure(currentPressure);
+ e.fire('change',
+ {
+ current: data.pressure,
+ average: averagePressure
+ });
+ }
+
+ /* Start the sensor */
+ function start()
+ {
+ pressureSensor.start(onSensorStartSuccess, onSensorStartError);
+ }
+
+ /* Set the sensor change listener */
+ function setChangeListener()
+ {
+ pressureSensor.setChangeListener(onSensorChange);
+ }
+
+ /* Return the sensor value */
+ function getSensorValue()
+ {
+ return currentPressure;
+ }
+
+ /* Return the average of several past readings */
+ /* @return {number} */
+ function getAverageSensorValue()
+ {
+ return averagePressure;
+ }
+
+ /* Handle the sensor data */
+ /* @param {object} data */
+ function setCurrentPressureValue(data)
+ {
+ currentPressure = data.pressure;
+ }
+
+ /* Return true if the sensor is available, false otherwise */
+ /* @return {boolean} */
+ function isAvailable()
+ {
+ return !!pressureSensor;
+ }
+
+ /* Initializes the module */
+ function init()
+ {
+ sensorService = tizen.sensorservice ||
+ (window.webapis && window.webapis.sensorservice) ||
+ null;
+
+ if (!sensorService)
+ {
+ e.fire('error', {type: 'notavailable'});
+ }
+ else
+ {
+ try
+ {
+ pressureSensor = sensorService
+ .getDefaultSensor(SENSOR_TYPE);
+ pressureSensor
+ .getPressureSensorData(setCurrentPressureValue);
+ }
+ catch (error)
+ {
+ if (error.type === ERROR_TYPE_NOT_SUPPORTED)
+ {
+ e.fire('error', {type: 'notsupported'});
+ }
+ else
+ {
+ e.fire('error', {type: 'unknown'});
+ }
+ }
+ }
+ }
+
+ return
+ {
+ initSensor: init,
+ start: start,
+ isAvailable: isAvailable,
+ setChangeListener: setChangeListener,
+ getAverageSensorValue: getAverageSensorValue,
+ getSensorValue: getSensorValue
+ };
+ }
+});
+</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>AnalogWatch Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">HTML5 Canvas Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>AnalogWatch Sample Overview</h1>
+ <p>The AnalogWatch sample application demonstrates how you can create a simple application using the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the AnalogWatch.</p>
+ <p class="figure">Figure: AnalogWatch screen</p>
+ <p align="center"><img alt="AnalogWatch screen" src="../images/analogwatch_ww.png" /> </p>
+ <p>The application opens with the Analog watch screen that shows the current time in an analog watch.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/lowBatteryCheck.js</span></td>
+ <td>This file contains the code for the methods for checking the battery state in the device.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for the main application module used for initialization and application methods.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> contains a specific category (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/category/wearable_clock</span>) for the clock application:</p>
+
+<pre class="prettyprint">
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets"
+ <tizen:category name="http://tizen.org/category/wearable_clock" />
+</widget>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> method returns the current time and date object from the Time API:</p>
+<pre class="prettyprint">
+var datetime = tizen.time.getCurrentDateTime(),
+ hour = datetime.getHours(),
+ minute = datetime.getMinutes(),
+ second = datetime.getSeconds(),
+ date = datetime.getDate();
+</pre>
+
+<p>The following code presents how to get the canvas context and set the canvas size:</p>
+ <pre class="prettyprint">
+canvas = document.querySelector("#myCanvas");
+context = canvas.getContext("2d");
+
+/* Set a canvas square */
+canvas.width = document.width;
+canvas.height = canvas.width;
+</pre>
+
+<p>The application draws the watch layout on the canvas element by using the <span style="font-family: Courier New,Courier,monospace">drawWatchLayout()</span> method:</p>
+
+<ul><li>The first step of painting is to clear the entire canvas element using the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> method and to draw a background circle:
+<pre class="prettyprint">
+function drawWatchLayout()
+{
+ /* Clear canvas */
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+ /* Draw a background circle */
+ drawCircle(centerX, centerY, watchRadius, "#000000");
+}
+</pre></li>
+<li>The following code presents drawing the hour and minute needle on the canvas element:
+<pre class="prettyprint">
+function drawWatchContent(hour, minute, second, date)
+{
+ /* Draw an hour needle */
+ drawNeedle(Math.PI * (((hour + minute / 60) / 6) - 0.5), 0, 0.50, 3, "#454545");
+
+ /* Draw a minute needle */
+ drawNeedle(Math.PI * (((minute + second / 60) / 30) - 0.5), 0, 0.70, 3, "#454545");
+}
+</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>AppCaller and AppCallee Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/application/application_w.htm">Application Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>AppCaller and AppCallee Sample Overview</h1>
+ <p>The AppCaller and AppCallee sample applications demonstrate how you can use the application control to call other applications based on the operation type.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the AppCaller and AppCallee.</p>
+ <p class="figure">Figure: AppCaller and AppCallee screens</p>
+ <p align="center"><img alt="AppCaller and AppCallee screens" src="../images/appcalleecaller_ww.png" /> </p>
+
+
+ <p>The AppCaller application is used to call the AppCallee application, which returns an emoji to the AppCaller:</p>
+
+<ol><li>In the AppCaller, make the call by clicking <strong>Call App</strong>.
+<p>In the AppCallee, information about the call is displayed on the screen along with a list of emojis. </p></li>
+<li>In the AppCallee, click the emoji you want to return to the AppCaller.
+<p>The AppCaller displays the selected emoji.</p></li></ol>
+
+<h2>Prerequisites</h2>
+
+<ul><li><p>Since the AppCaller and AppCallee applications work best along with each other, both applications must be installed before you try to run either of them.</p></li></ul>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the operation type of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/image/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcallee/js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/image/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">appcaller/js/main.js</span></td>
+ <td>This file contains the code for handling the main application functionalities.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The Emoji set used in this application was designed and offered free by Emoji One. For more information on their license terms, see the <a href="http://emojione.com/" target="_blank">Emoji One</a> site.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>In the AppCallee application, the <span style="font-family: Courier New, Courier,monospace"><tizen:app-control/></span> element of the configuration file provides a service description for the application control. The operation name describes an action to be performed by the application.</p>
+ <pre class="prettyprint">
+<tizen:app-control>
+ <tizen:src name="index.html">
+ <tizen:operation name="http://tizen.org/appcontrol/operation/appcall"/>
+</tizen:app-control> </pre>
+
+<p>In the AppCaller application, the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#ApplicationControl">ApplicationControl</a> interface (consisting of an operation, URI, MIME type, and data) describes an action to be performed by the Callee application. When the system gets the application control request, it finds the corresponding application to perform the requested application control and launches the selected application.</p>
+<pre class="prettyprint">
+AppControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/appcall',
+ null, null, null);
+</pre>
+<p>In the AppCallee application, the <span style="font-family: Courier New,Courier,monospace">replyAppCaller()</span> function replies back to the AppCaller with the data on the selected emoji:</p>
+<ul><li>The application control request passed to the AppCallee can be accessed by the <span style="font-family: Courier New,Courier,monospace">getRequestedAppControl()</span> function. The passed application control contains the reason the application was launched and information about what the application is doing.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace">ApplicationControlData</span> interface defines the key-value pair used to pass data between applications, and it is sent to the AppCaller through the <span style="font-family: Courier New,Courier,monospace">replyResult()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html#RequestedApplicationControl">RequestedApplicationControl</a> interface.</li></ul>
+<pre class="prettyprint">
+function replyAppCaller(text)
+{
+ reqAppControl = tizen.application.getCurrentApplication().getRequestedAppControl();
+
+ /* Construct result data */
+ data = new tizen.ApplicationControlData("text", [text]);
+
+ /* Reply to caller */
+ reqAppControl.replyResult([data]);
+ tizen.application.getCurrentApplication().exit();
+}</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
--- /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>BasicWatch Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">HTML5 Canvas Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm#ambient">Ambient Events</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>BasicWatch Sample Overview</h1>
+
+ <p>The BasicWatch sample application demonstrates how you can create a simple application using the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm">Basic Watch task</a>.</p>
+
+ <p>The following figure illustrates the main screen of the BasicWatch.</p>
+
+ <p class="figure">Figure: BasicWatch screen</p>
+ <p align="center"><img alt="BasicWatch screen" src="../images/basicwatch_sd.png" /> </p>
+
+ <p>The application opens with the main screen that shows the current time.</p>
+ <p>When the ambient mode is enabled, the watch application with a limited UI can be displayed on the idle screen to reduce power consumption.</p>
+
+<h2>Source Files</h2>
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+<table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for the main application module used for initialization and application methods.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains the application information required to install and launch the application. The category name (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/category/wearable_clock</span>) defines the application to be installed as a wearable clock application.</p>
+<p>To enable a custom UI for the <a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm#ambient">ambient mode</a>, the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute must be set to <span style="font-family: Courier New,Courier,monospace">enable</span>. Additionally, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm</span> privilege must be set to get <span style="font-family: Courier New,Courier,monospace">timetick</span> events, which occur once a minute to enable the UI to be updated.</p>
+
+<pre class="prettyprint">
+<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/BasicWatch" version="1.0.0" viewmodes="maximized">
+ <tizen:category name="http://tizen.org/category/wearable_clock"/>
+ <tizen:application id="OEYCjlM8hl.BasicWatch" package="OEYCjlM8hl" required_version="2.3" ambient_support="enable"/>
+
+ <tizen:privilege name="http://tizen.org/privilege/alarm"/>
+ <tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
+</widget>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">GetDate</span> function returns the current time object from the Time API. If an exception is thrown, the function returns a new <span style="font-family: Courier New,Courier,monospace">Date</span> object.</p>
+<pre class="prettyprint">
+/* js/main.js */
+function getDate()
+{
+ 'use strict';
+
+ var date;
+ try
+ {
+ date = tizen.time.getCurrentDateTime();
+ }
+ catch (err)
+ {
+ console.error('Error: ', err.message);
+ date = new Date();
+ }
+
+ return date;
+}
+</pre>
+
+
+<p>The following code presents how to get the canvas context and how to set the canvas size.</p>
+<pre class="prettyprint">
+/* js/main.js */
+canvas = document.querySelector('canvas');
+context = canvas.getContext('2d');
+clockRadius = document.body.clientWidth / 2;
+
+/* Assigns the area that uses the canvas */
+canvas.width = document.body.clientWidth;
+canvas.height = canvas.width;
+</pre>
+
+<p>The application draws the clock the on the canvas element by using the <span style="font-family: Courier New,Courier,monospace">watch()</span> method. The first step is clearing the whole canvas element using the <span style="font-family: Courier New,Courier,monospace">clearRect()</span> method and repainting the canvas object using the <span style="font-family: Courier New,Courier,monospace">requestAnimationFrame()</span> method.</p>
+<pre class="prettyprint">
+/* js/main.js */
+function watch()
+{
+ 'use strict';
+
+ context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+
+ window.requestAnimationFrame(watch);
+}
+</pre>
+
+<p>The following code presents drawing on the canvas element.</p>
+<pre class="prettyprint">
+/* js/main.js */
+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>
+
+<p>To bind an event callback to ambient events, use the following event listeners:</p>
+<pre class="prettyprint">
+/* Add eventListener for ambientmodechanged */
+window.addEventListener('ambientmodechanged', function(e)
+{
+ if (e.detail.ambientMode === true)
+ {
+ /* Rendering ambient mode case */
+ isAmbientMode = true;
+ ambientWatch();
+ }
+ else
+ {
+ /* Rendering normal case */
+ isAmbientMode = false;
+ window.requestAnimationFrame(watch);
+ }
+});
+
+/* Add eventListener for timetick */
+window.addEventListener('timetick', function()
+{
+ ambientWatch();
+});
+</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>Calculator Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/system_info_w.htm">System Information Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Calculator Sample Overview</h1>
+ <p>The Calculator sample application demonstrates how you can create a calculator with basic mathematical operations.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Calculator.</p>
+ <p class="figure">Figure: Calculator screen</p>
+ <p align="center"><img alt="Calculator screen" src="../images/calculator_ww.png" /> </p>
+ <p>The application opens with the Calculator screen, where you can perform mathematical operations by clicking the applicable buttons.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the code for the main application module used for initialization.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/model.js</span></td>
+ <td>This file contains the application model (handles mathematical operations).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/systeminfo.js</span></td>
+ <td>This file contains the battery state handling code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/ui.js</span></td>
+ <td>This file contains the implementation code for the user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>All JavaScript files are loaded directly from the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. There is also initialization started by calling the <span style="font-family: Courier New,Courier,monospace">init()</span> method of the <span style="font-family: Courier New,Courier,monospace">app</span> module, which acts as an application controller.</p>
+
+<pre class="prettyprint">
+<!--index.html-->
+<script src="js/systeminfo.js"></script>
+<script src="js/app.js"></script>
+<script src="js/ui.js"></script>
+<script src="js/model.js"></script>
+<script>
+ app.init();
+</script>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">app</span> module initializes all other modules:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">systeminfo</span> is responsible for checking the battery level</li>
+<li><span style="font-family: Courier New,Courier,monospace">model</span> encapsulates the calculator logic (equation state and mathematical operations)</li>
+<li><span style="font-family: Courier New,Courier,monospace">ui</span> is responsible for managing the UI (updating and listening to events)</li></ul>
+<p>Finally, the <span style="font-family: Courier New,Courier,monospace">app</span> module requests the <span style="font-family: Courier New,Courier,monospace">ui</span> module to update the equation field with a value obtained from the <span style="font-family: Courier New,Courier,monospace">model</span> module. Now, the application is ready for use.</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+init: function init()
+{
+ 'use strict';
+ systeminfo.init();
+ model.init();
+ ui.init();
+ this.refreshEquation();
+},
+
+refreshEquation: function refreshEquation()
+{
+ 'use strict';
+ ui.showEquation(model.equation);
+}
+</pre>
+<p>The application layout is defined directly in the <span style="font-family: Courier New,Courier,monospace">index.html</span> file. It is styled by the CSS file and managed by the <span style="font-family: Courier New,Courier,monospace">ui</span> module. The <span style="font-family: Courier New,Courier,monospace">ui</span> module listens to the touch events on the calculator buttons, updates their press state, and passes the control to the <span style="font-family: Courier New,Courier,monospace">app</span> module to run the proper action. It also exposes some methods which allow the controller module (<span style="font-family: Courier New,Courier,monospace">app</span>) to update the equation and its result. Formatting the fields is also its responsibility.</p>
+<pre class="prettyprint">
+<!--index.html-->
+<table id="screen"><tr>
+ <td id="display" valign="middle">
+ <div id="overflow_top"></div>
+ <div id="overflow_bottom"></div>
+ <div id="equation"></div>
+ <div id="result" class="empty"><span id="resultvalue"></span></div>
+ </td>
+</tr></table>
+
+<div id="numpad">
+ <div id="key_7" class="key" style="clear: both;"></div>
+ <div id="key_8" class="key"></div>
+ <div id="key_9" class="key"></div>
+ <div id="key_c" class="key"></div>
+ <div id="key_del" class="key long-tap-repeat"></div>
+
+ <div id="key_4" class="key" style="clear: both;"></div>
+ <div id="key_5" class="key"></div>
+ <div id="key_6" class="key"></div>
+ <div id="key_div" class="key"></div>
+ <div id="key_mul" class="key"></div>
+
+ <div id="key_1" class="key" style="clear: both;"></div>
+ <div id="key_2" class="key"></div>
+ <div id="key_3" class="key"></div>
+ <div id="key_sub" class="key"></div>
+ <div id="key_add" class="key"></div>
+
+ <div id="key_0" class="key" style="clear: both;"></div>
+ <div id="key_dec" class="key"></div>
+ <div id="key_sign" class="key"></div>
+ <div id="key_eql" class="longkey"></div>
+</div>
+</pre>
+<pre class="prettyprint">
+/* js/ui.js */
+showEquation: function showEquation(equation)
+{
+ 'use strict';
+ var e, element, elementText, span, equationElement, length;
+
+ equationElement = document.getElementById('equation');
+
+ equationElement.innerHTML = '';
+
+ length = equation.length;
+ for (e = 0; e < length; e += 1)
+ {
+ element = equation[e];
+ span = document.createElement('span');
+ elementText = element;
+ if (Object.keys(this.operatorDisplays).indexOf(element) !== -1)
+ {
+ span.className = 'operator';
+ elementText = this.operatorDisplays[element];
+ }
+ else
+ {
+ elementText = app.addSeparators(elementText);
+ }
+ elementText = elementText.replace(/-/g, '−');
+ span.innerHTML = elementText;
+ equationElement.appendChild(span);
+ }
+},
+
+/* Shows string in result element */
+/* @param {string} result */
+/* @private */
+show: function show(result)
+{
+ 'use strict';
+
+ if (result === '')
+ {
+ return this.clear();
+ }
+ this.equationElement.classList.add('top');
+ this.resultValueElement.innerHTML = result.replace(/-/g, '−');
+}
+
+/* Shows result in result element */
+/* @param {string} result */
+showResult: function showResult(result)
+{
+ 'use strict';
+ this.show(result);
+ this.result = true;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model</span> module is responsible for the calculator logic. Its internal implementation of the equation is based on an array which stores each component (number, operator) as a separate string. The module exposes a set of functions to modify the equation and finally to compute its value. It also keeps the equation state valid by refusing to add the wrong component.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">model</span> module's public interface consists of following functions:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">addDigit()</span> adds a single digit to the equation</li>
+<li><span style="font-family: Courier New,Courier,monospace">addOperator()</span> adds an operator (+, -, *, /) to the equation</li>
+<li><span style="font-family: Courier New,Courier,monospace">addDecimal()</span> adds a decimal point to the equation</li>
+<li><span style="font-family: Courier New,Courier,monospace">deleteLast()</span> deletes the last digit or operator</li>
+<li><span style="font-family: Courier New,Courier,monospace">resetEquation()</span> clears the whole equation</li>
+<li><span style="font-family: Courier New,Courier,monospace">changeSign()</span> changes the sign of the last equation component</li>
+<li><span style="font-family: Courier New,Courier,monospace">isEmpty()</span> returns true if the equation is empty (does not contain any component)</li>
+<li><span style="font-family: Courier New,Courier,monospace">calculate()</span> calculates the equation value</li></ul>
+
+<p>When the user touches any button (in this case, the "equal" button flow is presented), the <span style="font-family: Courier New,Courier,monospace">ui</span> module notifies the controller module (<span style="font-family: Courier New,Courier,monospace">app</span>) by calling its <span style="font-family: Courier New,Courier,monospace">processKey()</span> method. The request is dispatched and finally the <span style="font-family: Courier New,Courier,monospace">calculate()</span> method of the <span style="font-family: Courier New,Courier,monospace">model</span> module is called. When the result is obtained, the controller module (<span style="font-family: Courier New,Courier,monospace">app</span>) requests the <span style="font-family: Courier New,Courier,monospace">ui</span> module to update the adequate field in the UI by calling the <span style="font-family: Courier New,Courier,monospace">showResult()</span> method.</p>
+
+<pre class="prettyprint">
+/* js/app.js */
+processKey: function processKey(key)
+{
+ 'use strict';
+ var keys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+ if (ui.isResultVisible())
+ {
+ if (Object.keys(this.operatorKeys).indexOf(key) === -1 &&
+ key !== 'del' &&
+ key !== 'eql' &&
+ key !== 'sign')
+ {
+ model.resetEquation();
+ }
+ }
+ ui.clearResult();
+ if (keys.indexOf(key) !== -1)
+ {
+ this.pushDigits(key);
+ }
+ else if (Object.keys(this.operatorKeys).indexOf(key) !== -1)
+ {
+ model.addOperator(this.operatorKeys[key]);
+ }
+ else if (key === 'dec')
+ {
+ model.addDecimal();
+ }
+ else if (key === 'del')
+ {
+ model.deleteLast();
+ }
+ else if (key === 'c')
+ {
+ model.resetEquation();
+ }
+ else if (key === 'sign')
+ {
+ model.changeSign();
+ }
+ if (key === 'eql' && !model.isEmpty())
+ {
+ this.calculate();
+ }
+ this.refreshEquation();
+},
+
+calculate: function calculate()
+{
+ 'use strict';
+ var result = '';
+ try
+ {
+ result = model.calculate();
+ result = this.addSeparators(result);
+ ui.showResult('= ' + result);
+ }
+ catch (e)
+ {
+ if (e instanceof EquationInvalidFormatError)
+ {
+ ui.showResult('Wrong format');
+ }
+ else if (e instanceof CalculationError)
+ {
+ ui.showResult('Invalid operation');
+ }
+ else if (e instanceof InfinityError)
+ {
+ ui.showResult((e.positive ? '' : '−') + '∞');
+ }
+ else
+ {
+ ui.showError('Unknown error.');
+ console.warn(e);
+ }
+ }
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">calculate()</span> method of the <span style="font-family: Courier New,Courier,monospace">model</span> module does some checks to ensure the equation correctness and finally mergers all its components into one string and runs it as a JavaScript expression through the <span style="font-family: Courier New,Courier,monospace">eval()</span> method to obtain its value. If no error occurs, the equation result is returned. </p>
+
+<pre class="prettyprint">
+/* js/model.js */
+
+/* Calculates equation value */
+/* @return {string} */
+calculate: function calculate()
+{
+ 'use strict';
+ var evaluation = '',
+ result,
+ /* Checks whether the matched number is zero */
+ /* @param {string} m Whole match including the division operator */
+ /* @param {string} p1 Whole number, including sign and parenthesis */
+ /* @param {string} number The matched number */
+ /* @return {string} */
+ checkDivisionByZero = function checkDivisionByZero(m, p1, number)
+ {
+ if (parseFloat(number) === 0)
+ {
+ throw new DivisionByZeroError();
+ }
+ return '/ ' + number;
+ };
+
+ if (this.calculated)
+ {
+ this.replaceLeftOperand(this.lastCalculationResult);
+ }
+
+ if (!this.isValidEquation())
+ {
+ throw new EquationInvalidFormatError();
+ }
+
+ this.calculated = false;
+
+ /* Evaluate the equation */
+ try
+ {
+ evaluation = this.equation.join(' ');
+ evaluation = evaluation.replace(/\/ *(\(?\-?([0-9\.]+)\)?)/g, checkDivisionByZero);
+
+ result = eval('(' + evaluation + ')');
+ if (Math.abs(result) < 1.0E-300)
+ {
+ result = 0;
+ }
+ }
+ catch (e)
+ {
+ console.error(e);
+ throw new CalculationError();
+ }
+
+ if (isNaN(result))
+ {
+ throw new CalculationError();
+ }
+ if (result === Infinity || result === -Infinity)
+ {
+ throw new InfinityError(result === Infinity);
+ }
+
+ this.calculated = true;
+ /* Format the result value */
+ result = this.formatValue(result);
+ /* Save the calculated result */
+ this.lastCalculationResult = result;
+
+ return result;
+}
+</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>Calendar Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/time_w.htm">Time Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Calendar Sample Overview</h1>
+ <p>The Calendar sample application demonstrates how you can display the calendar month by month in your application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Calendar. </p>
+ <p class="figure">Figure: Calendar screen</p>
+ <p align="center"><img alt="Calendar screen" src="../images/calendar_sd.png" /> </p>
+ <p>The application contains one screen that displays the selected month. After the application starts, the current month is displayed. Click the <strong>Prev</strong> and <strong>Next</strong> buttons to view the previous and next month respectively. The <strong>Today</strong> button shows the current month.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/date.js</span></td>
+ <td>This file contains functions related to the date operations.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/date.js</span></td>
+ <td>This file contains functions related to the current date.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/month.js</span></td>
+ <td>This file contains the function that returns the month matrix.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/init.js</span></td>
+ <td>This file contains code that initializes the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/monthPage.js</span></td>
+ <td>This file contains code that handles interaction with the month page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/</span></td>
+ <td>This directory contains external libraries (TAU library).</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">templates/</span></td>
+ <td>This directory contains layouts of the application screens and templates for smaller elements of user interface.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>After application start and after every button click, the <span style="font-family: Courier New,Courier,monospace">getDaysMatrix</span> function is called. It fills the data matrix with the day numbers. The length of the matrix is constant and equals the week length.</p>
+
+<pre class="prettyprint">
+/* js/models/month.js */
+
+var DAYS_IN_WEEK = 7;
+
+/**
+* Creates a matrix of days in months
+* Example: [ [29,30,1,2,3,4,5], [6,7,8,9,10,11,12], ...]
+* @param {Date} date Date object.
+* @return {array} daysMatrix Days matrix.
+*/
+function getDaysMatrix(date)
+{
+ var daysNumber = d.daysInMonth(date),
+ daysPad = d.getFirstDay(date),
+ previous = d.getPreviousMonth(date),
+ previousDaysNumber = d.daysInMonth(previous),
+ rowsLength = Math.ceil((daysNumber + daysPad) / DAYS_IN_WEEK),
+ data = [],
+ daysMatrix = [],
+ start = 0,
+ next = 1,
+ i = 1,
+ j = 0;
+
+ /* Previous month days fill */
+ while (daysPad--)
+ {
+ data.push(getDayData(date, previousDaysNumber - daysPad, -1));
+ }
+
+ /* Current month's days */
+ for (i; i <= daysNumber; i = i + 1)
+ {
+ data.push(getDayData(date, i, 0));
+ }
+
+ /* Next month days fill */
+ while (data.length % DAYS_IN_WEEK)
+ {
+ data.push(getDayData(date, next++, 1));
+ }
+
+ for (j = 0; j < rowsLength; j = j + 1)
+ {
+ start = j * DAYS_IN_WEEK;
+ daysMatrix.push(data.slice(start, start + DAYS_IN_WEEK));
+ }
+
+ return daysMatrix;
+}</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
--- /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>Camera Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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.tutorials/html/web/w3c/supplement/task_camera_w.htm">Camera API (Tizen Extension) Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension) API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Camera Sample Overview</h1>
+
+ <p>The Camera sample application demonstrates how you can handle the camera in the Tizen wearable device. You can take pictures, record videos, and preview photos and videos.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm">Camera task</a>.</p>
+
+ <p>The following figure illustrates the main screens of the Camera.</p>
+ <p class="figure">Figure: Camera screens</p>
+ <p align="center"><img alt="Camera screens" src="../images/camera_ww.png" /> </p>
+
+ <p>The application opens with the main screen, where it displays a preview from the Tizen wearable camera with 2 icons at the top of the screen.</p>
+
+<p>You can:</p>
+<ul><li>Switch between photo and video modes</li>
+<li>Take pictures with a preview</li>
+<li>Record videos (limited to 10 seconds) with a preview</li>
+<li>Define custom settings for pictures (size and format) and recordings (format)</li></ul>
+
+
+<p>To handle the camera:</p>
+<ul>
+<li><p>To set the mode, click the left icon.</p>
+<p>Based on the mode you select, the icon shows a photo camera for taking pictures or a video camera for recording videos.</p> </li>
+<li><p>To take a picture, set the photo mode and tap the free space on the screen.</p>
+<p>The application auto-focuses the image, takes the photo, and displays a preview of the picture.</p></li>
+<li><p>To record a video, set the camera mode and tap the free space on the screen.</p>
+<p>The application starts recording. To stop recording, tap the screen. The maximum recording time is 10 seconds.</p>
+<p>The application saves the video and displays a preview image of the recorded video. To watch the video, click the preview image.</p> </li>
+<li><p>To specify additional settings, click the right icon.</p>
+<p>The application shows a list of settings specific to the selected mode.</p></li></ul>
+
+<h2>Source Files</h2>
+<p>You can create and view the sample application project including the source files in the IDE.</p>
+<table>
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains code for the main application module used for initialization.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the core modules. They are used in other parts of the application code. <span style="font-family: Courier New,Courier,monospace">core.js</span> implements simple AMD (Asynchronous Module Definition) and specifies module defining. The application uses a simple MV (Model View) architecture.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/</span></td>
+ <td>This directory contains helper functions for playing audio files and formatting date and strings.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/camera.js</span></td>
+ <td>This file defines an abstract layer over the Camera API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the code for handling the UI events for all pages.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2>Implementation</h2>
+
+<p>The application code is separated into modules. Each module specifies its dependent modules.</p>
+<p>The entry point for the application is the <span style="font-family: Courier New,Courier,monospace">app</span> module. It is loaded first by the <span style="font-family: Courier New,Courier,monospace">Core</span> library with the <span style="font-family: Courier New,Courier,monospace">data-main</span> attribute help.</p>
+<pre class="prettyprint">
+<!--index.html-->
+
+<script src="./js/core/core.js" data-main="./js/app.js"></script>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">app</span> module's responsibility is to load view initialization module – <span style="font-family: Courier New,Courier,monospace">views/initPage</span> (by adding it as dependant module in <span style="font-family: Courier New,Courier,monospace">requires</span> array).</p>
+<pre class="prettyprint">
+/* App module */
+
+define(
+{
+ name: 'app',
+ requires: ['views/initPage'],
+ def: function appInit()
+ {
+ 'use strict';
+
+ /* Initiates the module */
+ function init()
+ {
+ console.log('app::init');
+ }
+
+ return
+ {
+ init: init
+ };
+ }
+});</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">views/initPage</span> module loads the other view modules as dependencies to let them initialize. It also manages view navigation, handles Tizen hardware keys, checks the battery state, and notifies other modules about application state changes, such as background, foreground and exit.</p>
+<pre class="prettyprint">
+/* js/views/initPage.js */
+/*Initializes the page module */
+
+define({
+ name: 'views/initPage',
+ requires: ['core/event', 'core/systeminfo', 'core/application', 'views/main', 'views/settings',
+ 'views/preview', 'views/pictureSize', 'views/pictureFormat', 'views/recordingFormat'],
+ def: function viewsInitPage(req)
+ {
+ 'use strict';
+
+ var app = req.core.application,
+ e = req.core.event,
+ sysInfo = req.core.systeminfo;
+
+ /**
+ * Handles the hardware keys tap event
+ * @param {event} ev
+ */
+ function onHardwareKeysTap(ev)
+ {
+ var keyName = ev.keyName,
+ page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = (page && page.id) || '';
+
+ if (keyName === 'back')
+ {
+ if (pageid === 'main')
+ {
+ e.fire('application.exit');
+ window.setTimeout(function appCloseTimeout()
+ {
+ app.exit();
+ }, 100);
+ }
+ else if (pageid === 'preview' || pageid === 'settings')
+ {
+ e.fire('main.open');
+ }
+ else if (pageid === 'picture-size' ||
+ pageid === 'picture-format' ||
+ pageid === 'recording-format')
+ {
+ e.fire('settings.open');
+ }
+ else
+ {
+ history.back();
+ }
+ }
+ }
+
+ /**
+ * Handles visibilitychange event
+ * @param {event} ev
+ */
+ function onVisibilityChange(ev)
+ {
+ e.fire('visibility.change', ev);
+ }
+
+ /* Handles the window unload event */
+ function onUnload()
+ {
+ e.fire('application.exit');
+ }
+
+ /* Handles the onLowBattery state */
+ function onLowBattery()
+ {
+ app.exit();
+ }
+
+ /* Handles the window blur event */
+ function onBlur()
+ {
+ e.fire('application.state.background');
+ }
+
+ /* Handles window focus event */
+ function onFocus()
+ {
+ e.fire('application.state.foreground');
+ }
+
+ /* Registers the module event listeners */
+ function bindEvents()
+ {
+ document.addEventListener('tizenhwkey', onHardwareKeysTap);
+ document.addEventListener('visibilitychange', onVisibilityChange);
+ window.addEventListener('unload', onUnload);
+ window.addEventListener('blur', onBlur);
+ window.addEventListener('focus', onFocus);
+ sysInfo.listenBatteryLowState();
+ }
+
+ /* Initiates the module */
+ function init()
+ {
+ /* Bind the events to page elements */
+ bindEvents();
+ sysInfo.checkBatteryLowState();
+ }
+
+ e.listeners(
+ {
+ 'core.systeminfo.battery.low': onLowBattery
+ });
+
+ return
+ {
+ init: init
+ };
+ }
+});</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">views/main</span> module handles most of the application UI interaction. It shows the camera preview and allows the user to take a picture and record a video. To handle this task, it processes the user actions and uses the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module to handle them.</p>
+<p>When the application starts or goes foreground, it creates the camera preview and initializes the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module which uses the Camera API to create the <span style="font-family: Courier New,Courier,monospace">CameraControl</span> object.</p>
+<pre class="prettyprint">
+/* js/views/main.js */
+
+/**
+* Executes when preview stream is obtained
+* @param {LocalMediaStream} stream
+*/
+function onPreviewStream(stream)
+{
+ var streamUrl = window.webkitURL.createObjectURL(stream);
+
+ previewInitAttemtps = 0;
+ cameraStream = stream;
+ cameraPreview.src = streamUrl;
+ camera.registerStream(cameraStream);
+ if (pageHelper.isPageActive(page))
+ {
+ cameraPreview.play();
+ }
+}
+
+/* Gets the media stream */
+function getUserMedia(onUserMediaSuccess, onUserMediaError)
+{
+ navigator.webkitGetUserMedia(
+ {
+ video: true,
+ audio: true
+ },
+ onUserMediaSuccess,
+ onUserMediaError
+ );
+}
+
+/* Requests for the camera stream */
+function requestForCameraStream()
+{
+ return getUserMedia(onPreviewStream, onPreviewStreamError);
+}
+
+/* Initializes the camera preview */
+function initCameraPreview()
+{
+ if (previewInitInProgress)
+ {
+ return;
+ }
+
+ previewInitInProgress = true;
+ requestForCameraStream();
+}
+
+/* Initiates the module */
+function init()
+{
+ initCameraPreview();
+}
+
+/* js/models/camera.js */
+
+/* Initiates the camera settings */
+function initCameraSettings()
+{
+ var pictureFormats = null,
+ pictureSizes = null,
+ recordingFormats = null;
+
+ cameraSettings = storage.get(STORAGE_SETTINGS_KEY);
+
+ if (!cameraSettings)
+ {
+ cameraSettings = {};
+
+ pictureFormats = getAvailablePictureFormats();
+ cameraSettings.pictureFormat = pictureFormats[0];
+
+ pictureSizes = getAvailablePictureSizes();
+ cameraSettings.pictureSize = pictureSizes[0];
+
+ recordingFormats = getAvailableRecordingFormats();
+ cameraSettings.recordingFormat = recordingFormats[0];
+
+ saveCameraSettings();
+ }
+}
+
+/**
+* Executes when the camera control is created from the stream
+* @param {CameraControl} control
+*/
+function onCameraControlCreated(control)
+{
+ cameraControl = control;
+ initCameraSettings();
+ e.fire('ready');
+}
+
+/**
+* Executes on camera control creation error.
+* @param {object} error
+*/
+function onCameraControlError(error)
+{
+ console.error(error);
+ e.fire('error', {error: error});
+}
+
+/**
+* Registers stream that camera controls.
+* @param {LocalMediaStream} mediaStream
+*/
+function registerStream(mediaStream)
+{
+ navigator.tizCamera.createCameraControl(mediaStream, onCameraControlCreated, onCameraControlError);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">models/camera</span> module encapsulates the Camera API and creates an event-driven interface for the view modules. </p>
+<p>The main functions exposed by this module are:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">registerStream</span> – initializes the module and creates the <span style="font-family: Courier New,Courier,monospace">CameraControl</span> object. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.camera.ready</span> – the module is ready to use.</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.error</span> – an error occurred during the initialization.</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">release</span> – releases the camera (<span style="font-family: Courier New,Courier,monospace">CameraControl</span>). Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.camera.release</span> – the camera was released</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">takePicture</span> – takes a picture using the current settings. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.camera.autofocus.start</span> – the request is accepted, the autofocus process starts</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.autofocus.success</span> – the autofocus is done</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.autofocus.failure</span> – an error occurred during the autofocus process, it does not stop taking the picture</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.shutter</span> – the camera shutter event</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.picture.done</span> – a picture is successfully created (filename in the event details)</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.picture.error</span> – an error occurred during taking the picture</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.picture.canceled</span> – the picture taking was canceled (for example if the application goes background)</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">startRecording</span> – starts recording. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.camera.recording.start</span> – the request is accepted and the recording starts</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.recording.error</span> – an error occurred during the initialization of the recording</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">stopRecording</span> – stops the recording. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.camera.recording.done</span> – a video file is successfully created (filename in the events details). This event is fired also when the time limit for the video recording is exceeded</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.camera.recording.error</span> – an error occurred during the ending of the recording</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">getRecordingTime</span> – returns the current recording time</li></ul>
+
+<p>Other module's functions (not listed above) are used to manage the camera settings.</p>
+<p>The view modules call the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module functions and listen to its events to update the UI.</p>
+
+<p>The taking picture process starts when the user touches the device screen in the photo mode. The <span style="font-family: Courier New,Courier,monospace">views/main</span> module calls the <span style="font-family: Courier New,Courier,monospace">takePicture</span> function of the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module when a click event is detected.</p>
+<pre class="prettyprint">
+/* js/views/main.js */
+
+/* Takes a photo */
+function takePhoto()
+{
+ previewTapAllowed = false;
+ hideNavigationBtns();
+
+ /* Ensure the preview is visible to prevent webkit freeze */
+ cameraPreview.classList.remove('hidden');
+ camera.takePicture();
+}
+
+/**
+* Handles the camera preview click event
+* @param {event} ev
+*/
+function onCameraPreviewClick(ev)
+{
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ if (!previewTapAllowed)
+ {
+ return;
+ }
+
+ if (photoMode)
+ {
+ takePhoto();
+ }
+ else
+ {
+ (...)
+ }
+}
+
+/* Registers the listeners for click events */
+function bindCameraReadyEvents()
+{
+ cameraPreview.addEventListener('click', onCameraPreviewClick);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">models/camera</span> module starts processing the request. It triggers the autofocus (<span style="font-family: Courier New,Courier,monospace">CameraControl.autoFocus</span>) and notifies the other modules about the results. The <span style="font-family: Courier New,Courier,monospace">views/main</span> module listens to the autofocus events and updates the UI by creating proper animation and pausing the camera preview (freeze effect).</p>
+<pre class="prettyprint">
+/* js/models/camera.js */
+
+/* Handles the autofocus success */
+function onAutoFocusSuccess()
+{
+ e.fire('autofocus.success');
+ if (!takingPictureCancelRequested)
+ {
+ setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
+ }
+}
+
+/* Handles the autofocus error */
+function onAutoFocusFailure()
+{
+ e.fire('autofocus.failure');
+ if (!takingPictureCancelRequested)
+ {
+ setTimeout(startTakingPicture, TAKE_PICTURE_DELAY);
+ }
+}
+
+/**
+* Takes a picture.
+* When autofocus starts, camera.autofocus event is fired.
+* When autofocus succeeds, camera.autofocus.success event is fired.
+* When autofocus fails, camera.autofocus.failure event is fired.
+* When picture is ready camera.picture.done event is fired with picture
+* path as a data. If error occurs, camera.picture.error event is fired.
+* @return {boolean} If process starts true is returned,
+* false otherwise (camera other operation is in progress).
+*/
+function takePicture()
+{
+ if (busy)
+ {
+ return false;
+ }
+
+ busy = true;
+ takingPictureInProgress = true;
+ takingPictureCancelRequested = false;
+ e.fire('autofocus.start');
+ if (cameraControl.autoFocus())
+ {
+ setTimeout(onAutoFocusSuccess, AUTOFOCUS_DELAY);
+ }
+ else
+ {
+ setTimeout(onAutoFocusFailure, AUTOFOCUS_DELAY);
+ }
+
+ return true;
+}
+/* js/views/main.js */
+
+/* Shows the autofocus frame */
+function showAutoFocus()
+{
+ focusContainer.classList.remove('hidden');
+ focusFrame.classList.add('autofocus-animation');
+}
+
+/* Handles the camera.autofocus.start event */
+function onAutoFocusStart()
+{
+ showAutoFocus();
+}
+
+/* Handles the camera.autofocus.success event */
+function onAutoFocusSuccess()
+{
+ pausePreview();
+ focusFrame.classList.add('autofocus-success');
+}
+
+/* Handles camera.autofocus.failure event */
+function onAutoFocusFailure()
+{
+ pausePreview();
+ focusFrame.classList.add('autofocus-failure');
+}
+
+e.listeners(
+{
+ 'models.camera.autofocus.start': onAutoFocusStart,
+ 'models.camera.autofocus.success': onAutoFocusSuccess,
+ 'models.camera.autofocus.failure': onAutoFocusFailure,
+});
+</pre>
+
+<p>When the autofocusing is done, the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module can go a step forward towards taking the actual picture using <span style="font-family: Courier New,Courier,monospace">CameraControl.image.takePicture</span>. Before that, the picture settings must be applied using <span style="font-family: Courier New,Courier,monospace">CameraControl.image.applySettings</span>. There is also a shutter callback registered (<span style="font-family: Courier New,Courier,monospace">CameraControl.image.onshutter</span>) and the proper event fired the view module can update the UI ("Processing" toast).</p>
+<pre class="prettyprint">
+/* js/models/camera.js */
+
+/* Handles the camera onshutter event */
+function onShutter()
+{
+ e.fire('shutter');
+}
+
+/* Executes when the image settings are applied */
+function onImageSettingsApplied()
+{
+ if (!takingPictureCancelRequested)
+ {
+ cameraControl.image.takePicture(onPictureDone, onPictureError);
+ }
+}
+
+/**
+* Executes when an error occurs during applying the image settings
+* @param {object} error
+*/
+function onImageSettingsError(error)
+{
+ busy = false;
+ takingPictureInProgress = false;
+ e.fire('picture.error', {error: error});
+}
+
+/* Starts taking the photo */
+function startTakingPicture()
+{
+ var settings = {},
+ fileName = '';
+
+ fileName = createPictureFileName();
+ picturePath = PICTURE_DESTINATION_DIRECTORY + '/' + fileName;
+
+ settings.fileName = fileName;
+ settings.pictureFormat = getPictureFormat();
+ settings.pictureSize = getPictureSize();
+
+ if (!cameraControl)
+ {
+ cancelTakingPicture();
+ return;
+ }
+ cameraControl.image.onshutter = onShutter;
+ cameraControl.image.applySettings(settings, onImageSettingsApplied, onImageSettingsError);
+}
+
+/* js/views/main.js */
+
+/* Handles the camera.shutter event */
+function onCameraShutter()
+{
+ hideAutoFocus();
+ showStatusMessage('Processing...');
+}
+
+e.listeners(
+{
+ 'models.camera.shutter': onCameraShutter
+});
+</pre>
+
+<p>Now, the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module waits for the <span style="font-family: Courier New,Courier,monospace">onPictureDone()</span> or <span style="font-family: Courier New,Courier,monospace">onPictureError()</span> function to get executed. When they do, it notifies the other modules about this fact with image file details and does some cleaning. The <span style="font-family: Courier New,Courier,monospace">view/main</span> module passes control to <span style="font-family: Courier New,Courier,monospace">views/preview</span> module, which loads the taken picture and shows it to the user.</p>
+<pre class="prettyprint">
+/* js/models/camera.js */
+
+
+/* Executes when the picture is ready */
+function onPictureDone()
+{
+ busy = false;
+ takingPictureInProgress = false;
+ e.fire('picture.done', {path: picturePath});
+}
+
+/**
+* Executes when an error occurs during taking picture
+* @param {object} error
+*/
+function onPictureError(error)
+{
+ busy = false;
+ takingPictureInProgress = false;
+ e.fire('picture.error', {error: error});
+}
+
+/* js/views/main.js */
+
+
+/**
+* Handles the camera.picture.done event
+* @param {event} ev
+*/
+function onPictureDone(ev)
+{
+ var path = ev.detail.path;
+ hideAutoFocus();
+ e.fire('show.preview', {picture: path});
+}
+
+/**
+* Handles the camera.picture.error event
+* @param {object} error
+*/
+function onPictureError(error)
+{
+ console.error('picture error', error);
+ hideAutoFocus();
+ hideStatusMessage();
+}
+
+e.listeners(
+{
+ 'models.camera.picture.done': onPictureDone,
+ 'models.camera.picture.error': onPictureError,
+});
+
+/* js/views/preview.js */
+
+/**
+* Handles views.settings.show event
+* @param {event} ev
+*/
+function show(ev)
+{
+ var detail = ev.detail;
+
+ if (detail.picture)
+ {
+ previewPictureMode = true;
+ picture.src = detail.picture;
+
+ }
+ else if (detail.video)
+ {
+ (...)
+ }
+ tau.changePage('#preview');
+}
+
+e.listeners(
+{
+ 'views.main.show.preview': show
+});
+</pre>
+
+<p>Recording videos is implemented in a similar way. The <span style="font-family: Courier New,Courier,monospace">views/main</span> module calls the <span style="font-family: Courier New,Courier,monospace">startRecording</span> function of the <span style="font-family: Courier New,Courier,monospace">models/camera</span> module and listens to its events in order to update the UI.</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>Compass Sample Overview</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">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_w.html#orientation">DeviceOrientation Event Specification API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>Compass Sample Overview</h1>
+ <p>The Compass sample application demonstrates how you can create a simple application using the device orientation event.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the Compass.</p>
+ <p class="figure">Figure: Compass screen</p>
+ <p align="center"><img alt="Compass screen" src="../images/compass_ww.png" /> </p>
+ <p>The application opens with the main screen that shows the current device orientation.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">startSensor</span> function adds a listener to the <span style="font-family: Courier New,Courier,monospace">deviceorientation</span> event.</p>
+
+<pre class="prettyprint">
+function startSensor()
+{
+ window.addEventListener('deviceorientation', onDeviceOrientation, false);
+}
+</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>DigitalWatch Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/system/time_w.htm">Time Guide</a></li>
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/battery_w.htm">Battery Status Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#battery">Battery Status API</a></li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm#ambient">Ambient Events</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>DigitalWatch Sample Overview</h1>
+ <p>The DigitalWatch sample application demonstrates how you can create a simple digital watch application.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Web Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the DigitalWatch.</p>
+ <p class="figure">Figure: DigitalWatch screen</p>
+ <p align="center"><img alt="DigitalWatch screen" src="../images/digitalwatch_ww1.png" /> <img alt="DigitalWatch screen" src="../images/digitalwatch_ww2.png" /></p>
+ <p>The application opens with the main screen that shows the current time and battery status.</p>
+ <p>When the ambient mode is enabled, the watch application with a limited UI can be displayed on the idle screen to reduce power consumption.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the application code.</td>
+ </tr>
+ </tbody>
+ </table>
+ <h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">config.xml</span> file contains the application information required to install and launch the application. The category name (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/category/wearable_clock</span>) defines the application to be installed as a wearable clock application.</p>
+<p>To enable a custom UI for the <a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm#ambient">ambient mode</a>, the <span style="font-family: Courier New,Courier,monospace">ambient_support</span> attribute must be set to <span style="font-family: Courier New,Courier,monospace">enable</span>. Additionally, the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/alarm</span> privilege must be set to get <span style="font-family: Courier New,Courier,monospace">timetick</span> events, which occur once a minute to enable the UI to be updated.</p>
+
+
+<pre class="prettyprint">
+<?xml version="1.0" encoding="UTF-8"?>
+<widget xmlns="http://www.w3.org/ns/widgets">
+ <tizen:category name="http://tizen.org/category/wearable_clock" />
+ <tizen:application id="PxRGFrcVm7.DigitalWatch" package="PxRGFrcVm7" required_version="2.3" ambient_support="enable"/>
+ <tizen:privilege name="http://tizen.org/privilege/alarm"/>
+ <tizen:setting background-support="disable" encryption="disable" hwkey-event="enable"/>
+</widget></pre>
+
+ <p>The following code snippet adds an event handler for battery events:</p>
+ <pre class="prettyprint">
+battery.addEventListener('chargingchange', getBatteryState);
+battery.addEventListener('chargingtimechange', getBatteryState);
+battery.addEventListener('dischargingtimechange', getBatteryState);
+battery.addEventListener('levelchange', getBatteryState);
+</pre>
+
+<p>To retrieve the required details:</p>
+
+<ul><li>
+<p>Get the battery level (0 - 100):</p>
+ <pre class="prettyprint">
+var battery_level = Math.floor(battery.level * 100);</pre></li>
+
+<li><p>Get the current time object:</p>
+ <pre class="prettyprint">
+date = tizen.time.getCurrentDateTime();</pre></li>
+
+<li><p>Get the current weekday (MON - SUN):</p>
+ <pre class="prettyprint">
+day = date.getDay();</pre></li>
+
+<li><p>Get the current month (0 - 11) and day (1 - 31):</p>
+ <pre class="prettyprint">
+month = date.getMonth() + 1,
+day = date.getDate();</pre></li>
+
+<li><p>Get the current hour (0 - 23), minutes (0 - 59), and seconds (0 - 59):</p>
+ <pre class="prettyprint">
+str_hours = date.getHours();
+str_minutes = date.getMinutes();
+str_second = date.getSeconds();</pre></li></ul>
+
+<p>To add event handlers for ambient events:</p>
+<pre class="prettyprint">
+/* EventListener for ambientmodechanged */
+window.addEventListener('ambientmodechanged', function(e)
+{
+ if (e.detail.ambientMode === true)
+ {
+ /* Rendering ambient mode UI */
+ ambientDigitalWatch();
+ }
+ else
+ {
+ /* Rendering normal UI */
+ initDigitalWatch();
+ }
+});
+
+/* EventListener for timetick */
+window.addEventListener('timetick', function()
+{
+ ambientDigitalWatch();
+});
+</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>HelloTizen Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>HelloTizen Sample Overview</h1>
+ <p>The HelloTizen sample application demonstrates how you can show text on the screen and receive touch events.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the HelloTizen.</p>
+ <p class="figure">Figure: HelloTizen screen</p>
+ <p align="center"><img alt="HelloTizen screen" src="../images/hellotizen_screen.png" /> </p>
+ <p>The application opens with the main screen that shows the <strong>Hello Tizen</strong> text.</p>
+ <p>You can change the text by touching the screen.</p>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project, including the source files, in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ </tbody>
+ </table>
+ <h2>Implementation</h2>
+ <p>The following code adds a click event listener. When a click event occurs, the <strong>Hello Tizen</strong> text changes into the <strong>Hi Gear</strong> text.</p>
+<pre class="prettyprint">
+textbox.addEventListener('click', function()
+{
+ var box = document.getElementById('content_text');
+ if (box.innerHTML === 'Hello Tizen')
+ {
+ box.innerHTML = "Hi Gear";
+ }
+ else
+ {
+ box.innerHTML = "Hello Tizen";
+ }
+});
+</pre>
+<p>The following code adds a hardware event listener. When the back button is pressed, the application is terminated.</p>
+<pre class="prettyprint">
+document.addEventListener('tizenhwkey', function(e)
+{
+ if (e.keyName === 'back')
+ {
+ try
+ {
+ tizen.application.getCurrentApplication().exit();
+ }
+ catch (ignore) {}
+ }
+});
+</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
--- /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>MiniGallery Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/content/content_w.htm">Content Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>MiniGallery Sample Overview</h1>
+ <p>The MiniGallery sample application demonstrates how you can handle content items and the device file system in your application.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the MiniGallery.</p>
+ <p class="figure">Figure: MiniGallery screens</p>
+ <p align="center"><img alt="MiniGallery screens" src="../images/minigallery_ww.png" /> </p>
+ <p>The MiniGallery application opens with a preview of the folders on the device. To view the contents of a folder in the gallery view, click on the folder. To delete an image from the folder, click the image, and select <strong>Yes</strong> to confirm deletion.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the functions responsible for the start of application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/content.js</span></td>
+ <td>This file contains the code for the methods access to the content and filesystem.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/confirmationPopup.js</span></td>
+ <td>This file contains the functions responsible for the work popups in the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/galleriesPage.js</span></td>
+ <td>This file contains the functions responsible for the work galleries page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/initPage.js</span></td>
+ <td>This file contains the functions responsible for the view of the application and the back key handling.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/photoPage.js</span></td>
+ <td>This file contains the functions responsible for the work photo page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/swipe.js</span></td>
+ <td>This file contains the functions responsible for the trigger swipe events.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/ui.js</span></td>
+ <td>This file contains the functions responsible for the show toasts.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">AttributeFilter()</span> constructor constructs a new instance of the attribute filter by the specified parameters.</p>
+
+<pre class="prettyprint">
+filter = new tizen.AttributeFilter('type', 'EXACTLY');
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">SortMode()</span> constructor constructs a new instance of the attribute filter by the specified parameters.</p>
+ <pre class="prettyprint">
+sortMode = new tizen.SortMode('title', 'ASC'),
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">RefreshGalleries</span> function invokes the <span style="font-family: Courier New,Courier,monospace">find()</span> method to find content using the specified filter and sorted by specified sort mode.</p>
+<pre class="prettyprint">
+function refreshGalleries()
+{
+ refreshed = false;
+ tizen.content.find(contentFindSuccess, contentFindError, null, filter, sortMode);
+}
+</pre>
+<p>The following code presents how to delete a specified file from file system:</p>
+<pre class="prettyprint">
+function deleteFile(fileUri)
+{
+ tizen.filesystem.resolve(
+ resource,
+ function del(dir)
+ {
+ dir.deleteFile(
+ resource + '/' + name,
+
+ function scan()
+ {
+ tizen.content.scanFile(fileUri, function success() {}, function failed(e) {}),
+ },
+ function failed(ev) {});
+ },
+ function failed(e) {});
+}
+</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>MoneyBook Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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_w.html#database">Indexed Database API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>MoneyBook Sample Overview</h1>
+ <p>The MoneyBook sample application demonstrates how you can save and load data in a database storage.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the MoneyBook.</p>
+ <p class="figure">Figure: MoneyBook screens</p>
+ <p align="center"><img alt="MoneyBook screens" src="../images/moneybook_ww.png" /></p>
+ <p>The application opens with the result screen, which displays all added records.</p>
+
+<p>To add a record:</p>
+<ol><li>Go to the input screen by clicking <strong>Back</strong> on the result screen.</li>
+<li><p>Enter the name and price of the item to the textbox, and click <strong>Submit</strong>.</p></li></ol>
+
+<p>To remove a record, press the ID number (the first field) of the record you want to remove on the result screen. To remove all records, click <strong>Clear</strong>.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application stars loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+ <h2>Implementation</h2>
+
+ <p>When the application starts, it attempts to open the database using the Indexed Database API:</p>
+ <pre class="prettyprint">
+function openDB(successCb)
+{
+ if (window.indexedDB)
+ {
+ var request = indexedDB.open(DB_NAME, DB_VERSION);
+
+ request.onerror = function(e)
+ {
+ alert("Please allow this application to use Indexed DB");
+ };
+ request.onsuccess = function(e)
+ {
+ db = request.result;
+
+ onSuccess(
+ {
+ message: "Indexed DB loading complete"
+ });
+
+ if (successCb)
+ {
+ successCb(db);
+ }
+ };
+ request.onupgradeneeded = function(e)
+ {
+ db = e.target.result;
+
+ onSuccess(
+ {
+ message: "Indexed DB upgrade needed"
+ });
+
+ createTable(db);
+ };
+ }
+ else
+ {
+ onError(
+ {
+ message: "Indexed DB is not supported"
+ });
+ }
+}
+</pre>
+
+<p>After the database is opened, the application creates a table to the database if none exists:</p>
+
+ <pre class="prettyprint">
+function createTable(db)
+{
+ if (db.objectStoreNames.contains(DB_TABLE_NAME))
+ {
+ db.deleteObjectStore(DB_TABLE_NAME);
+ }
+
+ idbObjectStore = db.createObjectStore(DB_TABLE_NAME,
+ {
+ keyPath: "id",
+ autoIncrement: true
+ });
+}
+</pre>
+
+<p>To get data from the database, use the <a href="http://www.w3.org/TR/2013/WD-IndexedDB-20130516/#cursor" target="_blank">Cursor</a> object of the Indexed Database API:</p>
+<pre class="prettyprint">
+function loadDataView(db)
+{
+ var transaction = db.transaction(DB_TABLE_NAME, "readonly"),
+ resultBuffer = [];
+
+ idbObjectStore = transaction.objectStore(DB_TABLE_NAME);
+ idbObjectStore.openCursor().onsuccess = function(e)
+ {
+ var cursor = e.target.result;
+
+ if (cursor)
+ {
+ resultBuffer.push(cursor.value);
+ cursor.continue();
+ }
+ else
+ {
+ showDataView(resultBuffer);
+ }
+ };
+}
+</pre>
+
+<p>To insert and delete data, use the <span style="font-family: Courier New,Courier,monospace">put()</span> and <span style="font-family: Courier New,Courier,monospace">delete()</span> functions:</p>
+
+<pre class="prettyprint">
+/* Insert a data to the table */
+function insertData(db, data)
+{
+ var transaction = db.transaction(DB_TABLE_NAME, "readwrite");
+
+ idbObjectStore = transaction.objectStore(DB_TABLE_NAME);
+ idbObjectStore.put(data);
+}
+
+/* Delete a data from the table */
+function deleteData(db, data)
+{
+ var transaction = db.transaction(DB_TABLE_NAME, "readwrite");
+
+ idbObjectStore = transaction.objectStore(DB_TABLE_NAME);
+ idbObjectStore.delete(data.id);
+}
+</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>NewsFeed Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/communication/xmlhttprequest_w.htm#wearable">XMLHttpRequest Level 1 Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>NewsFeed Sample Overview</h1>
+ <p>The NewsFeed sample application demonstrates how you can get data in the XML format from an Internet connection.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the NewsFeed.</p>
+ <p class="figure">Figure: NewsFeed screen</p>
+ <p align="center"><img alt="NewsFeed screen" src="../images/newsfeed_screen.png" /> </p>
+ <p>The application opens with the first page of the news feed. To move to the next page, touch the screen.</p>
+
+<h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screen.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">main.js</span></td>
+ <td>This file defines the operations of the application, such as sending requests and receiving data.</td>
+ </tr>
+ </tbody>
+ </table>
+ <h2>Implementation</h2>
+ <p>The following code in the <span style="font-family: Courier New,Courier,monospace">main.js</span> file sends an XML request and receives the return data:</p>
+<pre class="prettyprint">
+xmlhttp = new XMLHttpRequest();
+
+xmlhttp.open(XML_METHOD, XML_ADDRESS, false);
+xmlhttp.onreadystatechange = function()
+{
+ if (xmlhttp.readyState === 4)
+ {
+ if (xmlhttp.status === 200)
+ {
+ clearElmText(objNews);
+
+ xmlDoc = xmlhttp.responseXML;
+ dataItem = xmlDoc.getElementsByTagName('item');
+
+ if (dataItem.length > 0)
+ {
+ lengthNews = (dataItem.length > NUM_MAX_NEWS) ? NUM_MAX_NEWS : dataItem.length;
+ for (i = 0; i < lengthNews; i++)
+ {
+ arrayNews.push(
+ {
+ title: dataItem[i].getElementsByTagName('title')[0].childNodes[0].nodeValue,
+ link: dataItem[i].getElementsByTagName('link')[0].childNodes[0].nodeValue
+ });
+ arrayNews[i].title = trimText(arrayNews[i].title, NUM_MAX_LENGTH_SUBJECT);
+ }
+ resetNewsIndex();
+ showNews();
+ }
+ else
+ {
+ addElmText(objNews, 'subject', MSG_ERR_NODATA);
+ }
+
+ xmlhttp = null;
+ }
+ }
+};
+
+xmlhttp.send();
+</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>Wearable Web Sample Descriptions</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="Wearable Web" src="../images/ww_icon.png"/></p>
+ </div>
+ <h1>Wearable Web Sample Descriptions</h1>
+
+ <p>To access general information about the wearable sample functionality and the content of the sample source files, click the sample name in the following table.</p>
+ <table border="1">
+ <caption>
+ Table: Wearable Web samples in the Tizen SDK
+ </caption>
+ <colgroup>
+ <col />
+ <col />
+ </colgroup>
+ <tbody>
+ <tr>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Sample name</th>
+ <th style="text-align:center;margin-left:auto;margin-right:auto;">Description</th>
+ </tr>
+ <tr>
+ <td><a href="altimeter_ww.htm">Altimeter</a></td>
+ <td>Demonstrates how you can allow the user to measure the current altitude and pressure using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="analogwatch_ww.htm">AnalogWatch</a></td>
+ <td>Demonstrates how you can create a simple watch application through the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="appcalleecaller_ww.htm">AppCaller and AppCallee</a></td>
+ <td>Demonstrates how you can use the application control to call other applications based on the operation type using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API</li>
+ </ul></td>
+ </tr>
+ <tr>
+ <td><a href="basicwatch_ww.htm">BasicWatch</a></td>
+ <td>Demonstrates how you can create a simple clock application through the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API</li>
+ </ul>
+ <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/graphics/task_basicwatch_w.htm">Task: Basic Watch</a>.</p></td>
+ </tr>
+ <tr>
+ <td><a href="calculator_ww.htm">Calculator</a></td>
+ <td>Demonstrates how you can create a calculator with basic mathematical operations using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/systeminfo.html">System Information</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="calendar_ww.htm">Calendar</a></td>
+ <td>Demonstrates how you can display calendar months using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="camera_ww.htm">Camera</a></td>
+ <td>Demonstrates how you can handle the camera in the Tizen wearable device using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension)</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/supplement/task_camera_w.htm">Task: Camera</a>.</p> </td>
+ </tr>
+
+ <tr>
+ <td><a href="compass_ww.htm">Compass</a></td>
+ <td>Demonstrates how you can take advantage of the device orientation event using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#orientation">DeviceOrientation Event Specification</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="digitalwatch_ww.htm">DigitalWatch</a></td>
+ <td>Demonstrates how you can create a simple digital watch application using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#battery">Battery Status</a> API</li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm#ambient">Ambient Events</a></li>
+ </ul>
+ </td>
+</tr>
+ <tr>
+ <td><a href="hellotizen_ww.htm">HelloTizen</a></td>
+ <td>Demonstrates how you can receive hardware key events and display text on the screen using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="minigallery_ww.htm">MiniGallery</a></td>
+ <td>Demonstrates how you can handle content items and the device file system using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/content.html">Content</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/filesystem.html">Filesystem</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="moneybook_ww.htm">MoneyBook</a></td>
+ <td>Demonstrates how you can save and load data in a database storage using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#database">Indexed Database</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="newsfeed_ww.htm">NewsFeed</a></td>
+ <td>Demonstrates how you can send requests and receive XML format data using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#httpreq">XMLHttpRequest Level 1</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="sensorball_ww.htm">SensorBall</a></td>
+ <td>Demonstrates how you can create an application that simulates ball behavior in 3 different environments using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="spinning_arrow_ww.htm">SpinningArrow</a></td>
+ <td>Demonstrates how you can rotate images and use rotary events using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms</a> API</li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm">Rotary Events</a></li>
+ </ul>
+ </td>
+ </tr>
+<tr>
+ <td><a href="stopwatch_ww.htm">StopWatch</a></td>
+ <td>Demonstrates how you can operate a stopwatch and timer using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">Alarm</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">Power</a> API</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td><a href="sunburnmonitor_ww.htm">SunburnMonitor</a></td>
+ <td>Demonstrates how you can take advantage of the ultraviolet sensor in your application using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/sensor.html">Sensor</a> API</li>
+ </ul>
+ </td>
+ </tr>
+<tr>
+ <td><a href="touchpaint_ww.htm">TouchPaint</a></td>
+ <td>Demonstrates how you can create a simple paint application through touch events and the <a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1</a> API</li>
+ </ul> <p>This sample is also explained in the tutorials: <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm">Task: Touch Paint</a>.</p></td>
+ </tr>
+<tr>
+ <td><a href="voicerecorder_ww.htm">VoiceRecorder</a></td>
+ <td>Demonstrates how you can record and play voice using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/camera_w.html">Camera API (Tizen Extension)</a> API</li>
+ </ul>
+ </td>
+ </tr>
+<tr>
+ <td><a href="wearableuicomponents_ww.htm">WearableUIComponents</a></td>
+ <td>Demonstrates how you can implement UI components using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a> Reference</li>
+ </ul>
+ </td>
+ </tr>
+<tr>
+ <td><a href="worldclock_ww.htm">WorldClock</a></td>
+ <td>Demonstrates how you can implement a world clock displaying the current local time in cities worldwide using:
+ <ul>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">HTML5 Canvas Element</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage</a> API</li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API</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>SensorBall Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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/wearable/tizen/sensor.html">Sensor API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SensorBall Sample Overview</h1>
+ <p>The SensorBall sample application demonstrates how you can create an application that simulates behavior of a ball in three different environments.</p>
+ <p>The user can impact the movement of the ball by moving the device. The application reads acceleration of the device and changes the position of the ball to simulate inertia and gravity forces.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the SensorBall.</p>
+ <p class="figure">Figure: SensorBall screen</p>
+ <p align="center"><img alt="SensorBall screen" src="../images/sensorball_ww.png" /> </p>
+
+
+ <p>The main page of the application contains the scene and three buttons at the bottom. The buttons allow switching between the following environments: gravity, sky, and space.</p>
+ <ul>
+ <li><p>The gravity environment simulates a ball in indoor conditions. The movement of the ball is affected by gravity. The screenshot on the left presents the scene with this environment.</p></li>
+ <li><p>The sky environment simulates a balloon in the sky. The balloon is filled with gas lighter than air, so it slowly moves up. The screenshot in the middle presents the scene.</p></li>
+ <li><p>The space environment simulates a planet in space. Sun and Earth are placed on the scene and Earth orbits the sun as shown in the screenshot on the right. In this environment the gravity does not depend on acceleration of the device. Instead, positions of the Sun and the background are slightly changed in response to the device movement.</p>
+ </li>
+ </ul>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/</span></td>
+ <td>This directory contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the initialization module.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This file contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/ball.js</span></td>
+ <td>This file is the model of the ball. It contains the ball position and speed.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/gravity.js</span></td>
+ <td>This file is the model of the gravity. It performs calculations for the ball in the gravity mode.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/space.js</span></td>
+ <td>This file is the model of space. It performs calculations for the planet in space.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/rectangular.js</span></td>
+ <td>This file is the model of the rectangular scene. It calculates the collisions between the ball and the scene edges.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/circular.js</span></td>
+ <td>This is the model of a circular scene. It calculates the collisions between the ball and the scene edge.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the code to render the elements of the scene and handles the UI events.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The following functions demonstrate adding the <span style="font-family: Courier New,Courier,monospace">devicemotion</span> event listener and handling the event. </p>
+
+<pre class="prettyprint">
+/* views/main.js */
+function onDeviceMotion(event)
+{
+ ball.setMotionData(event);
+}
+
+function bindEvents()
+{
+ var gravityButton = document.getElementById(GRAVITY_BUTTON_ID),
+ skyButton = document.getElementById(SKY_BUTTON_ID),
+ spaceButton = document.getElementById(SPACE_BUTTON_ID);
+
+ window.addEventListener('tizenhwkey', onHardwareKeysTap);
+
+ /* devicemotion event listener */
+ window.addEventListener('devicemotion', onDeviceMotion);
+
+ document.addEventListener('webkitvisibilitychange', onVisibilityChange);
+
+ gravityButton.addEventListener('click', function onBallTap()
+ {
+ startGravity();
+ });
+
+ skyButton.addEventListener('click', function onSkyTap()
+ {
+ startSky();
+ });
+
+ startSpace();
+});
+</pre>
+
+<p>The following function sets the motion data with the given event value.</p>
+ <pre class="prettyprint">
+/* models/ball.js */
+function setMotionData(event)
+{
+ motionData = event;
+}
+</pre>
+
+<p>The following function calculates the ball's velocity based on the sensor motion data.</p>
+<pre class="prettyprint">
+/* models/gravity.js */
+function calculateVelocity()
+{
+ var x = 0,
+ y = 0,
+ ddx = 0,
+ ddy = 0;
+
+ if (motionData !== null)
+ {
+ x = -motionData.accelerationIncludingGravity.x;
+ y = -motionData.accelerationIncludingGravity.y;
+ }
+ ddx = x * -cdd;
+ ddy = y * cdd;
+ v.x += ddx;
+ v.y += ddy;
+ v.x *= friction;
+ v.y *= friction;
+}
+</pre>
+<p>The following function calculates the position of the Sun in the space mode based on the data received from the motion sensor.</p>
+<pre class="prettyprint">
+/* models/space.js */
+function getSunPosition()
+{
+ var result = {},
+
+ x = -motionData.accelerationIncludingGravity.x,
+ y = -motionData.accelerationIncludingGravity.y,
+
+ rX = -8.0,
+ rY = -8.0,
+
+ cX = (gameWidth - sunWidth) / 2,
+ cY = (gameHeight - sunHeight) / 2,
+
+ tX = cX + (-x * rX),
+ tY = cY + (y * rY),
+
+ bdX = tX - sunX,
+ bdY = tY - sunY,
+
+ br = 0.2;
+
+ sunX += bdX * br;
+ sunY += bdY * br;
+
+ result.x = sunX;
+ result.y = sunY;
+
+ return result;
+}
+</pre>
+
+<p>The following function calculates the position of the background in the space mode based on the data received from the motion sensor.</p>
+<pre class="prettyprint">
+/* models/space.js */
+function getBackgroundPosition()
+{
+ var result = {},
+
+ x = -motionData.accelerationIncludingGravity.x,
+ y = -motionData.accelerationIncludingGravity.y,
+
+ rX = -30.0,
+ rY = -30.0,
+
+ cX = (gameWidth - backgroundWidth) / 2,
+ cY = (gameHeight - backgroundHeight) / 2,
+
+ tX = cX + (-x * rX),
+ tY = cY + (y * rY),
+
+ bdX = tX - backgroundLeft,
+ bdY = tY - backgroundTop,
+
+ br = 0.2;
+
+ backgroundLeft += bdX * br;
+ backgroundTop += bdY * br;
+
+ result.left = backgroundLeft;
+ result.top = backgroundTop;
+
+ return result;
+}
+</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>SpinningArrow Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/dom/transform_w.htm">CSS Transforms Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#transforms">CSS Transforms API</a></li>
+ <li><a href="../../../org.tizen.gettingstarted/html/web/details/event_handling_w.htm">Rotary Events</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SpinningArrow Sample Overview</h1>
+ <p>The SpinningArrow sample application demonstrates how you can create a simple rotation image application using the <span style="font-family: Courier New,Courier,monospace">rotate</span> CSS element.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screen of the SpinningArrow.</p>
+ <p class="figure">Figure: SpinningArrow screen</p>
+ <p align="center"><img alt="SpinningArrow screen" src="../images/spinningarrow_sd.png" /> </p>
+ <p>The application opens with the main screen that shows a spinning arrow after touching the screen.</p>
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the canvas functionality of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2>Implementation</h2>
+<p>The following code adds the event handlers for the click and rotary events,</p>
+<pre class="prettyprint">
+document.getElementById('direction_button').addEventListener('click', rotateArrow, false);
+document.addEventListener('rotarydetent', function(ev)
+{
+ var direction = ev.detail.direction;
+ rotateArrow(direction);
+});</pre>
+
+ <p>The <span style="font-family: Courier New,Courier,monospace">rotateArrow()</span> function rotates the arrow image based on the events.</p>
+<pre class="prettyprint">
+function rotateArrow(rotary_direction)
+{
+ var interval,
+ direction = document.querySelector('#direction');
+
+ /* If there is a rotary event direction, 'initial_time' is increased */
+ if (rotary_direction === "CW" || rotary_direction === "CCW")
+ {
+ if (initial_time < 150)
+ {
+ initial_time = initial_time + 1;
+ }
+ }
+ /* If there is no direction and a click event, 'initial_time' is set randomly */
+ else
+ {
+ initial_time = (Math.random() * 50) + 100;
+ }
+
+ if (click_status === false)
+ {
+ direction.style.transform = 'rotate(' + deg + 'deg)';
+ click_status = true;
+ /* setInterval at 0.075 sec */
+ interval = setInterval(function()
+ {
+ if ((initial_time--) < 0)
+ {
+ clearInterval(interval);
+ click_status = false;
+ }
+
+ /* If rotary_direction is "CW", then rotate to right */
+ if (rotary_direction === "CW")
+ {
+ deg = deg + initial_time;
+ }
+ /* If rotary_direction is "CCW", then rotate to left */
+ else
+ {
+ deg = deg - initial_time;
+ }
+
+ direction.style.transform = 'rotate(' + deg + 'deg)';
+ }, 75);
+ }
+}</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
--- /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>StopWatch Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/application/alarm_w.htm">Alarm Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/alarm.html">Alarm API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/application.html">Application API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/power.html">Power API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>StopWatch Sample Overview</h1>
+ <p>The StopWatch sample application demonstrates how you can operate a stopwatch and timer.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screen of the StopWatch.</p>
+ <p class="figure">Figure: StopWatch screen</p>
+ <p align="center"><img alt="StopWatch screen" src="../images/stopwatch_sd.png" /> </p>
+ <p>The application opens on the <strong>StopWatch</strong> tab. To switch to the timer tab, click <strong>Timer</strong>.</p>
+
+ <p>You can use the stopwatch to record how much time something takes with a millisecond precision. You can also track intermediate times (laps), for example, in sporting events and races. On the <strong>StopWatch</strong> tab:</p>
+ <ul>
+ <li>To start the stopwatch, click <strong>START</strong>.
+<p>The timer starts running at the top of the screen.</p></li>
+ <li>To record a lap time, click <strong>LAP</strong>.
+ <p>The timer continues running.</p></li>
+ <li>To stop the stopwatch, click <strong>STOP</strong>.
+ <p>The timer stops running.</p></li>
+ <li>To reset the stopwatch, click <strong>RESET</strong>.
+<p>The timer is set to <strong>00:00:00</strong>.</p></li>
+ <li>To restart the stopwatch, click <strong>RESTART</strong>.
+ <p>The timer continues running from the last recorded time.</p></li>
+ </ul>
+
+ <p>You can use a timer to count down a specific time period when an alarm is triggered. The alarm is triggered even if the application is closed. On the <strong>Timer</strong> tab:</p>
+ <ul>
+ <li>To start the timer, click the numbers to set the time period, and click <strong>START</strong>.</li>
+ <li>To stop the timer, click <strong>STOP</strong>.</li>
+ <li>To reset the timer, click <strong>RESET</strong>.
+<p>The timer is set to <strong>00:01:00</strong>.</p></li>
+ </ul>
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the application initializer.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/page.js</span></td>
+ <td>This file contains the helpers for retrieving information about an opened page.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/timer.js</span></td>
+ <td>This file contains the definition of the <span style="font-family: Courier New,Courier,monospace">helper</span> class Timer transforming the milliseconds to the hh:MM:ss:ms format.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contains the code related to the application model.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the code related to application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>This section describes the implementation of the core functionality of the application. The code related to the user interface and functions not related to the Tizen APIs have been omitted to preserve simplicity.</p>
+
+<h3>Stopwatch Implementation</h3>
+
+<p>To implement the stopwatch functionality, define the <span style="font-family: Courier New,Courier,monospace">Timer</span> class.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+function Timer(delay, callbacks)
+{
+ this.reset();
+ this.callbacks = callbacks;
+ this.delay = delay;
+ this.id = setInterval(this.tick.bind(this), this.delay);
+}
+
+Timer.prototype =
+{
+ pause: function pause()
+ {
+ (...)
+ },
+ reset: function reset()
+ {
+ (...)
+ },
+ run: function run()
+ {
+ (...)
+ },
+ stop: function stop()
+ {
+ (...)
+ },
+ getTimeElapsed: function getTimeElapsed()
+ {
+ (...)
+ },
+ lap: function lap()
+ {
+ (...)
+ },
+ tick: function tick()
+ {
+ (...)
+ }
+};</pre>
+
+<p>The above class consists of the following methods:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">reset()</span> – resets the stopwatch and clears the laps.</li>
+<li><span style="font-family: Courier New,Courier,monospace">run()</span> – starts the stopwatch.</li>
+<li><span style="font-family: Courier New,Courier,monospace">lap()</span> – adds a lap.</li>
+<li><span style="font-family: Courier New,Courier,monospace">pause()</span> – pauses the stopwatch. It can be resumed later.</li>
+<li><span style="font-family: Courier New,Courier,monospace">stop()</span> – stops the stopwatch permanently. It cannot be resumed anymore.</li>
+<li><span style="font-family: Courier New,Courier,monospace">getElapsedTime()</span> – returns the elapsed time.</li>
+<li><span style="font-family: Courier New,Courier,monospace">tick()</span> – a callback that is executed repeatedly when the stopwatch is not paused or stopped.</li></ul>
+
+<p>The constructor of the class gets a <span style="font-family: Courier New,Courier,monospace">delay</span> value and a <span style="font-family: Courier New,Courier,monospace">callbacks</span> array on input. </p>
+<p>First the constructor resets the timer instance by executing the <span style="font-family: Courier New,Courier,monospace">reset()</span> method, and then it starts executing the <span style="font-family: Courier New,Courier,monospace">tick()</span> method repeatedly after every delay.</p>
+<p>The <span style="font-family: Courier New,Courier,monospace">reset()</span> method initializes the internal variables.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+reset: function reset()
+{
+ this.status = 'ready';
+ this.startTime = null;
+ this.lapNo = 1;
+ this.lastLapTime = 0;
+}</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">status</span> variable indicates the status of the stopwatch. It is set as 'ready' to show that the stopwatch is initialized but not started yet. The <span style="font-family: Courier New,Courier,monospace">startTime</span> variable contains a timestamp where the stopwatch was started. The <span style="font-family: Courier New,Courier,monospace">lapNo</span> and <span style="font-family: Courier New,Courier,monospace">lastLapTime</span> are used in creating laps.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">tick()</span> method executes the callbacks if the timer is running.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+tick: function tick()
+{
+ var i;
+ if (this.status !== 'running')
+ {
+ return this;
+ }
+ (...) /* Execute callbacks */
+ return this;
+}</pre>
+
+<p>To run a timer, call the <span style="font-family: Courier New,Courier,monospace">run()</span> method.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+run: function run()
+{
+ switch (this.status)
+ {
+ case 'ready':
+ if (this.startTime === null)
+ {
+ this.startTime = Date.now();
+ }
+ break;
+ case 'paused':
+ /* Adjust the startTime by the time passed since the pause */
+ /* so that the time elapsed remains unchanged */
+ this.startTime += Date.now() - this.timePaused;
+ break;
+ case 'running':
+ /* Already running */
+ return this;
+ case 'stopped':
+ throw new Error('Can\'t run a stopped timer again');
+ }
+ this.status = 'running';
+
+ return this;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">run()</span> method checks the status value. If the stopwatch is in the 'ready' state, the <span style="font-family: Courier New,Courier,monospace">startTime</span> variable is set as the current timestamp. If the <span style="font-family: Courier New,Courier,monospace">status</span> variable has the 'paused' value, the <span style="font-family: Courier New,Courier,monospace">startTime</span> variable is adjusted and the time elapsed remains unchanged. If the stopwatch is stopped, the function throws an exception as the stopping operation is not possible.</p>
+
+<p>After checking the above, the <span style="font-family: Courier New,Courier,monospace">status</span> variable is set as the 'running' value.</p>
+
+<p>When the stopwatch is running, it can be paused by calling the <span style="font-family: Courier New,Courier,monospace">pause()</span> method.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+pause: function pause()
+{
+ if (this.status !== 'running')
+ {
+ throw new Error('Can pause only a running timer');
+ }
+ this.status = 'paused';
+ this.timePaused = Date.now();
+ return this;
+}</pre>
+
+<p>When the timer instance is no longer needed, it can be stopped permanently by calling the <span style="font-family: Courier New,Courier,monospace">stop</span> method.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+stop: function stop()
+{
+ clearInterval(this.id);
+ this.status = 'stopped';
+ this.timePaused = null;
+ return this;
+}</pre>
+
+<p>To record laps, use the <span style="font-family: Courier New,Courier,monospace">Lap()</span> method.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+function Lap(no, time)
+{
+ this.no = no;
+ this.time = time;
+}</pre>
+<p>An instance of the <span style="font-family: Courier New,Courier,monospace">Lap</span> class has two variables: <span style="font-family: Courier New,Courier,monospace">no</span> indicating the lap number and <span style="font-family: Courier New,Courier,monospace">time</span> indicating how much time passed from the last lap to now.</p>
+
+<p>To implement a function registering a lap, the <span style="font-family: Courier New,Courier,monospace">getTimeElapsed()</span> function returns information on how much time has passed.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+getTimeElapsed: function getTimeElapsed()
+{
+ if (this.status === 'running')
+ {
+ return Date.now() - this.startTime;
+ }
+ if (this.status === 'paused')
+ {
+ return this.timePaused - this.startTime;
+ }
+
+ return 0;
+}</pre>
+
+<p>The following function registers a lap.</p>
+<pre class="prettyprint">
+/* js/models/timer.js */
+lap: function lap()
+{
+ var lapObj = new Lap(
+ this.lapNo,
+ /* Lap time is total time minus previous lap time */
+ this.getTimeElapsed() - this.lastLapTime);
+ this.lastLapTime = this.getTimeElapsed();
+ this.lapNo += 1;
+ return lapObj;
+}</pre>
+
+
+<h3>Timer Implementation</h3>
+
+<p>The Timer is based on the <span style="font-family: Courier New,Courier,monospace">Timer</span> class implementation.</p>
+
+<p>When the user sets the time and taps the <strong>START</strong> button, the clock on top of the page starts counting down. When the clock reaches zero, the alarm rings and the alarm page is displayed.</p>
+<p>The following function initializes the <span style="font-family: Courier New,Courier,monospace">timer</span> object and sets the alarm file path to the alarm module.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+var ALARM_SOUND_PATH = 'sounds/sounds_alarm.mp3';
+
+function init()
+{
+ timer = new Timer(100, fireTick);
+ audio.setFile(ALARM_SOUND_PATH);
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">audio.setFile(ALARM_SOUND_PATH)</span> command sets the audio path to the audio module of the application framework.</p>
+<pre class="prettyprint">
+/* js/core/core/audio.js */
+var audio = new window.Audio();
+function setFile(path)
+{
+ audio.src = path;
+ audio.autoplay = false;
+ audio.loop = false;
+ audio.load();
+}</pre>
+
+<p>The timer is initialized with the <span style="font-family: Courier New,Courier,monospace">fireTick</span> callback. This callback updates the UI and calls the following function.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function tick()
+{
+ var timeDiff = startTimeMilli - timer.getTimeElapsed(),
+ time = parseInt(sTimerKeyBase, 10);
+ if (timeDiff < 0)
+ {
+ timeUp(time);
+ timer.reset();
+ }
+}</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">tick()</span> function checks whether the time set by the user has already passed. If so, the timer is reset and the <span style="font-family: Courier New,Courier,monospace">timeUp()</span> function is called. The function uses the <span style="font-family: Courier New,Courier,monospace">sTimerKeyBase</span> variable containing the time (in seconds) chosen by the user.</p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">timeUp</span> function opens the alarm page by calling the <span style="font-family: Courier New,Courier,monospace">showAlarm</span> method and plays the alarm sound.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function timeUp()
+{
+ showAlarm();
+ audio.play({loop: true, file: ALARM_SOUND_PATH});
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">showAlarm</span> function opens the alarm page and turns on the screen.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function showAlarm()
+{
+ (...) /* Open the alarm page */
+ tizen.power.turnScreenOn();
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">audio.play({loop: true, file: ALARM_SOUND_PATH})</span> command executes the <span style="font-family: Courier New,Courier,monospace">play()</span> function from the application framework to repeatedly play the specified audio file.</p>
+<pre class="prettyprint">
+/* js/core/core/audio.js */
+function play(options)
+{
+ options = options || {};
+
+ if (options.file !== undefined)
+ {
+ setFile(options.file);
+ }
+
+ if (options.loop !== undefined)
+ {
+ loop(options.loop);
+ }
+
+ audio.play();
+
+ return true;
+}
+
+function loop(flag)
+{
+ audio.loop = flag;
+}</pre>
+
+<p>To start the timer, the user must tap the <strong>START</strong> button. It calls the <span style="font-family: Courier New,Courier,monospace">startCountdown()</span> function.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function startCountdown()
+{
+ timer.run();
+ power.awake();
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">startCountdown()</span> function starts the timer and awakes screen by calling the <span style="font-family: Courier New,Courier,monospace">power.awake</span> method on the Core application framework power module.</p>
+<pre class="prettyprint">
+/* js/core/core/power.js */
+var power = tizen.power,
+ RESOURCE = 'SCREEN',
+ STATE_NORMAL = 'SCREEN_NORMAL';
+
+function awake()
+{
+ power.request(RESOURCE, STATE_NORMAL);
+}</pre>
+
+<p>To run the alarm when the application is closed, use the Alarm API. Handle the <span style="font-family: Courier New,Courier,monospace">visibilitychange</span> event to set a system alarm when the application is closed.</p>
+<pre class="prettyprint">
+/* js/app.js */
+document.addEventListener('visibilitychange', onVisibilityChange);</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">onVisibilityChange</span> function invokes the following <span style="font-family: Courier New,Courier,monospace">visibilityChange</span> function.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function visibilityChange(ev)
+{
+ var state = document.visibilityState;
+
+ if (state !== 'visible')
+ {
+ if (timer.status === 'running')
+ {
+ addAlarm((startTimeMilli - timer.getTimeElapsed()) / 1000);
+ }
+ }
+}</pre>
+<p>If the timer is running, add the system alarm by calling the <span style="font-family: Courier New,Courier,monospace">addAlarm</span> function.</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function addAlarm(time)
+{
+ var alarm = new tizen.AlarmRelative(time + 1),
+ appControl = new tizen.ApplicationControl('http://tizen.org/appcontrol/operation/alarm/' + sTimerKeyBase);
+ tizen.alarm.add(alarm, tizen.application.getCurrentApplication().appInfo.id, appControl);
+}</pre>
+<p>The alarm is added by calling the <span style="font-family: Courier New,Courier,monospace">tizen.alarm.add</span> function. This function gets a <span style="font-family: Courier New,Courier,monospace">tizen.AlarmRelative</span> object, an application ID string, and a <span style="font-family: Courier New,Courier,monospace">tizen.ApplicationControl</span> object. The first parameter contains information on when the alarm must be invoked. The second parameter is the ID of the application. When the time passes, the system opens an application with this ID. The third parameter contains the operation name concatenated with the time set by user. When the application is opened by the system, this information can be used by it.</p>
+
+<p>When the application is opened, the <span style="font-family: Courier New,Courier,monospace">init()</span> function is called. This is the right place to check whether the application is opened by the Alarm API.</p>
+<pre class="prettyprint">
+/* js/core/core/application.js */
+app = tizen.application;
+
+/* js/app.js */
+var OPERATION_ALARM = 'http://tizen.org/appcontrol/operation/alarm';
+
+function init()
+{
+ var appOperation = app.getCurrentApplication()
+ .getRequestedAppControl()
+ .appControl
+ .operation;
+
+ if (appOperation.indexOf(OPERATION_ALARM) !== -1)
+ {
+ (...) /* Open the alarm page */
+ }
+}</pre>
+
+<p>If the application was opened by the Alarm API then the init function above executes the following function:</p>
+<pre class="prettyprint">
+/* js/views/timerPage.js */
+function timeAlarmFire(event)
+{
+ var event_time = parseInt(event.detail.time, 10),
+ time = parseInt(sTimerKeyBase, 10);
+
+ if (time !== event_time)
+ {
+ time = event_time;
+ }
+
+ timeUp(time);
+}</pre>
+<p>This function calls the <span style="font-family: Courier New,Courier,monospace">timeUp()</span> function, the alarm page is displayed, and alarm starts ringing.</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>SunburnMonitor Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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/wearable/tizen/sensor.html">Sensor API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>SunburnMonitor Sample Overview</h1>
+ <p>The SunburnMonitor sample application demonstrates how you can use the ultraviolet sensor in your application.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the main screens of the SunburnMonitor.</p>
+ <p class="figure">Figure: SunburnMonitor screens</p>
+ <p align="center"><img alt="SunburnMonitor screens" src="../images/sunburn_ww.png" /> </p>
+ <p>On start the application checks whether the UV sensor is supported on the device. If not, the popup shown above is displayed and after tapping the <strong>Yes</strong> button the application is automatically closed.</p>
+
+<p>If the device supports the UV sensor, another popup is displayed. It contains a quick manual that explains how to use the SunburnMonitor application. The user can check the box next to <strong>Don't display this message again</strong>, and the popup is not shown anymore.</p>
+
+<p>The main page shows the remaining safe sunbathing time. The sun face can have four different images. The higher the UV intensity, the faster is the spinning speed of the sun rays.</p>
+
+<p>By tapping the main screen, the reset popup is shown. After resetting the application, the measurement process is restarted.</p>
+
+ <h2>Prerequisites</h2>
+
+<ul><li>Device with a UV Sensor or an emulator.</li></ul>
+
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the application framework.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/string.js</span></td>
+ <td>This file contains the helper for changing the string format. </td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/time.js</span></td>
+ <td>This file contains the helper for converting the time format.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/sensor.js</span></td>
+ <td>This file contains a module for managing the ultraviolet sensor.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/init.js</span></td>
+ <td>This file contains functions responsible for the view of the application, the back key, and low battery handling.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/main.js</span></td>
+ <td>This file contains functions responsible for the view and handling event of the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">init</span> method of the main view module is started.</p>
+
+<pre class="prettyprint">
+/* views/main.js */
+function init()
+{
+ sensor.setChangeListener();
+ sensor.start();
+}
+</pre>
+
+<p>The following function gets the default sensor of the device for the given sensor type and gets the current sensor data.</p>
+ <pre class="prettyprint">
+/* models/sensor.js */
+var SENSOR_TYPE = 'ULTRAVIOLET';
+
+function init()
+{
+ sensorService = tizen.sensorservice ||
+ (window.webapis && window.webapis.sensorservice) ||
+ null;
+
+ try
+ {
+ sensor = sensorService.getDefaultSensor(SENSOR_TYPE);
+ }
+ catch (error)
+ {
+ console.error('API is not supported!', error.message);
+ e.fire('not.supported');
+ return;
+ }
+
+ sensor.getUltravioletSensorData(setCurrentUltravioletValue);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">start()</span> function starts the sensor.</p>
+<pre class="prettyprint">
+/* models/sensor.js */
+
+function onSensorStartSuccess()
+{
+ e.fire('start');
+}
+
+function onSensorStartError(e)
+{
+ console.error('SENSOR: onSensorStartSuccess()', e);
+ e.fire('error');
+}
+
+function start()
+{
+ if (sensor)
+ {
+ sensor.start(onSensorStartSuccess, onSensorStartError);
+ }
+}
+</pre>
+<p>The following function registers a change listener to be called when the sensor data changes.</p>
+<pre class="prettyprint">
+/* models/sensor.js */
+function setChangeListener()
+{
+ if (sensor)
+ {
+ sensor.setChangeListener(onSensorChange);
+ }
+}
+</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>TouchPaint Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/device/touch_w.htm">Touch Events version 1 Guide</a></li>
+ <li><a href="../../../org.tizen.tutorials/html/web/w3c/device/touch_tutorial_w.htm">Touch Events version 1 Tutorial</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#touch">Touch Events version 1 API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>TouchPaint Sample Overview</h1>
+ <p>The TouchPaint sample application demonstrates how you can 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.</p>
+ <p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>, and on the coding of the sample application, see the <a href="../../../org.tizen.tutorials/html/web/w3c/device/task_touch_paint_ww.htm">Touch Paint task</a>.</p>
+ <p>The following figure illustrates the main screens of the TouchPaint.</p>
+ <p class="figure">Figure: TouchPaint screens</p>
+ <p align="center"><img alt="TouchPaint screens" src="../images/touchpaint_sd_ww.png" /> </p>
+ <p>The application opens with the main screen where you can see the painting canvas. You can draw on the canvas with your finger.</p>
+ <p>To change the color or line width, click <strong>Options</strong>, make your selection, and click <strong>OK</strong>. To clear the canvas, click <strong>Clear</strong>.</p>
+
+ <h2>Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">img/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/</span></td>
+ <td>This directory contains the application code.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file defines the initialization module.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the core library.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/options.js</span></td>
+ <td>This file defines the module providing the functions to change the brush properties.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the code for handling the UI events for all pages.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">init()</span> method initializes the application. The initialization consists of the canvas size calculation and event listener definitions for all UI elements used in the application.</p>
+<pre class="prettyprint">
+/* main.js */
+var canvas = null,
+ context = null,
+ content = null,
+ touches = null,
+ drawPath = [],
+ strokeColor = '',
+ strokeWidth = 5,
+ isMoved = false;
+
+function init()
+{
+ initCanvas();
+ getOptionValues();
+ bindEvents();
+}
+
+function initCanvas()
+{
+ canvas = document.createElement('canvas');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight - header.offsetHeight - footer.offsetHeight;
+ canvas.setAttribute('id', 'main-canvas');
+ content.appendChild(canvas);
+ context = canvas.getContext('2d');
+}
+
+function getOptionValues()
+{
+ strokeWidth = o.getStrokeWidth();
+ strokeColor = o.getStrokeColor();
+}
+
+function bindEvents()
+{
+ addCanvasListeners();
+}
+
+function addCanvasListeners()
+{
+ canvas.addEventListener('touchstart', onCanvasTouchStart);
+ canvas.addEventListener('touchend', onCanvasTouchEnd);
+ canvas.addEventListener('touchmove', onCanvasTouchMove);
+}</pre>
+
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchstart</span> event is triggered, a filled circle is drawn in the initial position. This position is stored in the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array.</p>
+<pre class="prettyprint">
+/* main.js */
+function onCanvasTouchStart(ev)
+{
+ var touch = ev.changedTouches[0];
+
+ drawPath[touch.identifier] = touch;
+
+ context.fillStyle = strokeColor;
+ context.beginPath();
+ context.arc(drawPath[touch.identifier].pageX - canvas.offsetLeft,
+ drawPath[touch.identifier].pageY - canvas.offsetTop - header.offsetHeight,
+ strokeWidth / 2, 0, Math.PI * 2, true);
+ context.closePath();
+ context.fill();
+}</pre>
+
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchmove</span> event is triggered, the coordinates of the previously triggered <span style="font-family: Courier New,Courier,monospace">touchmove</span> event stored in the <span style="font-family: Courier New,Courier,monospace">changedTouches</span> attribute are saved in the <span style="font-family: Courier New,Courier,monospace">drawPath</span> array and passed as a parameter value of the <span style="font-family: Courier New,Courier,monospace">moveTo()</span> method. The coordinates of the current <span style="font-family: Courier New,Courier,monospace">touchmove</span> event are passed as a parameter value of the <span style="font-family: Courier New,Courier,monospace">lineTo()</span> method and the connected line is created.</p>
+<pre class="prettyprint">
+/* main.js */
+function onCanvasTouchMove(ev)
+{
+ var touches = ev.changedTouches,
+ touchesLength = touches.length,
+ currentDrawPath = null,
+ i = 0;
+
+ context.lineWidth = strokeWidth + ADDITIONAL_LINE_WIDTH;
+ context.strokeStyle = strokeColor;
+ context.lineJoin = 'round';
+
+ for (i = 0; i < touchesLength; i += 1)
+ {
+ currentDrawPath = drawPath[touches[i].identifier];
+ if (currentDrawPath !== undefined)
+ {
+ context.beginPath();
+ context.moveTo(currentDrawPath.pageX - canvas.offsetLeft + HALF_PIXEL,
+ currentDrawPath.pageY - canvas.offsetTop + HALF_PIXEL - header.offsetHeight);
+ context.lineTo(touches[i].pageX - canvas.offsetLeft + HALF_PIXEL,
+ touches[i].pageY - canvas.offsetTop + HALF_PIXEL - header.offsetHeight);
+ context.closePath();
+ context.stroke();
+
+ drawPath[touches[i].identifier] = touches[i];
+ }
+ }
+ ev.preventDefault();
+}</pre>
+<p>When a <span style="font-family: Courier New,Courier,monospace">touchend</span> event is triggered, the stored position is deleted.</p>
+<pre class="prettyprint">
+/* main.js */
+function onCanvasTouchEnd(ev)
+{
+ var touch = ev.changedTouches[0];
+
+ delete drawPath[touch.identifier];
+}</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>VoiceRecorder Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <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</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>VoiceRecorder Sample Overview</h1>
+ <p>The VoiceRecorder sample application demonstrates how you can record and play voice using a wearable device. The recording time is limited to 10 seconds.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+
+
+
+ <p>The following figure illustrates the main screens of the VoiceRecorder.</p>
+ <p class="figure">Figure: VoiceRecorder screens</p>
+ <p align="center"><img alt="VoiceRecorder screens" src="../images/voicerecorder_sd.png" /> </p>
+
+<p>When the application is opened, it displays the main page with record button at the bottom of the screen.</p>
+
+<p>Tap on the record button at the bottom of the screen to make a voice recording. The application starts recording, and the record button is replaced by the stop button. The recording state is indicated the progress bar at the top of the screen.</p>
+
+<p>Tap on the stop button to stop recording (recording stops automatically after 10 seconds). The application saves the recorded voice and displays a preview page. The stop button is replaced by a play button.</p>
+
+<p>Tap on the play button to play the recorded voice. The application starts playback, and the play button is replaced by the pause button. The playback state is indicated by the progress bar at the top of the screen.</p>
+
+<p>Tap on the pause button to stop playing the recorded voice. The application stops playing, and the pause button is replaced by the play button.</p>
+
+<p>Perform swipe down gesture in order to move back to the main page.</p>
+
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">images/</span></td>
+ <td>This directory contains the images used to create the user interface.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/app.js</span></td>
+ <td>This file contains the code for the main application module used for initialization.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/core/</span></td>
+ <td>This directory contains the core modules. They are used in other parts of the application code. <span style="font-family: Courier New,Courier,monospace">Core.js</span> implements a simple AMD (Asynchronous Module Definition) and specifies module defining. The application uses a simple MV (Model View) architecture.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/helpers/</span></td>
+ <td>This directory contains files for implementing the helper functions.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/models/</span></td>
+ <td>This directory contains files that define an abstract layer over the Camera API.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/views/</span></td>
+ <td>This directory contains the code for handling the UI events for all pages.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lib/tau/</span></td>
+ <td>This directory contains the external libraries (TAU library).</td>
+ </tr>
+ </tbody>
+ </table>
+
+<h2>Implementation</h2>
+
+<p>The application code is separated into modules. Each module specifies its dependent modules.</p>
+<p>The entry point for the application is the <span style="font-family: Courier New,Courier,monospace">js/app.js</span> module. It is loaded first by the <span style="font-family: Courier New,Courier,monospace">js/core/core.js</span> library with the <span style="font-family: Courier New,Courier,monospace">data-main</span> attribute help.</p>
+<pre class="prettyprint">
+<!--index.html-->
+ <script src="./js/core/core.js" data-main="./js/app.js"></script>
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">js/app.js</span> module is responsible for the load view initialization module <span style="font-family: Courier New,Courier,monospace">views/init</span> by adding it as a dependent module in the required array.</p>
+<pre class="prettyprint">
+/* js/app.js */
+define(
+{
+ name: 'app',
+ requires:['views/init'],
+ def: function appInit()
+ {
+ 'use strict';
+
+ function init()
+ {
+ console.log('app::init');
+ }
+
+ return
+ {
+ init: init
+ };
+ }
+});</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">views/init</span> module loads other view modules as dependencies to let them initialize. It handles the Tizen hardware keys, preloads the images used by application, and checks the battery state. It also notifies the other modules about the application visibility changes and application state changes on window blur event.</p>
+<pre class="prettyprint">
+/* js/views/init.js */
+define(
+{
+ name: 'views/init',
+ requires:
+ [
+ 'core/event',
+ 'core/application',
+ 'core/systeminfo',
+ 'views/main',
+ 'views/preview'
+ ],
+ def: function viewsInit(req)
+ {
+ 'use strict';
+
+ var e = req.core.event,
+ app = req.core.application,
+ sysInfo = req.core.systeminfo,
+
+ imagesToPreload =
+ [
+ 'images/button_off.png',
+ 'images/button_on.png',
+ 'images/pause_icon.png',
+ 'images/play_icon.png',
+ 'images/record_icon.png',
+ 'images/stop_icon.png',
+ 'images/microphone_full.jpg',
+ 'images/speaker_full.jpg',
+ 'images/speaker_animate.png'
+ ];
+
+ /**
+ * Handles the tizenhwkey event
+ * @param {event} ev
+ */
+ function onHardwareKeysTap(ev)
+ {
+ var keyName = ev.keyName,
+ page = document.getElementsByClassName('ui-page-active')[0],
+ pageid = (page && page.id) || '';
+
+ if (keyName === 'back')
+ {
+ if (pageid === 'main')
+ {
+ app.exit();
+ }
+ else
+ {
+ history.back();
+ }
+ }
+ }
+
+ /* Pre-loads the images */
+ function preloadImages()
+ {
+ var image = null,
+ i = 0,
+ length = imagesToPreload.length;
+
+ for (i = 0; i < length; i += 1)
+ {
+ image = new window.Image();
+ image.src = imagesToPreload[i];
+ }
+ }
+
+ /* Handles the core.battery.low event */
+ function onLowBattery()
+ {
+ app.exit();
+ }
+
+ /**
+ * Handles the visibilitychange event
+ * @param {event} ev
+ */
+ function onVisibilityChange(ev)
+ {
+ e.fire('visibility.change', ev);
+ }
+
+ /* Handles the window blur event */
+ function onBlur()
+ {
+ e.fire('application.state.background');
+ }
+
+ /* Registers the event listeners */
+ function bindEvents()
+ {
+ document.addEventListener('tizenhwkey', onHardwareKeysTap);
+ document.addEventListener('visibilitychange', onVisibilityChange);
+ window.addEventListener('blur', onBlur);
+ sysInfo.listenBatteryLowState();
+ }
+
+ /* Initializes the module */
+ function init()
+ {
+ preloadImages();
+ sysInfo.checkBatteryLowState();
+ bindEvents();
+ }
+
+ e.listeners(
+ {
+ 'core.systeminfo.battery.low': onLowBattery
+ });
+
+ return
+ {
+ init: init
+ };
+ }
+});</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">views/main</span> module handles most of the application UI interaction. It captures the audio stream and allows the user to record it. To handle this task, it processes the user actions and uses the <span style="font-family: Courier New,Courier,monospace">models/audio</span> module to handle them.</p>
+<p>When the application starts or goes foreground, it obtains the audio stream with the <span style="font-family: Courier New,Courier,monospace">models/steam</span> module help, and initializes the <span style="font-family: Courier New,Courier,monospace">models/audio</span> module which uses Camera API to create the <span style="font-family: Courier New,Courier,monospace">CameraControl</span> object.</p>
+<pre class="prettyprint">
+/* js/views/main.js */
+
+/**
+* Handles the models.stream.ready event
+* @param {event} ev
+*/
+function onStreamReady(ev)
+{
+ stream = ev.detail.stream;
+ a.registerStream(stream);
+}
+
+/* Initializes the stream */
+function initStream()
+{
+ s.getStream();
+}
+
+/**
+* Function called when the application visibility state changes
+* (document.visibilityState changed to 'visible' or 'hidden').
+*/
+function visibilityChange()
+{
+ if (document.visibilityState !== 'visible')
+ {
+ if (a.isReady())
+ {
+ a.stopRecording();
+ a.release();
+ }
+ }
+ else
+ {
+ if (!a.isReady())
+ {
+ initStream();
+ }
+ }
+}
+
+/* Initializes the module */
+function init()
+{
+ initStream();
+}
+
+e.listeners(
+{
+ 'models.stream.ready': onStreamReady,
+ 'views.init.visibility.change': visibilityChange,
+});
+
+/* js/models/stream.js */
+
+/**
+* Fires the models.stream.ready event onGetUserMediaSuccess
+* @param {LocalMediaStream} stream
+*/
+function onUserMediaSuccess(stream)
+{
+ initAttemtps = 0;
+ e.fire('ready', {stream: stream});
+}
+
+function getUserMedia(onUserMediaSuccess, onUserMediaError)
+{
+ navigator.webkitGetUserMedia(
+ {
+ video: false,
+ audio: true
+ },
+ onUserMediaSuccess,
+ onUserMediaError);
+}
+
+function getStream()
+{
+ return getUserMedia(onUserMediaSuccess, onUserMediaError);
+}
+
+
+/* js/models/audio.js */
+
+/**
+* Executes when audio control is created from the stream
+* @param {audioControl} control
+*/
+function onAudioControlCreated(control)
+{
+ audioControl = control;
+ e.fire('ready');
+}
+
+/**
+* Executes on audio control creation error
+* @param {object} error
+*/
+function onAudioControlError(error)
+{
+ console.error(error);
+ e.fire('error', {error: error});
+}
+
+/**
+* Registers the stream that the audio controls
+* @param {LocalMediaStream} mediaStream
+*/
+function registerStream(mediaStream)
+{
+ navigator.tizCamera.createCameraControl(;mediaStream, onAudioControlCreated, onAudioControlError);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">models/audio</span> module encapsulates the Camera API and creates an event-driven interface for the view modules. </p>
+<p>The main functions exposed by this module are:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">registerStream</span> – initializes the module and creates the <span style="font-family: Courier New,Courier,monospace">CameraControl</span> object. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.audio.ready</span> – the module is ready to use.</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.audio.error</span> – an error occurred during initialization.</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">release</span> – releases the CameraControl object. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.audio.release</span> – the camera was released</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">startRecording</span> – starts the recording. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.audio.recording.start</span> – the request is accepted, the recording starts</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.audio.recording.error</span> – an error occurred during initialization of recording</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">stopRecording</span> – stops the recording. Fires the following events:
+<ul><li><span style="font-family: Courier New,Courier,monospace">models.audio.recording.done</span> – an audio file is successfully created (filename in events details). This event is fired also when the time limit for the video recording is exceeded</li>
+<li><span style="font-family: Courier New,Courier,monospace">models.audio.recording.error</span> – an error occurred during ending the recording</li></ul></li>
+<li><span style="font-family: Courier New,Courier,monospace">getRecordingTime</span> – returns the current recording time</li></ul>
+
+<p>The view modules call the <span style="font-family: Courier New,Courier,monospace">models/audio</span> module functions and listen to its events to update the UI.</p>
+
+<p>The voice recording process starts when user touches the record button. The <span style="font-family: Courier New,Courier,monospace">views/main</span> module calls the <span style="font-family: Courier New,Courier,monospace">startRecording</span> function of the <span style="font-family: Courier New,Courier,monospace">models/audio</span> module when a click event is detected.</p>
+<pre class="prettyprint">
+/* js/views/main.js */
+
+/* Starts the audio recording */
+function startRecording()
+{
+ recordingLock = true;
+ a.startRecording();
+ resetRecordingProgress();
+ showRecordingView();
+}
+
+/* Stops the audio recording */
+function stopRecording()
+{
+ recordingLock = true;
+ a.stopRecording();
+}
+
+/* Starts or stops the audio recording */
+function setRecording()
+{
+ if (recording)
+{
+ startRecording();
+ }
+ else
+ {
+ stopRecording();
+ }
+}
+
+/* Handles the click event on record button */
+function onRecordBtnClick()
+{
+ if (recordingLock || document.hidden)
+ {
+ return;
+ }
+ toggleRecording();
+ setRecording();
+}
+
+/* Registers the event listeners */
+function bindEvents()
+{
+ recordBtnMap.addEventListener('click', onRecordBtnClick);
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">models/audio</span> module starts processing the request. It applies the audio file settings (<span style="font-family: Courier New,Courier,monospace">CameraControl.recorder.applySettings</span>) and starts recording (<span style="font-family: Courier New,Courier,monospace">CameraControl.recorder.start</span>). If there is no error, it starts tracing the recording time and notifies the other modules about the finished operation (by <span style="font-family: Courier New,Courier,monospace">models.audio.recording.start</span> event).</p>
+<pre class="prettyprint">
+/* js/models/audio.js */
+
+/* Executes when the recording starts successfully */
+function onRecordingStartSuccess()
+{
+ startTracingAudioLength();
+ e.fire('recording.start');
+}
+
+/**
+* Executes when an error occurs during the recording start
+* @param {object} error
+*/
+function onRecordingStartError(error)
+{
+ busy = false;
+ e.fire('recording.error', {error: error});
+}
+
+/**
+* Executes when an error occurs during the recording start
+* @param {object} error
+*/
+function onRecordingStartError(error)
+{
+ busy = false;
+ e.fire('recording.error', {error: error});
+}
+
+/* Executes when the audio settings are applied */
+function onAudioSettingsApplied()
+{
+ if (!stopRequested)
+ {
+ audioControl.recorder.start(onRecordingStartSuccess, onRecordingStartError);
+ }
+ else
+ {
+ e.fire('recording.cancel');
+ }
+}
+
+/**
+* Starts the audio recording
+* When recording is started successfully, audio.recording.start event
+* is fired. If error occurs, audio.recording.error event is fired.
+* @return {boolean} If process starts true is returned,
+* false otherwise (audio other operation is in progress).
+*/
+function startRecording()
+{
+ var settings = {},
+ fileName = '';
+
+ if (busy)
+ {
+ return false;
+ }
+
+ stopRequested = false;
+ busy = true;
+ fileName = createAudioFileName();
+ audioPath = AUDIO_DESTINATION_DIRECTORY + '/' + fileName;
+
+ settings.fileName = fileName;
+ settings.recordingFormat = getRecordingFormat();
+
+ audioControl.recorder.applySettings(settings, onAudioSettingsApplied, onAudioSettingsError);
+
+ return true;
+}
+</pre>
+
+
+<p>When the user touches the stop button or when the audio file time limit is reached, the <span style="font-family: Courier New,Courier,monospace">stopRecording</span> function of the <span style="font-family: Courier New,Courier,monospace">models/audio</span> module is called. It requests the <span style="font-family: Courier New,Courier,monospace">CameraControl</span> object to stop the current recording and finally fires the <span style="font-family: Courier New,Courier,monospace">models.audio.recording.done</span> event with the audio filename as its details. The <span style="font-family: Courier New,Courier,monospace">views/main module</span> listens to this event and opens a separate view to allow the user to preview the recorded file.</p>
+<pre class="prettyprint">
+/* js/models/audio.js */
+
+/* Executes when the audio recording stops successfully */
+function onAudioRecordingStopSuccess()
+{
+ busy = false;
+ e.fire('recording.done', {path: audioPath});
+ audioRecordingTime = 0;
+}
+
+/**
+* Executes when the audio recording stop fails
+* @param {object} error
+*/
+function onAudioRecordingStopError(error)
+{
+ busy = false;
+ e.fire('recording.error', {error: error});
+ audioRecordingTime = 0;
+}
+
+/**
+* Stops the audio recording
+* When recording is stopped, audio.recording.done event is fired
+* with file path as a data.
+* If error occurs audio.recording error is fired.
+* Recording will stop also if MAX_RECORDING_TIME will be reached.
+*/
+function stopRecording()
+{
+ stopRequested = true;
+
+ if (isRecording())
+ {
+ stopTracingAudioLength();
+ audioControl.recorder.stop(onAudioRecordingStopSuccess, onAudioRecordingStopError);
+ }
+}
+
+/**
+* Checks whether the audio length is greater than the MAX_RECORDING_TIME
+* If it does, recording will be stopped.
+*/
+function checkAudioLength()
+{
+ var currentTime = new Date();
+
+ audioRecordingTime = currentTime - audioRecordingStartTime;
+ if (audioRecordingTime > MAX_RECORDING_TIME)
+ {
+ stopRecording();
+ }
+}
+
+
+/* js/views/main.js */
+
+/**
+* Handles the audio.recording.done event
+* @param {event} ev
+*/
+function onRecordingDone(ev)
+{
+ var path = ev.detail.path;
+
+ removeRecordingInterval();
+ toggleRecording(false);
+ updateRecordingProgress();
+ if (!exitInProgress)
+ {
+ e.fire('show.preview', {audio: path});
+ }
+}
+
+e.listeners(
+{
+ 'models.audio.recording.done': onRecordingDone
+});
+
+
+/* js/views/preview.js */
+
+/**
+* Shows preview page.
+* @param {event} ev
+*/
+function showPreviewPage(ev)
+{
+ tau.changePage('#preview', {transition: 'none'});
+ ev.target.removeEventListener(ev.type, showPreviewPage);
+}
+
+/**
+* Handles the views.settings.show event
+* @param {event} ev
+*/
+function show(ev)
+{
+ var detail = ev.detail;
+
+ prevProgressVal.style.width = '0';
+ audioPlayState = false;
+ audio.src = detail.audio;
+ audio.addEventListener('loadeddata', showPreviewPage);
+}
+
+e.listeners(
+{
+ 'views.main.show.preview': show
+
+});
+</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
--- /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>WearableUIComponents Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.html">Tizen Advanced UI Framework</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>WearableUIComponents Sample Overview</h1>
+ <p>The WearableUIComponents sample application demonstrates how you can implement UI components, such as header, footer, buttons, and lists, to add variety to your application.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+ <p>The following figure illustrates the screens of the WearableUIComponents.</p>
+ <p class="figure">Figure: WearableUIComponents screens</p>
+ <p align="center"><img alt="WearableUIComponents screens" src="../images/wearableuicomponents_sd.png" /> </p>
+ <p>The application opens with the Wearable UI screen, where you can select the basic UI or the more advanced extra UI to see a list of various UI components. Click the list items to view individual screens that demonstrate the selected UI component's functionality.</p>
+
+ <p>To return to the previous screen, flick down on the screen.</p>
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">app.js</span></td>
+ <td>This file defines the hardware key events for the application.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">basic/</span></td>
+ <td>This directory contains files for implementing the individual basic UI component screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">extra/</span></td>
+ <td>This directory contains files for implementing the individual extra UI component screens.</td>
+ </tr>
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+
+
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">lowBatteryCheck.js</span></td>
+ <td>This file contains the code for exiting the application when the device battery is low.</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>WorldClock Sample Overview</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">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">HTML5 Canvas Guide</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas">HTML5 Canvas Element API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#canvas2d">HTML Canvas 2D Context API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#webstorage">Web Storage API</a></li>
+ <li><a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time API</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+ <h1>WorldClock Sample Overview</h1>
+ <p>The WorldClock sample application demonstrates how you can create a world clock using the Time and Web Storage APIs.</p>
+<p>For information on creating the sample application project in the IDE, see <a href="../cover_page.htm#create">Creating Sample Applications</a>.</p>
+<p>The following figure illustrates the main screens of the WorldClock.</p>
+ <p class="figure">Figure: WorldClock screens</p>
+ <p align="center"><img alt="WorldClock screens" src="../images/worldclock_sd.png" /> </p>
+ <p>The application opens with a main screen that shows the current local time with a world map on the background.</p>
+
+ <p>To select the cities whose time is displayed, two-finger tap the main screen. In the Emulator, press the <strong>CTRL</strong> key and click twice on the Emulator screen. </p>
+
+ <p>The selected cities are indicated with colored marks on the map and correspondingly colored hour hands. The data for the selected cities is stored in the Web storage, so that the same settings can be applied when the application restarts.</p>
+
+ <h2 id="source" name="source">Source Files</h2>
+ <p>You can create and view the sample application project including the source files in the IDE.</p>
+ <table border="1">
+ <tbody>
+ <tr>
+ <th>File name</th>
+ <th>Description</th>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">config.xml</span></td>
+ <td>This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">css/style.css</span></td>
+ <td>This file contains the CSS styling for the application UI.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">index.html</span></td>
+ <td>This is a starting file from which the application starts loading. It contains the layout of the application screens.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/data.js</span></td>
+ <td>This file contains the data array of the location and time zone information of the available countries.</td>
+ </tr>
+ <tr>
+ <td><span style="font-family: Courier New,Courier,monospace">js/main.js</span></td>
+ <td>This file contains the code for handling the main functionalities of the application.</td>
+ </tr>
+ </tbody>
+ </table>
+
+
+<h2>Implementation</h2>
+<p>The <span style="font-family: Courier New,Courier,monospace">setSize()</span> function dynamically calculates and sets the size and margin of the canvas according to the screen size of different devices.</p>
+<pre class="prettyprint">
+function setSize()
+{
+ var pageWatch = document.getElementById('pageWatch'),
+ divTable = document.getElementById('selectTable');
+
+ pageWatch.style.width = document.body.clientWidth + 'px';
+ pageWatch.style.height = document.body.clientHeight + 'px';
+ divTable.style.paddingTop = ((document.body.clientHeight / 2) - (TABLE_HEIGHT / 2)) + 'px';
+}</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">drawWatch()</span> function draws the layout and the content of the WorldClock.</p>
+ <p>The <span style="font-family: Courier New,Courier,monospace">getCurrentDateTime()</span> function of the <a href="../../../org.tizen.web.apireference/html/device_api/wearable/tizen/time.html">Time</a> API returns the time data of the current local time. The <span style="font-family: Courier New,Courier,monospace">toTimezone(tzid)</span> function returns the time data converted to a given time zone.</p>
+ <pre class="prettyprint">
+function drawWatch()
+{
+ var i = 0,
+ date = tizen.time.getCurrentDateTime(),
+ hour = date.getHours(),
+ minute = date.getMinutes(),
+ second = date.getSeconds();
+
+ /* Draw the layout of the clock, including the world map on the background */
+ drawWatchLayout();
+
+ /* Draw the minute hand and the hour hand of the current time of the user's default city */
+ drawWatchContentDefault(hour, minute, second, 0, 0);
+
+ /* Draw the colored hour hands for corresponding cities */
+ for (i = 0; i < colorCity.length; i++)
+ {
+ if (cityArray[colorCity[i].cityId].tzid !== 'NONE')
+ {
+ hour = tizen.time.getCurrentDateTime().toTimezone(cityArray[colorCity[i].cityId].tzid).getHours();
+ drawWatchContentCity(hour, minute, colorCity[i].colorCode,
+ cityArray[colorCity[i].cityId].mapX * (document.body.clientWidth / 360),
+ cityArray[colorCity[i].cityId].mapY * (document.body.clientWidth / 360));
+ }
+ }
+}
+</pre>
+<p>To ensure that the hands of the clock move with the time, the <span style="font-family: Courier New,Courier,monospace">drawWatch()</span> function is called repeatedly every 500 milliseconds as defined in the <span style="font-family: Courier New,Courier,monospace">setInterval()</span> function.</p>
+<pre class="prettyprint">
+setInterval(function() {drawWatch();}, 500);
+</pre>
+<p>The event listener with the <span style="font-family: Courier New,Courier,monospace">'touchstart'</span> event determines the number of touch points the user places. When a two-finger tap event is received, the page for the city selection is displayed.</p>
+<pre class="prettyprint">
+document.getElementById('myCanvas').addEventListener('touchstart', function(ev)
+{
+ touch = ev.touches[0] || ev.changedTouches[0];
+ touchList = ev.touches;
+
+ if (touchList.length === 2)
+ {
+ displayCity();
+ }
+});
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">localStorage</span> object stores the data for the selected cities. This way the data is not lost when the application is terminated, and it is available again when the application restarts.</p>
+<pre class="prettyprint">
+document.getElementById('btnSave').addEventListener('click', function()
+{
+ for (i = 0; i < colorCity.length; i++)
+ {
+ localStorage.setItem(colorCity[i].colorCode, colorCity[i].cityId);
+ }
+ displayWatch();
+ drawWatch();
+});
+</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
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<?NLS TYPE="org.eclipse.help.toc"?>
+
+
+<toc label="Sample Descriptions" topic="html/cover_page.htm">
+ <topic href="html/sd_w.htm" label="Web Application">
+ <topic href="html/mobile_w/sd_mw.htm" label="Mobile Web">
+ <topic href="html/mobile_w/appcalleecaller_mw.htm" label="AppCaller and AppCallee"></topic>
+ <topic href="html/mobile_w/archivemanager_mw.htm" label="ArchiveManager"></topic>
+ <topic href="html/mobile_w/bluetoothchat_mw.htm" label="BluetoothChat"></topic>
+ <topic href="html/mobile_w/calculator_mw.htm" label="Calculator"></topic>
+ <topic href="html/mobile_w/calendar_mw.htm" label="Calendar"></topic>
+ <topic href="html/mobile_w/calllog_mw.htm" label="CallLog"></topic>
+ <topic href="html/mobile_w/chatter_mw.htm" label="Chatter"></topic>
+ <topic href="html/mobile_w/compass_mw.htm" label="Compass"></topic>
+ <topic href="html/mobile_w/contactlist_mw.htm" label="ContactList"></topic>
+ <topic href="html/mobile_w/contactsexchanger_mw.htm" label="ContactsExchanger"></topic>
+ <topic href="html/mobile_w/downloadmanager_mw.htm" label="DownloadManager"></topic>
+ <topic href="html/mobile_w/eventmanager_mw.htm" label="EventManager"></topic>
+ <topic href="html/mobile_w/exerciseplanner_mw.htm" label="ExcercisePlanner"></topic>
+ <topic href="html/mobile_w/filemanager_mw.htm" label="FileManager"></topic>
+ <topic href="html/mobile_w/hellotizen_mw.htm" label="HelloTizen"></topic>
+ <topic href="html/mobile_w/mediacontent_mw.htm" label="MediaContent"></topic>
+ <topic href="html/mobile_w/moneybook_mw.htm" label="MoneyBook"></topic>
+ <topic href="html/mobile_w/multiprocess_hybrid_package_mw.htm" label="Multi-project Hybrid Application">
+ <topic href="html/mobile_w/hybridwebapp_mw.htm" label="HybridWebApp"></topic>
+ </topic>
+ <topic href="html/mobile_w/piano_mw.htm" label="Piano"></topic>
+ <topic href="html/mobile_w/selfcamera_mw.htm" label="SelfCamera"></topic>
+ <topic href="html/mobile_w/sensorball_mw.htm" label="SensorBall"></topic>
+ <topic href="html/mobile_w/systeminfo_mw.htm" label="Systeminfo"></topic>
+ <topic href="html/mobile_w/winset_mw.htm" label="TizenWinset"></topic>
+ <topic href="html/mobile_w/touchpaint_mw.htm" label="TouchPaint"></topic>
+
+ </topic>
+ <topic href="html/wearable_w/sd_ww.htm" label="Wearable Web">
+ <topic href="html/wearable_w/altimeter_ww.htm" label="Altimeter"></topic>
+ <topic href="html/wearable_w/analogwatch_ww.htm" label="AnalogWatch"></topic>
+ <topic href="html/wearable_w/appcalleecaller_ww.htm" label="AppCaller and AppCallee"></topic>
+ <topic href="html/wearable_w/basicwatch_ww.htm" label="BasicWatch"></topic>
+ <topic href="html/wearable_w/calculator_ww.htm" label="Calculator"></topic>
+ <topic href="html/wearable_w/calendar_ww.htm" label="Calendar"></topic>
+ <topic href="html/wearable_w/camera_ww.htm" label="Camera"></topic>
+ <topic href="html/wearable_w/compass_ww.htm" label="Compass"></topic>
+ <topic href="html/wearable_w/digitalwatch_ww.htm" label="DigitalWatch"></topic>
+ <topic href="html/wearable_w/hellotizen_ww.htm" label="HelloTizen"></topic>
+ <topic href="html/wearable_w/minigallery_ww.htm" label="MiniGallery"></topic>
+ <topic href="html/wearable_w/moneybook_ww.htm" label="MoneyBook"></topic>
+ <topic href="html/wearable_w/newsfeed_ww.htm" label="NewsFeed"></topic>
+ <topic href="html/wearable_w/sensorball_ww.htm" label="SensorBall"></topic>
+ <topic href="html/wearable_w/spinning_arrow_ww.htm" label="SpinningArrow"></topic>
+ <topic href="html/wearable_w/stopwatch_ww.htm" label="StopWatch"></topic>
+ <topic href="html/wearable_w/sunburnmonitor_ww.htm" label="SunburnMonitor"></topic>
+ <topic href="html/wearable_w/touchpaint_ww.htm" label="TouchPaint"></topic>
+ <topic href="html/wearable_w/voicerecorder_ww.htm" label="VoiceRecorder"></topic>
+ <topic href="html/wearable_w/wearableuicomponents_ww.htm" label="WearableUIComponents"></topic>
+ <topic href="html/wearable_w/worldclock_ww.htm" label="WorldClock"></topic>
+ </topic>
+ </topic>
+ <topic href="html/sd_n.htm" label="Native Application">
+ <topic href="html/mobile_n/sd_mn.htm" label="Mobile Native">
+ <topic href="html/mobile_n/bundle_sd_mn.htm" label="Bundle"></topic>
+ <topic href="html/mobile_n/calculator_sd_mn.htm" label="Calculator"></topic>
+ <topic href="html/mobile_n/contacts_sd_mn.htm" label="Contacts"></topic>
+ <topic href="html/mobile_n/evas_gl_sd_mn.htm" label="Evas_GL"></topic>
+ <topic href="html/mobile_n/file_manager_sd_mn.htm" label="File Manager"></topic>
+ <topic href="html/mobile_n/glview11_cube_sd_mn.htm" label="GLView11Cube"></topic>
+ <topic href="html/mobile_n/glview_cube_sd_mn.htm" label="GLViewCube"></topic>
+ <topic href="html/mobile_n/glview_shader_sd_mn.htm" label="GLViewShader"></topic>
+ <!--
+ <topic href="html/mobile_n/gps_consumer_sd_mn.htm" label="GPS Consumer"></topic>
+ <topic href="html/mobile_n/gps_service_sd_mn.htm" label="GPS Service"></topic>
+ -->
+ <topic href="html/mobile_n/hybridservice_sd_mn.htm" label="HybridServiceApp"></topic>
+ <topic href="html/mobile_n/mediaapp_sd_mn.htm" label="Media App"></topic>
+ <topic href="html/mobile_n/notificationmanager_sd_mn.htm" label="Notification Manager"></topic>
+ <topic href="html/mobile_n/paint_sd_mn.htm" label="Paint"></topic>
+ <topic href="html/mobile_n/pedometer_sd_mn.htm" label="Pedometer"></topic>
+ <topic href="html/mobile_n/piano_sd_mn.htm" label="Piano"></topic>
+ <topic href="html/mobile_n/preference_sd_mn.htm" label="Preference"></topic>
+ <topic href="html/mobile_n/scheduler_sd_mn.htm" label="Scheduler"></topic>
+ <topic href="html/mobile_n/scroller_index_sd_mn.htm" label="Scroller Index"></topic>
+ <topic href="html/mobile_n/selfcamera_sd_mn.htm" label="SelfCamera"></topic>
+ <topic href="html/mobile_n/sensorapp_sd_mn.htm" label="SensorApp"></topic>
+ <topic href="html/mobile_n/simple_home_sd_mn.htm" label="Simple Homescreen"></topic>
+ <topic href="html/mobile_n/taskmanager_sd_mn.htm" label="Taskmanager"></topic>
+ <topic href="html/mobile_n/ui_components_sd_mn.htm" label="UI Components"></topic>
+ <topic href="html/mobile_n/ui_alignment_sd_mn.htm" label="[UI Sample] Alignment"></topic>
+ <topic href="html/mobile_n/ui_animation_sd_mn.htm" label="[UI Sample] Animation"></topic>
+ <topic href="html/mobile_n/ui_animator_sd_mn.htm" label="[UI Sample] Animator"></topic>
+ <topic href="html/mobile_n/ui_app_store_sd_mn.htm" label="[UI Sample] ApplicationStore"></topic>
+ <topic href="html/mobile_n/ui_box_sd_mn.htm" label="[UI Sample] Box"></topic>
+ <topic href="html/mobile_n/ui_calculator_sd_mn.htm" label="[UI Sample] Calculator"></topic>
+ <topic href="html/mobile_n/ui_clock_sd_mn.htm" label="[UI Sample] Clock"></topic>
+ <topic href="html/mobile_n/ui_ecore_thread_1_sd_mn.htm" label="[UI Sample] Ecore Thread 1"></topic>
+ <topic href="html/mobile_n/ui_ecore_thread_2_sd_mn.htm" label="[UI Sample] Ecore Thread 2"></topic>
+ <topic href="html/mobile_n/ui_ecore_thread_3_sd_mn.htm" label="[UI Sample] Ecore Thread 3"></topic>
+ <topic href="html/mobile_n/ui_ecore_thread_4_sd_mn.htm" label="[UI Sample] Ecore Thread 4"></topic>
+ <topic href="html/mobile_n/ui_ecore_thread_5_sd_mn.htm" label="[UI Sample] Ecore Thread 5"></topic>
+ <topic href="html/mobile_n/ui_ecoreevent_sd_mn.htm" label="[UI Sample] EcoreEvent"></topic>
+ <topic href="html/mobile_n/ui_edc_map_sd_mn.htm" label="[UI Sample] EDC Map"></topic>
+ <topic href="html/mobile_n/ui_edc_format_sd_mn.htm" label="[UI Sample] EDCformat"></topic>
+ <topic href="html/mobile_n/ui_elmtransit_sd_mn.htm" label="[UI Sample] Elm Transit"></topic>
+ <topic href="html/mobile_n/ui_email_sd_mn.htm" label="[UI Sample] Email"></topic>
+ <topic href="html/mobile_n/ui_evas_map_sd_mn.htm" label="[UI Sample] Evas Map"></topic>
+ <topic href="html/mobile_n/ui_evas_map_mapping_sd_mn.htm" label="[UI Sample] Evas Map Mapping"></topic>
+ <topic href="html/mobile_n/ui_evas_map_rotation_sd_mn.htm" label="[UI Sample] Evas Map Rotation"></topic>
+ <topic href="html/mobile_n/ui_evasevent_sd_mn.htm" label="[UI Sample] Evas Event"></topic>
+ <topic href="html/mobile_n/ui_gallery_sd_mn.htm" label="[UI Sample] Gallery"></topic>
+ <topic href="html/mobile_n/ui_idler_sd_mn.htm" label="[UI Sample] Idler"></topic>
+ <topic href="html/mobile_n/ui_image_sd_mn.htm" label="[UI Sample] Image"></topic>
+ <topic href="html/mobile_n/ui_inlist_sd_mn.htm" label="[UI Sample] InList"></topic>
+ <topic href="html/mobile_n/ui_job_sd_mn.htm" label="[UI Sample] Job"></topic>
+ <topic href="html/mobile_n/ui_language_change_sd_mn.htm" label="[UI Sample] LanguageChange"></topic>
+ <topic href="html/mobile_n/ui_layout_samples_sd_mn.htm" label="[UI Sample] LayoutSample"></topic>
+ <topic href="html/mobile_n/ui_layout_signal_sd_mn.htm" label="[UI Sample] LayoutSignal"></topic>
+ <topic href="html/mobile_n/ui_list_sd_mn.htm" label="[UI Sample] List"></topic>
+ <topic href="html/mobile_n/ui_message_bubble_sd_mn.htm" label="[UI Sample] MessageBubble"></topic>
+ <topic href="html/mobile_n/ui_proxy_object_sd_mn.htm" label="[UI Sample] Proxy Object"></topic>
+ <topic href="html/mobile_n/ui_rectangle_sd_mn.htm" label="[UI Sample] Rectangle"></topic>
+ <topic href="html/mobile_n/ui_relative_sd_mn.htm" label="[UI Sample] RelativePositioning"></topic>
+ <topic href="html/mobile_n/ui_sns_sd_mn.htm" label="[UI Sample] SNS"></topic>
+ <topic href="html/mobile_n/ui_setting_sd_mn.htm" label="[UI Sample] Setting"></topic>
+ <topic href="html/mobile_n/ui_stringshare_sd_mn.htm" label="[UI Sample] StringShare"></topic>
+ <topic href="html/mobile_n/ui_theme_extension_sd_mn.htm" label="[UI Sample] ThemeExtension"></topic>
+ <topic href="html/mobile_n/ui_timer_sd_mn.htm" label="[UI Sample] Timer"></topic>
+ </topic>
+ <topic href="html/wearable_n/sd_wn.htm" label="Wearable Native">
+ <topic href="html/wearable_n/circleuicomponents_sd_wn.htm" label="(Circle) UI Components"></topic>
+ <topic href="html/wearable_n/rectuicomponents_sd_wn.htm" label="(Rectangle) UI Components"></topic>
+ <topic href="html/wearable_n/circleemail_sd_wn.htm" label="(Circle) Email"></topic>
+ <topic href="html/wearable_n/circlesettingtime_sd_wn.htm" label="(Circle) Setting Time"></topic>
+ <topic href="html/wearable_n/circlesettings_sd_wn.htm" label="(Circle) Settings"></topic>
+ <topic href="html/wearable_n/rectemail_sd_wn.htm" label="(Rectangle) Email"></topic>
+ <topic href="html/wearable_n/rectsettings_sd_wn.htm" label="(Rectangle) Settings"></topic>
+ <topic href="html/wearable_n/rectuidialer_sd_wn.htm" label="(Rectangle) UI Dialer"></topic>
+ </topic>
+ </topic>
+</toc>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.0"?>
+
+<plugin>
+ <extension point="org.eclipse.help.toc">
+ <toc file="index.xml" primary="true" />
+ </extension>
+</plugin>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
- <name>org.tizen.tutorials_2.3.0</name>
+ <name>org.tizen.tutorials_2.4.0</name>
<comment></comment>
<projects>
</projects>
<li><a href="web/tizen/communication/task_bluetoothchat_w.htm">Task: Bluetooth Chat</a></li>
</ul>
</li>
+ <li><a href="web/tizen/communication/bluetooth_le_tutorial_w.htm">Bluetooth Low Energy</a></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>
<li><a href="web/tizen/social/contact_tutorial_w.htm">Contact</a></li>
<li><a href="web/tizen/social/data_sync_tutorial_w.htm">Data Synchronization</a></li>
</ul>
- </li>
- <li><a href="web/tizen/uifw/uifw_tutorial_w.htm">Web UIFW</a></li>
+ </li>
+
<li><a href="web/tizen/service/service_tutorial_w.htm">Service Application</a></li>
</ul>
</li>
<h2><a href="native/tutorials_n.htm">Native Application</a></h2>
<ul>
+ <li><a href="native/account/account_tutorials_n.htm">Account</a>
+ <ul>
+ <li><a href="native/account/oauth2_tutorial_n.htm">oauth2</a></li>
+ <li><a href="native/account/sync_manager_tutorial_n.htm">Sync Manager</a></li>
+ </ul>
+ </li>
<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/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>
+ <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>
<li><a href="native/graphics/tbm_tutorial_n.htm">TBM Surface</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><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/media_vision_tutorial_n.htm">Media Vision</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/sound_manager_tutorial_n.htm">Sound Manager</a></li>
<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>
+ </ul>
</li>
<li><a href="native/network/network_tutorials_n.htm">Network</a>
<ul>
<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/service_adaptor_tutorial_n.htm">Service Adaptor</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>
<li><a href="native/system/sysinfo_tutorial_n.htm">System Information</a></li>
<li><a href="native/system/system_setting_tutorial_n.htm">System Settings</a></li>
<li><a href="native/system/storage_tutorial_n.htm">Storage</a></li>
-
+ <li><a href="native/system/t-trace_tutorial_n.htm">T-trace</a></li>
+ </ul>
+ </li>
+ <li><a href="native/telephony/telephony_tutorials_n.htm">Telephony</a>
+ <ul>
+ <li><a href="native/telephony/phonenumber_util_tutorial_n.htm">Phonenumber utils</a></li>
+ <li><a href="native/telephony/telephony_info_tutorial_n.htm">Telephony Information</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 Framework</a>
<ul>
<li><a href="native/ui/efl_tutorial_n.htm">EFL</a></li>
</li>
<li><a href="native/ui/efl_extension_tutorial_n.htm">Efl Extension</a></li>
<li><a href="native/ui/font_settings_tutorial_n.htm">Font Setting</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>
+ <li><a href="native/ui/eom_tutorial_n.htm">External Output Manager</a></li>
</ul>
</li>
<li><a href="native/uix/uix_tutorials_n.htm">UIX</a>
<ul>
<li><a href="native/uix/tts_tutorial_n.htm">TTS</a></li>
<li><a href="native/uix/stt_tutorial_n.htm">STT</a></li>
+ <li><a href="native/uix/voicecontrol_tutorials_n.htm">Voice Control</a>
+ <ul>
+ <li><a href="native/uix/voicecontrol_tutorial_n.htm">Voice control</a></li>
+ <li><a href="native/uix/voicecontrol_elm_tutorial_n.htm">Voice control elementary</a></li>
+ </ul>
+ </li>
+ <li><a href="native/uix/ime_tutorial_n.htm">Input Method</a></li>
</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>
+ <li><a href="native/web/web_tutorials_n.htm">Web</a></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>Account: Managing Account Data</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.guides/html/native/account/account_guide_n.htm">Account Guides</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+ <h1>Account: Managing Account Data</h1>
+
+ <p>The account tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
+ <ul>
+ <li><a href="oauth2_tutorial_n.htm">oauth2: Using the Authorization Framework</a>
+ <p>Demonstrates how you can obtain access tokens using oauth2 authorization.</p></li>
+ </ul>
+
+ <p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</p>
+ <ul>
+ <li><a href="sync_manager_tutorial_n.htm">Sync Manager: Scheduling for Application Data Syncing</a>
+ <p>Demonstrates how you can receive notifications about syncing operations between a server and the device.</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 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>OAuth2: Using the Authorization Framework</title>
+ <title>oauth2: Using the Authorization Framework</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#mgr_init">Initializing the OAuth2 Manager</a></li>
- <li><a href="#request">Creating and Managing an OAuth2 Request</a></li>
+ <li><a href="#mgr_init">Initializing the oauth2 Manager</a></li>
+ <li><a href="#request">Creating and Managing an oauth2 Request</a></li>
<li><a href="#token">Requesting the Server for a Grant or Token</a></li>
- <li><a href="#response">Managing an OAuth2 Response</a></li>
+ <li><a href="#response">Managing an oauth2 Response</a></li>
<li><a href="#des_mgr">Releasing the Resources</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <li><a href="../../../../org.tizen.guides/html/native/oauth2/oauth2_guide_n.htm">OAuth2 Guide</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>
+ <li><a href="../../../../org.tizen.guides/html/native/account/oauth2_n.htm">oauth2 Guide</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></div>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>OAuth2: Using the Authorization Framework</h1>
+<h1>oauth2: Using the Authorization Framework</h1>
-<p>This tutorial demonstrates how you can create a request for OAuth2 authentication and authorization grant from a server, obtain an access token using the manager handle, and retrieve this info from the response handle returned in the callback.</p>
+<p>This tutorial demonstrates how you can create a request for oauth2 authentication and authorization grant from a server, obtain an access token using the manager handle, and retrieve this info from the response handle returned in the callback.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the OAuth2 API basics by learning about:</p>
+<p>Become familiar with the oauth2 API basics by learning about:</p>
<ul>
- <li><a href="#mgr_init">Initializing the OAuth2 Manager</a>
- <p>Initialize the OAuth2 manager for use.</p></li>
+ <li><a href="#mgr_init">Initializing the oauth2 Manager</a>
+ <p>Initialize the oauth2 manager for use.</p></li>
- <li><a href="#request">Creating and Managing an OAuth2 Request</a>
- <p>Create a request handle, set and retrieve request parameters, and pass the request to the OAuth2 manager to request a token.</p></li>
+ <li><a href="#request">Creating and Managing an oauth2 Request</a>
+ <p>Create a request handle, set and retrieve request parameters, and pass the request to the oauth2 manager to request a token.</p></li>
<li><a href="#token">Requesting the Server for a Grant or Token</a>
- <p>Request the authorization server for the required OAuth2 grant or token using various methods and grant types.</p></li>
+ <p>Request the authorization server for the required oauth2 grant or token using various methods and grant types.</p></li>
- <li><a href="#response">Managing an OAuth2 Response</a>
- <p>Obtain information from the OAuth2 response handle returned in a callback.</p></li>
+ <li><a href="#response">Managing an oauth2 Response</a>
+ <p>Obtain information from the oauth2 response handle returned in a callback.</p></li>
<li><a href="#des_mgr">Releasing the Resources</a>
- <p>Destroy the OAuth2 manager handle.</p></li>
+ <p>Destroy the oauth2 manager handle.</p></li>
</ul>
-<h2 id="mgr_init" name="mgr_init">Initializing the OAuth2 Manager</h2>
+<h2 id="mgr_init" name="mgr_init">Initializing the oauth2 Manager</h2>
-<p>To initialize the OAuth2 manager:</p>
+<p>To initialize the oauth2 manager:</p>
<ol>
-<li> <p>To use the functions and data types of the OAuth2 Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MANAGER__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MANAGER__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><oauth2.h></span> header file in your application:</p>
+<li> <p>To use the functions and data types of the oauth2 API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><oauth2.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <oauth2.h>
</pre></li>
</pre></li>
<li><p>Set up the required privileges for your application:</p>
-<p>To use APIs for OAuth2 authentication and connecting to the Web servers, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege to the manifest file.</p></li>
+<p>To use APIs for oauth2 authentication and connecting to the Web servers, add the <span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/internet</span> privilege to the manifest file.</p></li>
</ol>
- <h2 id="request" name="request">Creating and Managing an OAuth2 Request</h2>
+ <h2 id="request" name="request">Creating and Managing an oauth2 Request</h2>
-<p>To make a request with the OAuth2 manager:</p>
+<p>To make a request with the oauth2 manager:</p>
<ol>
-<li>Create an <span style="font-family: Courier New,Courier,monospace;">oauth2_request_h</span> request handle and use the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_create()</span> function to create the OAuth2 request:
+<li>Create an <span style="font-family: Courier New,Courier,monospace;">oauth2_request_h</span> request handle and use the <span style="font-family: Courier New,Courier,monospace;">oauth2_request_create()</span> function to create the oauth2 request:
<pre class="prettyprint">
oauth2_request_h request = NULL;
ret = oauth2_request_create(&request);
</pre>
</li>
-<li>Set the parameters needed for making an OAuth2 request.
+<li>Set the parameters needed for making an oauth2 request.
<p>You can set various request properties, such as end points for authentication and token, grant type, user name, and password.</p>
<pre class="prettyprint">
ret = oauth2_request_create(&request);
// Set all the required parameters needed as per the Web server's
- // OAuth2 authentication policy before making the request
+ // oauth2 authentication policy before making the request
// Set the response_type as "code"
ret = oauth2_request_set_response_type(request, OAUTH2_RESPONSE_TYPE_CODE);
ret = oauth2_request_create(&request);
// Set all the required parameters needed as per the Web server's
- // OAuth2 authentication policy before making the request
+ // oauth2 authentication policy before making the request
ret = oauth2_request_set_auth_end_point_url(request, "https://login.live.com/oauth20_authorize.srf");
ret = oauth2_request_create(&request);
// Set all the required parameters needed as per the Web server's
- // OAuth2 authentication policy before making the request
+ // oauth2 authentication policy before making the request
ret = oauth2_request_set_auth_end_point_url(request, "https://www.facebook.com/dialog/oauth");
int ret = oauth2_request_create(&request);
// Set all the required parameters needed as per the Web server's
- // OAuth2 authentication policy before making the request
+ // oauth2 authentication policy before making the request
ret = oauth2_request_set_refresh_token_url(request, "https://www.googleapis.com/oauth2/v3/token");
ret = oauth2_request_create(&request);
// Set all the required parameters needed as per the Web server's
- // OAuth2 authentication policy before making the request
+ // oauth2 authentication policy before making the request
ret = oauth2_request_set_auth_end_point_url(request, "https://accounts.google.com/o/oauth2/auth");
</li>
</ul>
-<h2 id="response" name="response" class="items-tit-h2">Managing an OAuth2 Response</h2>
+<h2 id="response" name="response" class="items-tit-h2">Managing an oauth2 Response</h2>
<p>The response from the server is bundled in the <span style="font-family: Courier New,Courier,monospace;">oauth2_response_h</span> handle and returned in the callbacks, from which all the various response parameters can be obtained.</p>
-<p>To manage the OAuth2 response:</p>
+<p>To manage the oauth2 response:</p>
<ol>
<li>Retrieve the response parameters from the response handle.
<h2 id="des_mgr" name="des_mgr">Releasing the Resources</h2>
-<p>To free the OAuth2 manager handle, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_destroy()</span> function:</p>
+<p>To free the oauth2 manager handle, use the <span style="font-family: Courier New,Courier,monospace;">oauth2_manager_destroy()</span> function:</p>
<pre class="prettyprint">
ret = oauth2_manager_destroy(mgr);
<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 Sync-related Activities</title>
+ <title>Sync Manager: Scheduling for Application Data Syncing</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<ul class="toc">
<li><a href="#on_demand_sync">Initializing the On-demand Sync</a></li>
<li><a href="#periodic_sync">Initializing the Periodic Sync</a></li>
+ <li>Sync adapter
+ <ul class="toc">
+ <li><a href="#set_callback">Setting the Callback Functions</a></li>
+ </ul>
+ </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.guides/html/native/account/sync_manager_n.htm">Sync Manager Guide</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 Sync-related Activities</h1>
+<h1>Sync Manager: Scheduling for Application Data Syncing</h1>
<p>This tutorial demonstrates how you can manage the data synchronizing schedule and control the sync operations manually or periodically.</p>
<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>
+ <li>Sync adapter
+ <ul>
+ <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>
+ </li>
</ul>
<h2 id="on_demand_sync" name="on_demand_sync">Initializing the On-demand Sync</h2>
</pre>
</li>
-<li><a href="sync_adapter_tutorial_n.htm">Set the sync adapter callbacks</a>:
+<li><a href="#set_callback">Set the sync adapter callbacks</a>:
<pre class="prettyprint">
#include <sync_adapter.h>
</pre>
</li>
-<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.
+<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">
<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 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.
+<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);
account_connect();
-account_delete_from_db_by_package_name("data-sync-module");
+account_delete_from_db_by_package_name("data-sync-module");
account_destroy(account);
account_disconnect();
</pre>
</li>
</ol>
-
+
<h2 id="periodic_sync" name="periodic_sync">Initializing the Periodic Sync</h2>
<p>To inform the service application of a periodical sync operation and its sync interval:</p>
</pre>
</li>
-<li><a href="sync_adapter_tutorial_n.htm">Set the sync adapter callbacks</a>:
+<li><a href="#set_callback">Set the sync adapter callbacks</a>:
<pre class="prettyprint">
#include <sync_adapter.h>
</pre>
</li>
-<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.
+<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">
</li>
</ol>
+<h2 id="set_callback" name="set_callback">Setting the Callback Functions</h2>
+
+<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 <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 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";
+result = sync_adapter_init(capability);
+</pre>
+<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>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 <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)
+{
+ // Start the sync operation
+}
+
+int on_cancel_cb(account_h account, const char *capability)
+{
+ // Cancel the sync operation
+}
+</pre>
+</li>
+
+<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>
+
+</ol>
<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="#manage_context">Managing the Application Context</a></li>
+ <li><a href="#filter">Getting Information on Filtered Applications</a></li>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<p>Become familiar with the Application Manager API basics by learning about:</p>
<ul>
<li><a href="#manage_context">Managing the Application Context</a> <p>Retrieve the application context and operate on it.</p></li>
+ <li><a href="#filter">Getting Information on Filtered Applications</a> <p>Retrieve information on filtered applications.</p></li>
</ul>
-
<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>
if (app_context)
{
ret = app_context_destroy(app_context);
- if (APP_MANAGER_ERROR_NONE != ret) // Error occurred
+ if (APP_MANAGER_ERROR_NONE != ret) // Error handling
app_context = NULL;
}
</pre> </li>
</ol>
+ <h2 id="filter" name="filter">Getting Information on Filtered Applications</h2>
+<p>To get information on filtered applications:</p>
+
+<ol>
+<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>
+
+<li>Create the <span style="font-family: Courier New,Courier,monospace">app_info_filter_h</span> handle using the <span style="font-family: Courier New,Courier,monospace">app_info_filter_create()</span> function:
+
+<pre class="prettyprint">
+app_info_filter_h app_info_filter = NULL;
+
+int ret = app_info_filter_create(&app_info_filter);
+</pre></li>
+
+<li>Add filter rules:
+
+<pre class="prettyprint">
+ret = app_info_filter_add_string(app_info_filter, PACKAGE_INFO_PROP_APP_TYPE, "capp");
+</pre></li>
+
+<li>Use the <span style="font-family: Courier New,Courier,monospace">app_info_filter_cb()</span> callback to retrieve all filtered applications and print their information:
+
+<pre class="prettyprint">
+void app_info_filter_cb(app_info_filter_h app_info, void *user_data)
+{
+ int ret;
+
+ char *app_id = NULL;
+
+ app_info_get_app_id(app_info, &app_id);
+
+ dlog_print(DLOG_INFO, TAG, "app_id \t= [%s]\n", app_id);
+
+ free(app_id);
+}
+
+ret = app_info_filter_foreach_appinfo(app_info_filter_cb, NULL);
+if (ret != APP_MANAGER_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, TAG, "foreach_app_info_filter error : %d", ret);
+}
+</pre></li>
+<li>When you no longer need the filter, call the <span style="font-family: Courier New,Courier,monospace">app_info_filter_destroy()</span> function to remove the handle and release all resources:
+
+<pre class="prettyprint">
+if (app_info_filter_h)
+{
+ ret = app_info_filter_destroy(app_info_filter_h);
+ if (APP_MANAGER_ERROR_NONE != ret) // Error handling
+ app_info_filter_h = NULL;
+}
+</pre> </li>
+</ol>
+
+
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<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>
+<p>The Application API 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 Application API and starts it.</p>
+<p>The code below is the minimal application using the Application API. It only builds and runs.</p>
<pre class="prettyprint">
-// Add this include to be able to use the functions from appcore.
+// Add this include to be able to use the functions from the Application API
#include <app.h>
int
}
</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 API has 2 classes of application state callbacks: those about the application's life-cycle and those about the system.</p>
<p>The application's life-cycle callbacks are:</p>
<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;">create</span>: first initialization, comes after <span style="font-family: Courier New,Courier,monospace;">ui_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>
+<p>The system-related callbacks can be handled with the <span style="font-family: Courier New,Courier,monospace;">app_event_cb()</span> callback:</p>
<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>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_MEMORY</span>: Event type responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the Tizen platform Low Memory Killer kills your application to get more free memory. The event is also used to release any cached data in the main memory to secure more free memory.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LOW_BATTERY</span>: Event type responsible for saving data in the main memory to a persistent memory or storage to avoid data loss in case the power goes off completely. The event is also used to stop heavy CPU consumption or power consumption activities to save the remaining power.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_DEVICE_ORIENTATION_CHANGED</span>: Event type responsible for changing the display orientation to match the device orientation.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_LANGUAGE_CHANGED</span>: Event type responsible for refreshing the display into the new language.</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">APP_EVENT_REGION_FORMAT_CHANGED</span>: Event type responsible for refreshing the display into the new time zone.</li>
</ul>
<p>A basic implementation is shown below:</p>
#include <app.h>
// Structure to store the data for application's logic; it is given
-// to each callback invoked through appcore
+// to each callback invoked through the Application API
typedef struct appdata
{
char *several;
// destroy_gui(ad);
}
-static void
-app_device_orientation(void *data)
-{
- // Takes necessary actions when device orientation changes
-}
-
int
main(int argc, char *argv[])
{
</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>
+<p>An application receives a handle to an app control object in the <span style="font-family: Courier New,Courier,monospace;">app_control</span> callback. A definition for that callback is: </p>
<pre class="prettyprint">app_control_cb(app_control_h app_control, void *user_data);
</pre>
if (ret != APP_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "app_control_create() is failed. err = %d", ret);
-ret = app_control_set_operation(app, APP_CONTROL_OPERATION_SEND);
+ret = app_control_set_operation(app, APP_CONTROL_OPERATION_VIEW);
if (ret != APP_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_operation() is failed. err = %d", ret);
-ret = app_control_add_extra_data(app, APP_CONTROL_DATA_TEXT, message);
-if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() is failed. err = %d", ret);
-
-ret = app_control_add_extra_data(app, APP_CONTROL_DATA_TO, mail_address);
+ret = app_control_set_mime(app, "image/jpeg");
if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() is failed. err = %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_mime() is failed. err = %d", ret);
-ret = app_control_add_extra_data(app, APP_CONTROL_DATA_SUBJECT, subject);
+ret = app_control_add_extra_data(app, Your Message Key, message);
if (ret != APP_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "app_control_add_extra_data() is failed. err = %d", ret);
-
-ret = app_control_set_app_id (app, <Your app ID>);
-if (ret != APP_CONTROL_ERROR_NONE)
- dlog_print(DLOG_ERROR, LOG_TAG, "app_control_set_app_id() is failed. err = %d", ret);
</pre>
-<p>The following table lists the available extra data parameters.</p>
-
-<table>
- <caption>
- Table: Extra data parameters
- </caption>
- <tbody>
- <tr>
- <th>Extra data</th>
- <th>Description</th>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SUBJECT</span></td>
- <td>Subject line of the email</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TO</span></td>
- <td>Email address(es) of the primary recipient(s)</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_CC</span></td>
- <td>Email address(es) of the recipient(s) to be carbon-copied</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_BCC</span></td>
- <td>Email address(es) of the private recipient(s)</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TEXT</span></td>
- <td>Message body of the email</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_TITLE</span></td>
- <td>The title of the data</td>
- </tr>
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_DATA_SELECTED</span></td>
- <td>The path of the selected item</td>
- </tr>
- </tbody>
-</table>
+<p>The following table lists the available base application services.</p>
+
+ <table style="vertical-align: middle; text-align: center;">
+ <caption>
+ Table: Tizen base application services
+ </caption>
+
+ <tbody>
+ <tr>
+ <th>Service</th>
+ <th>Operation</th>
+ <th>Scheme</th>
+ <th>MIME</th>
+ </tr>
+ <tr>
+ <td style="vertical-align: middle; text-align: center;">Browsing a Web page</td>
+ <td style="vertical-align: middle; text-align: center;" rowspan="4"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/view</span></td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
+ </ul>
+ </td>
+ <td style="vertical-align: middle; text-align: center;">-</td>
+ </tr>
+ <tr>
+ <td style="vertical-align: middle; text-align: center;">Displaying an image</td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">file</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">http</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">https</span></li>
+ </ul>
+ </td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">image/bmp</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">image/gif</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">image/jpeg</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">image/png</span></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td style="vertical-align: middle; text-align: center;">Playing a sound file</td>
+ <td style="vertical-align: middle; text-align: center;" rowspan="3"><span style="font-family: Courier New,Courier,monospace">file</span></td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">audio/aac</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">audio/amr</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">audio/mp3</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">audio/wav</span></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td style="vertical-align: middle; text-align: center;">Playing a video file</td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">video/mp4</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">video/3gpp</span></li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td style="vertical-align: middle; text-align: center;">Selecting a file</td>
+ <td style="vertical-align: middle; text-align: center;"><span style="font-family: Courier New,Courier,monospace">http://tizen.org/appcontrol/operation/pick</span></td>
+ <td style="vertical-align: middle; text-align: center;">
+ <ul>
+ <li><span style="font-family: Courier New,Courier,monospace">*/*</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">image/*</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">video/*</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace">audio/*</span></li>
+ </ul>
+ </td>
+ </tr>
+ </tbody>
+ </table>
</li>
<li>
- <p>Launch <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
-
- <p>After preparing <span style="font-family: Courier New,Courier,monospace">app_control</span>, launch it using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function, as described above.</p>
- <pre class="prettyprint">
+<p>Launch <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
+
+<p>After preparing <span style="font-family: Courier New,Courier,monospace">app_control</span>, launch it using the <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> function:</p>
+
+<pre class="prettyprint">
ret = app_control_send_launch_request(app, NULL, NULL);
if (ret != APP_CONTROL_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "app_control_send_launch_request() is failed. err = %d", ret);
<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>
+#include <app_alarm.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.
<h2 id="scenario_1" name="scenario_1">Setting an Alarm after Specific Time</h2>
+<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">Since 2.4, <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> method does not support exact period and delay for minimizing the wakeups of the device. The system can adjust when the alarm expires.</td>
+ <td class="note">Since 2.4, the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_after_delay()</span> function does not support an exact period and delay for minimizing the wake-ups of the device. The system can adjust when the alarm expires.</td>
</tr>
</tbody>
- </table>
+</table>
+
<p>To set an alarm after a specific time:</p>
<p>To schedule an alarm after a delay, the function requires 4 parameters:</p>
<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) Since 2.4, Although this is inexact, the alarm will not fire before this time</li>
- <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). Since 2.4, This value does not guarantee the accuracy. The actual interval is calculated by the OS. The minimum value is 600sec.</li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">delay</span>: The amount of time before the first execution (in seconds). Since 2.4, although this is inexact, the alarm does not fire before this time. </li>
+ <li>[in] <span style="font-family: Courier New,Courier,monospace">period</span>: The amount of time before a subsequent alarm (in seconds). Since 2.4, this value does not guarantee accuracy. The actual interval is calculated by the OS, and the minimum value is 600 seconds.</li>
<li>[out] <span style="font-family: Courier New,Courier,monospace">alarm_id</span> The alarm ID that uniquely identifies an alarm</li>
</ul>
ret = alarm_schedule_at_date(app, &date, 0, &alarm_id);
</pre>
-
- <table class="note">
+<table class="note">
<tbody>
<tr>
<th class="note">Note</th>
</tr>
<tr>
- <td class="note">The <span style="font-family: Courier New,Courier,monospace">alarm_schedule_at_date()</span> method has been deprecated since Tizen 2.4. Use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_once_at_date()</span> method instead.</td>
+ <td class="note">The <span style="font-family: Courier New,Courier,monospace">alarm_schedule_at_date()</span> function has been deprecated since Tizen 2.4. Use the <span style="font-family: Courier New,Courier,monospace">alarm_schedule_once_at_date()</span> function instead.</td>
</tr>
</tbody>
- </table>
+</table>
+
<h2 id="scenario_3" name="scenario_3">Setting a Recurring Alarm at a Specific Time of the Day</h2>
static bool on_foreach_registered_alarm(int alarm_id, void *user_data)
{
int flag;
- int ret=0;
+ int ret = 0;
struct tm date;
time_t time_current;
ret = alarm_get_scheduled_date(alarm_id, &date);
- if (ret != ALARM_ERROR_NONE)
+ if (ret != ALARM_ERROR_NONE)
{
dlog_print(DLOG_ERROR, TAG, "Get time Error : %d ", ret);
}
// Logging scheduled alarm's info
time_current = mktime(&date);
- dlog_print(DLOG_INFO, TAG,
- " Registered alarm:%d on date:%s ", alarm_id, ctime(&time_current));
+ dlog_print(DLOG_INFO, TAG, "Registered alarm:%d on date:%s ", alarm_id, ctime(&time_current));
ret = alarm_get_scheduled_recurrence_week_flag(alarm_id, &flag);
if (ret==0)
if (flag & ALARM_WEEK_FLAG_SUNDAY)
dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on SUNDAY \n");
if (flag & ALARM_WEEK_FLAG_MONDAY)
- dlog_print(DLOG_INFO, TAG,
- " Alarm Recurrence on MONDAY \n");
+ dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on MONDAY \n");
if (flag & ALARM_WEEK_FLAG_TUESDAY)
dlog_print(DLOG_INFO, TAG, "Alarm Recurrence on TUESDAY \n");
if (flag & ALARM_WEEK_FLAG_WEDNESDAY)
</pre>
<pre class="prettyprint">
-ret = alarm_foreach_registered_alarm(
- on_foreach_registered_alarm, NULL);
+ret = alarm_foreach_registered_alarm(on_foreach_registered_alarm, NULL);
if (ret != ALARM_ERROR_NONE)
{
dlog_print(DLOG_ERROR, TAG, "Listing Error : %d ", ret);
<h2 id="manage_pref" name="manage_pref">Managing Application Preferences</h2>
+ <p>You can set and get application preference data. Any stored preference data can also be shared with among the applications in the same package.</p>
+
<p>To manage preferences:</p>
<ol><li>
<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>
+#include <app_preference.h>
</pre></li>
<li>Store and retrieve simple type variables.
bundle_keyval_get_basic_val((bundle_keyval_t *) kv, &ptr, &size);
buff = malloc(sizeof(char)* size + 1);
snprintf(buff, size + 1, "%s", ((char*) ptr));
- PRINT_MSG("Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
free(buff);
}
bundle_keyval_get_basic_val((bundle_keyval_t *) kv, &ptr, &size);
buff = malloc(sizeof(char)* size + 1);
snprintf(buff, size + 1, "%s", ((char*) ptr));
- PRINT_MSG("Found BYTE -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR -KEY: %s, VAL: %s, SIZE: %d", key, buff, size);
free(buff);
}
unsigned int len = 0;
size_t *element_size = NULL;
dlog_print(DLOG_DEBUG, LOG_TAG, "Found STR_ARRAY -KEY: %s", key);
- PRINT_MSG("Found STR_ARRAY -KEY: %s", key);
bundle_keyval_get_array_val((bundle_keyval_t *) kv, &array, &len, &element_size);
dlog_print(DLOG_DEBUG, LOG_TAG, "-Array len: %d", len);
- PRINT_MSG("-Array len: %d", len);
for (int i = 0; i < len; i++)
{
- PRINT_MSG("-%s", (char*)array[i]);
+ dlog_print(DLOG_DEBUG, LOG_TAG, "-%s", (char*)array[i]);
}
}
}
static GHashTable *map_repository_test;
void get_value_request_cb(int request_id, data_control_h provider, const char *key, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
int ret_value_count = 0;
char **val_arr = NULL;
int ret = data_control_provider_send_map_get_value_result(request_id, val_arr, ret_value_count);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_get_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_get_result failed with error: %d", ret);
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "Get value success request_id : %d", request_id);
+ dlog_print(DLOG_INFO, LOG_TAG, "Get value success request_id : %d", request_id);
}
}
void set_value_request_cb(int request_id, data_control_h provider, const char *key, const char *old_value, const char *new_value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data != NULL)
{
for (int i = 0; i<map_data->arr_size; i++)
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
}
else
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "Set value success request_id : %d", request_id);
+ dlog_print(DLOG_INFO, LOG_TAG, "Set value success request_id : %d", request_id);
}
}
void add_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data == NULL)
{
}
else
{
- char **new_arr =
- (char**) calloc(map_data->arr_size+2, sizeof(char*));
+ char **new_arr = (char**) calloc(map_data->arr_size+2, sizeof(char*));
for (int i=0; i<map_data->arr_size; i++)
{
new_arr[i] = g_strdup(map_data->str_arr[i]);
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
}
else
{
void remove_value_request_cb(int request_id, data_control_h provider, const char *key, const char *value, void *user_data)
{
- map_data_s* map_data =
- (map_data_s*)g_hash_table_lookup(map_repository_test, key);
+ map_data_s* map_data = (map_data_s*)g_hash_table_lookup(map_repository_test, key);
if (map_data != NULL)
{
{
if (!g_hash_table_remove(map_repository_test, key))
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "remove value fail -%s", key);
+ dlog_print(DLOG_ERROR, LOG_TAG, "remove value fail -%s", key);
return;
}
int ret = data_control_provider_send_map_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "send_map_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "send_map_result failed with error: %d", ret);
}
else
{
<pre class="prettyprint">
void __free_key(gpointer data)
{
- if (data)
- {
- g_free(data);
- data = NULL;
- dlog_print(DLOG_INFO, LOG_TAG, "Remove key");
- }
+ if (data)
+ {
+ g_free(data);
+ data = NULL;
+ dlog_print(DLOG_INFO, LOG_TAG, "Remove key");
+ }
}
void __free_data(gpointer data)
{
- if (data)
- {
- g_free(data);
- data = NULL;
- dlog_print(DLOG_INFO, LOG_TAG, "Remove value");
- }
+ if (data)
+ {
+ g_free(data);
+ data = NULL;
+ dlog_print(DLOG_INFO, LOG_TAG, "Remove value");
+ }
}
data_control_provider_map_cb map_callback;
void initialize_datacontrol_provider()
{
- map_repository_test =
- g_hash_table_new_full(g_str_hash, g_str_equal, __free_key, __free_data);
+ map_repository_test = g_hash_table_new_full(g_str_hash, g_str_equal, __free_key, __free_data);
map_callback.get_cb = get_value_request_cb;
map_callback.add_cb = add_value_request_cb;
int result = data_control_provider_map_register_cb(&map_callback);
if (result != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "data_control_provider_map_register_cb failed with error: %d", result);
+ dlog_print(DLOG_ERROR, LOG_TAG, "data_control_provider_map_register_cb failed with error: %d", result);
}
else
{
<pre class="prettyprint">
// Callback functions
void map_get_response_cb(int request_id, data_control_h provider,
- char **ret_value_list, int ret_value_count, bool provider_ret,
- const char *error, void *user_data)
+ char **ret_value_list, int ret_value_count, bool provider_ret,
+ const char *error, void *user_data)
{
if (provider_ret)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "The get operation is successful. value count : %d ", ret_value_count);
- for (int i = 0; i<ret_value_count; i++)
- dlog_print(DLOG_INFO, LOG_TAG, "(%d) Return value : %s ", i , ret_value_list[i]);
+ dlog_print(DLOG_INFO, LOG_TAG, "The get operation is successful. value count : %d ", ret_value_count);
+ for (int i = 0; i<ret_value_count; i++)
+ dlog_print(DLOG_INFO, LOG_TAG, "(%d) Return value : %s ", i , ret_value_list[i]);
}
else
{
- dlog_print(DLOG_ERROR, LOG_TAG, "The get operation for the request %d is failed. error message: %s", request_id, error);
+ dlog_print(DLOG_ERROR, LOG_TAG, "The get operation for the request %d is failed. error message: %s", request_id, error);
}
}
ret = data_control_map_create(&(ad->provider_h));
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "creating data control provider is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "creating data control provider is failed with error: %d", ret);
}
ret = data_control_map_set_provider_id(ad->provider_h, provider_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting provider id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting provider id is failed with error: %d", ret);
}
ret = data_control_map_set_data_id(ad->provider_h, data_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "setting data id is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "setting data id is failed with error: %d", ret);
}
// Set response callback
ret = data_control_map_register_response_cb(ad->provider_h, &map_callback, NULL);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "Registering the callback function is failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "Registering the callback function is failed with error: %d", ret);
if (ret == DATA_CONTROL_ERROR_IO_ERROR)
{
static sqlite3* db;
void insert_request_cb(int request_id, data_control_h provider, bundle *insert_data, void *user_data)
{
- char* command = data_control_provider_create_insert_statement(
- provider, insert_data);
+ char* command = data_control_provider_create_insert_statement(provider, insert_data);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK)
dlog_print(DLOG_INFO, LOG_TAG, "[insert_request_cb] insert success");
long long inserted_row_id = sqlite3_last_insert_rowid(db);
- ret =
- data_control_provider_send_insert_result(request_id, inserted_row_id);
+ ret = data_control_provider_send_insert_result(request_id, inserted_row_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "insert_send_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "insert_send_result failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG, "[insert_request_cb] send result success");
void delete_request_cb(int request_id, data_control_h provider, const char *where, void *user_data)
{
- dlog_print(DLOG_INFO, LOG_TAG,
- "[delete_request_cb] request_id(%d)", request_id);
- char* command =
- data_control_provider_create_delete_statement(provider, where);
+ dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] request_id(%d)", request_id);
+ char* command = data_control_provider_create_delete_statement(provider, where);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK)
{
ret = data_control_provider_send_delete_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "delete_send_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "delete_send_result failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG, "[delete_request_cb] delete success");
free(command);
}
-void select_request_cb(int request_id, data_control_h provider, const char **column_list, int column_count, const char *where, const char *order, void *user_data)
+void select_request_cb(int request_id, data_control_h provider, const char **column_list,
+ int column_count, const char *where, const char *order, void *user_data)
{
sqlite3_stmt* sql_stmt = NULL;
- char* command = data_control_provider_create_select_statement(
- provider, column_list, column_count, where, order);
- int ret = sqlite3_prepare_v2(
- db, command, strlen(command), &sql_stmt, NULL);
+ char* command = data_control_provider_create_select_statement(provider, column_list,
+ column_count, where, order);
+ int ret = sqlite3_prepare_v2(db, command, strlen(command), &sql_stmt, NULL);
if (ret != SQLITE_OK)
{
data_control_provider_send_error(request_id, sqlite3_errmsg(db));
return;
}
- ret = data_control_provider_send_select_result(
- request_id, (void *)sql_stmt);
+ ret = data_control_provider_send_select_result(request_id, (void *)sql_stmt);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "select_send_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "select_send_result failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG, "[select_request_cb] send result success");
void update_request_cb(int request_id, data_control_h provider, bundle *update_data, const char *where, void *user_data)
{
- char* command = data_control_provider_create_update_statement(
- provider, update_data, where);
+ char* command = data_control_provider_create_update_statement(provider, update_data, where);
int ret = sqlite3_exec(db, command, NULL, NULL, NULL);
if (ret != SQLITE_OK)
{
return;
}
-
ret = data_control_provider_send_update_result(request_id);
if (ret != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "update_send_result failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "update_send_result failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG, "[update_request_cb] send result success");
int ret = sqlite3_open_v2(Your DB Path , &db, open_flags, NULL);
if (ret != SQLITE_OK)
{
- dlog_print(DLOG_ERROR, LOG_TAG,
- "database creation failed with error: %d", ret);
+ dlog_print(DLOG_ERROR, LOG_TAG, "database creation failed with error: %d", ret);
+
return ret;
}
dlog_print(DLOG_ERROR, LOG_TAG,"database table creation failed with error: %d", ret);
}
dlog_print(DLOG_INFO, LOG_TAG,"DB init Success.");
+
return ret;
}
result = data_control_provider_sql_register_cb(sql_callback, NULL);
if (result != DATA_CONTROL_ERROR_NONE)
{
- dlog_print(DLOG_ERROR,
- "data_control_sql_response_c failed with error: %d", result);
+ dlog_print(DLOG_ERROR, "data_control_sql_response_c failed with error: %d", result);
}
else
{
}
}
-void sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id, bool provider_result, const char *error, void *user_data)
+void sql_insert_response_cb(int request_id, data_control_h provider, long long inserted_row_id,
+ bool provider_result, const char *error, void *user_data)
{
if (provider_result)
{
}
}
-void sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor, bool provider_result, const char *error, void *user_data)
+void sql_select_response_cb(int request_id, data_control_h provider, result_set_cursor cursor,
+ bool provider_result, const char *error, void *user_data)
{
if (provider_result)
{
data_control_sql_get_int64_data(cursor, 2, &word_number);
dlog_print(DLOG_INFO, LOG_TAG, "Word : %s, Word DESC : %s, Word NUM : %ld ", word, word_desc, word_number);
-
}
}
bundle_get_str(message, "command", &command);
bundle_get_str(message, "data", &data);
- dlog_print(DLOG_INFO, TAG,
- "Message from %s, command: %s data: %s", remote_app_id, command, data);
+ dlog_print(DLOG_INFO, TAG, "Message from %s, command: %s data: %s", remote_app_id, command, data);
}
</pre>
bundle_get_str(message, "data", &data);
// Callback
- dlog_print(DLOG_INFO, TAG,
- "Message from %s, command: %s data: %s", remote_app_id, command, data);
+ dlog_print(DLOG_INFO, TAG, "Message from %s, command: %s data: %s", remote_app_id, command, data);
bundle *reply = bundle_create ();
{
char *result = NULL;
bundle_get_str(message, "result", &result);
- dlog_print(DLOG_INFO, TAG,
- "Message from %s, result: %s ", remote_app_id, result);
+ dlog_print(DLOG_INFO, TAG, "Message from %s, result: %s ", remote_app_id, result);
}
</pre>
}
</pre>
<pre class="prettyprint">
- ret = package_manager_foreach_package_info(package_info_cb, NULL);
- if (ret != PACKAGE_MANAGER_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, TAG, "foreach_package_info error : %d", ret);
- }
+ret = package_manager_foreach_package_info(package_info_cb, NULL);
+if (ret != PACKAGE_MANAGER_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, TAG, "foreach_package_info error : %d", ret);
+}
</pre></li></ol>
<h2 id="info" name="info">Getting Specific Package Information</h2>
<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">
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>
<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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<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:
+<li>To use the functions and data types of the Widget API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WIDGET__FRAMEWORK.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>
<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("/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 using the <span style="font-family: Courier New,Courier,monospace">sqlite3_open(file_path, &db)</span> function. It creates a new database file, if the URI points to a non-existing one. The handle to the database is stored in a <span style="font-family: Courier New,Courier,monospace">db</span> variable.</li>
<li>Create a table, this step is described later.</li>
</ol></li>
</ul></li>
<li><p>Include the required headers:</p>
<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>
<li><span style="font-family: Courier New,Courier,monospace">#include <stdint.h></span></li>
sqlite3_initialize();
-char* resource = app_get_data_path();
-int siz = strlen(resource)+10;
+char file_path[BUFLEN];
-char* path = malloc(sizeof(char)*siz);
+char *document_path;
+// Fill the variable with the value obtained using storage_foreach_device_supported()
+int internal_storage_id = 0;
+storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOCUMENTS, &document_path);
+snprintf(file_path, size, "%s/test.db", document_path);
+free(document_path);
-strncat(path, resource, siz);
-strncat(path, "test.db", siz);
+sqlite3_open(file_path, &db);
-memset(path, 0, siz);
-
-sqlite3_open(path, &db);
-
-free(path);
-free(resource);
+free(file_path);
CreateTable();
error = download_create(&download_id);
</pre>
-<p>The download ID functions as the handle that is used to manage the download.</p></li>
+<p>The download ID is used as the handle that is used to manage the download.</p></li>
<li>Define and set download callbacks.
</li>
<li>Network type
-<p>To set the desired network type, use the <span style="font-family: Courier New,Courier,monospace;">download_set_network_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gadf73239ac2efa6d4214a03751c76c9b8">download_network_type_e</a> enumeration defines the available download network types. The default value is <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NETWORK_ALL</span>, if the client does not set any values.</p>
+<p>To set the desired network type, use the <span style="font-family: Courier New,Courier,monospace;">download_set_network_type()</span> function. The <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html#gadf73239ac2efa6d4214a03751c76c9b8">download_network_type_e</a> enumeration defines the network types available for downloading. The default value is <span style="font-family: Courier New,Courier,monospace;">DOWNLOAD_NETWORK_ALL</span>, if the client does not set any values.</p>
<pre class="prettyprint">
download_network_type_e value = 0;
</ul></li>
<li>Control the download process.
-<p>Downloading can be started, paused, or canceled using the <span style="font-family: Courier New,Courier,monospace;">download_start()</span>, <span style="font-family: Courier New,Courier,monospace;">download_pause()</span>, or <span style="font-family: Courier New,Courier,monospace;">download_cancel()</span> function. The download ID handle is used with all these functions.</p>
+<p>Downloading can be started, paused, or canceled using the <span style="font-family: Courier New,Courier,monospace;">download_start()</span>, <span style="font-family: Courier New,Courier,monospace;">download_pause()</span>, or <span style="font-family: Courier New,Courier,monospace;">download_cancel()</span> function. The download ID handle is used as a parameter for all these functions.</p>
<pre class="prettyprint">
error = download_start(download_id);
<li>
<p>When you do not use the database anymore, disconnect from it:</p>
<pre class="prettyprint">
-media_content_disconnect ();
+media_content_disconnect();
</pre>
</li>
</ol>
{
media_filter_destroy(filter);
dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set condition");
+
return ret;
}
{
media_filter_destroy(filter);
dlog_print(DLOG_ERROR, LOG_TAG, "Failed to set order");
+
return ret;
}
if (update_item == MEDIA_ITEM_FILE)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Noti item : MEDIA_ITEM_FILE\n");
- } else if (update_item == MEDIA_ITEM_DIRECTORY)
+ }
+ else if (update_item == MEDIA_ITEM_DIRECTORY)
{
dlog_print(DLOG_DEBUG, LOG_TAG, "Noti item : MEDIA_ITEM_DIRECTORY\n");
}
<p>For example, you can receive a bookmark set after a certain time. In this example, only the bookmarks set at the 220th second of the file or later are returned.</p>
<pre class="prettyprint">#define BUFLEN 200
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
snprintf(buf, BUFLEN, "%s >= 220", BOOKMARK_MARKED_TIME);
media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);</pre></li>
<li>Set the condition.
<p>Set the condition using the <span style="font-family: Courier New,Courier,monospace">media_filter_set_condition()</span> function.</p>
-<p>The following code sets the condition which finds albums with the artist name "Tizen" and the condition is case insensitive:</p>
+<p>The following code sets the condition which finds albums with the artist name "Tizen", and the condition is case insensitive:</p>
<pre class="prettyprint">#define BUFLEN 200
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
snprintf(buf, BUFLEN, "%s = 'Tizen'", MEDIA_ARTIST);
ret = media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_NOCASE);</pre>
<pre class="prettyprint">filter_h filter = NULL;
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
media_filter_create(&filter);
dlog_print(DLOG_DEBUG, LOG_TAG, "Modified time: %s", ctime(&time));
}</pre></li>
-<li>Get the media item count in the folder with the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function. <p>The second argument is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all media is counted.</p>
+<li>Get the media item count in the folder with the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function. <p>The second parameter is the filter. If it is set to <span style="font-family: Courier New,Courier,monospace">NULL</span>, all media is counted.</p>
<p>Free the <span style="font-family: Courier New,Courier,monospace">folder_id</span> value after it is used for the <span style="font-family: Courier New,Courier,monospace">media_folder_get_media_count_from_db()</span> function.</p>
<li>Set the condition.
<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>
+<p>The condition is the string used as the parameter to the WHERE clause in the SQL query. The general format is "<property> <relation> <value>", such as "FOLDER_NAME = 'Downloads'".</p>
<ul><li>Condition for the 'Downloads' folder name:
<pre class="prettyprint">#define BUFLEN 200
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
snprintf(buf, BUFLEN, "%s = 'Downloads'", FOLDER_NAME);</pre></li>
<p>The following code finds the folders in the device internal storage. The results are sorted with respect to the modified time, in an ascending order.</p>
<pre class="prettyprint">#define BUFLEN 200
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
snprintf(buf, BUFLEN, "%s = %d", FOLDER_STORAGE_TYPE, MEDIA_CONTENT_STORAGE_INTERNAL);
<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";
+char *image_file = "Default.jpg";
+char *directory = NULL;
+char *path = NULL;
+
+storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &directory);
+path = (char*)malloc(strlen(directory) + strlen(image_file) + 1);
+memset(path, 0x00, strlen(directory) + strlen(image_file) + 1);
+sprintf(path, "%s/%s", directory, image_file);
+
media_info_h media_item = NULL;
ret = media_info_insert_to_db(path, &media_item);
if (ret != MEDIA_CONTENT_ERROR_NONE)
{
// Error handling
+
return ret;
}
</pre></li>
<li>You can use the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function:
<pre class="prettyprint">
int ret = MEDIA_CONTENT_ERROR_NONE;
-const char *file_path = "/opt/usr/media/test/image1.jpg";
+char *image_file = "Default.jpg";
+char *directory = NULL;
+char *file_path = NULL;
+
+storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &directory);
+file_path = (char*)malloc(strlen(directory) + strlen(image_file) + 1);
+memset(file_path, 0x00, strlen(directory) + strlen(image_file) + 1);
+sprintf(file_path, "%s/%s", directory, image_file);
ret = media_content_scan_file(file_path);
+if (ret != MEDIA_CONTENT_ERROR_NONE)
+{
+ // Error handling
+}
</pre></li></ul>
<p>The difference between the 2 functions is that the <span style="font-family: Courier New,Courier,monospace;">media_info_insert_to_db()</span> function is used by getting <span style="font-family: Courier New,Courier,monospace;">media_info_h</span> of the media file after inserting it to the database, whereas the <span style="font-family: Courier New,Courier,monospace;">media_content_scan_file()</span> function supports only inserting a file to the media database, or removing it.</p>
<pre class="prettyprint">
void _scan_cb(media_content_error_e err, void *user_data)
{
- dlog_print(DLOG_DEBUG, LOG_TAG, ("Folder scanned\n");
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Folder scanned\n");
return;
}
<li>Scan a folder and its subfolders:
<pre class="prettyprint">
int ret = MEDIA_CONTENT_ERROR_NONE;
-const char *dir_path = "/opt/usr/media";
+char *dir_path = NULL;
+
+storage_get_directory(0, STORAGE_DIRECTORY_IMAGES, &dir_path);
ret = media_content_scan_folder(dir_path, TRUE, _scan_cb, NULL);
if (ret != MEDIA_CONTENT_ERROR_NONE)
{
// Error handling
+
return ret;
}
</pre></li>
dlog_print(DLOG_DEBUG, LOG_TAG, "Group count: %d\n", count);
</pre>
-<p>The first
argument is the <a href="#filter">filter</a>. In this example, the filter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, which means that no filtering is performed and all items are considered when searching.</p></li>
+<p>The first
parameter is the <a href="#filter">filter</a>. In this example, the filter is <span style="font-family: Courier New,Courier,monospace;">NULL</span>, which means that no filtering is performed and all items are considered when searching.</p></li>
<li><p>Find groups using the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_group_from_db()</span> function.</p>
<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>
+<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> parameter. 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>
<p>Having the group name and identifier (passed in <span style="font-family: Courier New,Courier,monospace;">user_data</span>), find the number of items in the group using the <span style="font-family: Courier New,Courier,monospace;">media_group_get_media_count_from_db() function</span>. The third parameter is the filter, set to <span style="font-family: Courier New,Courier,monospace;">NULL</span> to count all items in the group.</p>
-<p>To find all items in the group, call the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The arguments are similar to those in the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback is called for each found item.</p>
+<p>To find all items in the group, call the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The parameters are similar to those in the <span style="font-family: Courier New,Courier,monospace;">media_group_foreach_media_from_db()</span> function. The <span style="font-family: Courier New,Courier,monospace;">media_cb()</span> callback is called for each found item.</p>
<pre class="prettyprint">
bool group_cb(const char *name, void *user_data)
<pre class="prettyprint">
#define BUFLEN 200 // This is just an example
-char buf[BUFLEN] = { '\0' };
+char buf[BUFLEN] = {'\0'};
snprintf(buf, BUFLEN, "%s LIKE '%%.jpg'", MEDIA_DISPLAY_NAME);
media_filter_set_condition(filter, buf, MEDIA_CONTENT_COLLATE_DEFAULT);
int error = mime_type_get_mime_type("jpg", &mime_type);
</pre></li>
-<li><p>Get the extensions of all files in a <span style="font-family: Courier New,Courier,monospace;">/tmp</span> directory and get their MIME types. To get the directory content, use the dirent structure available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header:</p>
+<li><p>Get the extensions of all files in the resource directory and get their MIME types. To get the directory content, use the <span style="font-family: Courier New,Courier,monospace;">dirent</span> structure available in the <span style="font-family: Courier New,Courier,monospace;"><dirent.h></span> header:</p>
<pre class="prettyprint">
struct dirent *pDirent = NULL;
DIR *dir;
-dir = opendir("/tmp/");
+char *res_path = app_get_resource_path();
+if (!res_path)
+ // Error handling
+dir = opendir(res_path);
if (dir)
{
while ((pDirent = readdir(dir)) != NULL)
int error = mime_type_get_file_extension("image/jpeg", &extension, &length);
int i;
-for (i=0; i < length; i++)
+for (i = 0; i < length; i++)
// Use extension[i]
-for (i=0; i < length; i++)
+for (i = 0; i < length; i++)
free(extension[i]);
free(extension);
</pre></li></ol>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/location/geofence_n.htm">Geofence Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__FRAMEWORK.html">Geofence API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MODULE.html">Geofence API for Mobile Native</a></li>
</ul>
</div></div>
</div>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/location/maps_n.htm">Maps Service Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS_SERVICE__MODULE.html">Maps Service API for Mobile Native</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>
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>
+<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__AND__PREFERENCE__MODULE.html#ga8afd98ceb094d4c3edaf603051a69f8e">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:
// Use segment maneuvers
}
</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>
+<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__AND__PREFERENCE__MODULE.html#ga8f22bd07fe9300b3f3f1c74e83f1e272">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>
#include <email.h>
</pre></li>
<li>
-<p>Set up at least 1 email account on your device before sending an email.</p></li>
+<p>Set up at least 1 email account on your device before sending an email.</p></li></ol>
-<li><p>To build your application with the Email API, package dependencies and the build option must be configured: </p>
-
-<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>
+<p>The email service does not need any initialization or connection opening before the API usage.</p>
<h2 id="creatingmail" name="creatingmail">Creating and Sending Email</h2>
<td rowspan="1" colspan="1"> <p>Application name</p> </td>
<td rowspan="1" colspan="1"> <p>Name of the application that uses the push service.</p> </td>
</tr>
+ <tr>
+ <td rowspan="1" colspan="1"> <p>Application type</p> </td>
+ <td rowspan="1" colspan="1"> <p>Native application or Web application.</p> </td>
+ </tr>
<tr>
<td rowspan="1" colspan="1"> <p>Testing purpose</p> </td>
<td rowspan="1" colspan="1"> <p> Yes or no. If you request the service for testing purposes only, the duration of the push service is limited to 3 weeks.</p> </td>
<td rowspan="1" colspan="1"> <p> Description of how you plan to use the push service, including the situations in which you want to use it. </p> </td>
</tr>
<tr>
- <td rowspan="1" colspan="1"> <p> App launch date </p> </td>
+ <td rowspan="1" colspan="1"> <p> Application launch date </p> </td>
<td rowspan="1" colspan="1"> <p> Application launch date in the YYYY/MM/DD format.<br />For example: 2014/08/01. </p> </td>
</tr>
<tr>
#include <audio_io.h>
#include <sound_manager.h>
</pre></li>
-<li><p>To initialize the audio input and output devices, use the <span style="font-family: Courier New,Courier,monospace">audio_in_create()</span>
- and <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> functions:</p>
+
+<li><p>To initialize the audio input and output devices, use the <span style="font-family: Courier New,Courier,monospace">audio_in_create()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_create()</span> functions:</p>
+
<pre class="prettyprint">
-// Define the sample rate for the recording.
+// Define the sample rate for the recording
#define SAMPLE_RATE 44100
-// Declare variable used for checking function result.
+// Declare the variable used for checking function result
audio_io_error_e error_code;
-// Initialize the audio input device.
+// Initialize the audio input device
audio_in_h input;
error_code = audio_in_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, &input);
-// Initialize the audio output device.
+// Initialize the audio output device
audio_out_h output;
error_code = audio_out_create(SAMPLE_RATE, AUDIO_CHANNEL_MONO, AUDIO_SAMPLE_TYPE_S16_LE, SOUND_TYPE_SYSTEM, &output);
</pre>
-<p>The audio input and output devices support the channel types defined in the <span style="font-family: Courier New,Courier,monospace">audio_channel_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">wearable</a> applications)
- and the sample types defined in the <span style="font-family: Courier New,Courier,monospace">audio_sample_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">wearable</a> applications).
- For playing the recorded audio, set the same channel and sample type for both devices.</p>
+<p>The audio input and output devices support the channel types defined in the <span style="font-family: Courier New,Courier,monospace">audio_channel_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga4e07ead99d581a0a049e8ee632b858b4">wearable</a> applications), and the sample types defined in the <span style="font-family: Courier New,Courier,monospace">audio_sample_type_e</span> enumeration (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__AUDIO__IO__MODULE.html#ga1e66f976b2890f5fc2e9e6ec71af7536">wearable</a> applications). For playing the recorded audio, set the same channel and sample type for both devices.</p>
-<p>The sound types are defined in the <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__SESSION__MODULE.html#ga125699870d48881ea153a4fce7140958">audio_channel_e</a> enumeration.
- You can select the sound type according to the audio sample type.</p></li></ol>
+<p>The sound types are defined in the <span style="font-family: Courier New,Courier,monospace">audio_channel_e</span> enumeration. You can select the sound type according to the audio sample type.</p></li></ol>
<h2 id="simple" name="simple">Managing Simple Recording and Playback</h2>
-
-<h3 id="set" name="set">Creating an Audio Buffer</h3>
-
-<p>Before starting the synchronous recording/playback process, you need to allocate the buffer that will be used for storing the captured audio data.
- The buffer will be allocated with the usage of the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function,
- so the desired buffer size need to be known first. You can get that size by using one of the following options:</p>
-<ol>
-
-<li>
+<h3 id="set" name="set">Creating an Audio Buffer</h3>
-<p>Get the buffer size recommended by the Audio I/O API.</p>
+<p>Before starting the synchronous recording/playback process, you need to allocate the buffer that is used for storing the captured audio data. The buffer is allocated with the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function, so the desired buffer size must be known first. You can get that size by using one of the following options:</p>
-<ol>
+<ul>
-<li>
+<li><p>Get the buffer size recommended by the Audio I/O API:</p>
-<p>Use the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function to get the buffer size recommended by the sound server (e.g. PulseAudio):</p>
+<ol><li>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function to get the buffer size recommended by the sound server (such as PulseAudio):</p>
<pre class="prettyprint">
int buffer_size;
</li>
<li>
+<p>The size returned by the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function depends on the device (it can be different for TV, mobile, and wearable). The synchronous recording process ends when the buffer is full. To determine the duration of the recording, set the buffer size corresponding to the desired duration.</p>
+<p>For example, this function returns the size for around 100 milliseconds for the device used for creation of this tutorial. In such case, multiply the obtained buffer size by 10 (to change the units to seconds) and by the number of seconds that the recording lasts:</p>
-<p>The size returned by the <span style="font-family: Courier New,Courier,monospace">audio_in_get_buffer_size()</span> function depends on the device (it can be different for TV, mobile, wearable, etc.).
- The synchronous recording process ends when the buffer is full. To determine the duration of the recording, set the buffer size corresponding to the desired duration.
- For example, this function returns the size for around 100 milliseconds for the device used for creation of this tutorial. In such case, multiply the obtained buffer size by 10
- (to change the units to seconds) and by the number of seconds, that the recording should last:</p>
<pre class="prettyprint">
#define RECORDING_SEC 5
</li>
-</ol>
-
-</li>
-
+</ol></li>
<li>
+<p>Explicitly calculate the buffer size:</p>
-<p>Alternatively, explicitly calculate the buffer size:</p>
<ol>
<li>
<p>Retrieve the audio channel type information using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_channel()</span> function:</p>
+
<pre class="prettyprint">
audio_channel_e channel;
<li>
<p>Retrieve the audio sample type information using the <span style="font-family: Courier New,Courier,monospace">audio_in_get_sample_type()</span> function:</p>
-<pre class="prettyprint">
-audio_sample_type_e sample_type;
+<pre class="prettyprint">
error_code = audio_in_get_sample_type(input, &sample_type);
</pre>
</li>
<li>
<p>Calculate the buffer size based on the retrieved information:</p>
-<pre class="prettyprint">
-int buffer_size = SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1) * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);
-</pre>
-</li>
+<pre class="prettyprint">int buffer_size = SAMPLE_RATE * (channel == AUDIO_CHANNEL_STEREO ? 2 : 1) * (sample_type == AUDIO_SAMPLE_TYPE_S16_LE ? 2 : 1);</pre>
+</li>
<li>
-<p>Multiply the buffer size by the number of seconds, that the recording should take:</p>
+<p>Multiply the buffer size by the number of seconds that the recording takes:</p>
+
<pre class="prettyprint">
buffer_size *= RECORDING_SEC;
</pre>
</li>
+</ol></li></ul>
-</ol>
-
-</li>
+<p>After determining the buffer size, allocate the memory for the buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function:</p>
-<li>
-<p>Allocate the memory for the buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> function:</p>
<pre class="prettyprint">void *buffer = malloc(buffer_size);</pre>
-<p>Now, when the local buffer for recording/playback is created, it is possible to start the recording/playback process.</p>
-</li>
-</ol>
+<p>Now, when the local buffer for recording/playback is created, you can start the recording/playback process.</p>
+
<h3 id="record" name="record">Recording and Playing an Audio Sample</h3>
-<p>Please note that the synchronous recording/playback process is blocking. It means that launching recording/playback from the main thread of the application can make it unresponsive.
- To prevent from such situation, you can launch the recording/playback in a different thread.
- The tutorial application uses <span style="font-family: Courier New,Courier,monospace">ecore_thread_run()</span> function for that purpose.</p>
+<p>The synchronous recording/playback process is blocking. It means that launching a recording or playback process from the main thread of the application can make it unresponsive. To prevent this, launch the recording/playback in a different thread. This use case uses the <span style="font-family: Courier New,Courier,monospace">ecore_thread_run()</span> function for that purpose.</p>
+
<pre class="prettyprint">
ecore_thread_run(synchronous_playback, NULL, NULL, NULL);
</pre>
+
<p>Now, inside the <span style="font-family: Courier New,Courier,monospace">synchronous_playback()</span> function, you can safely run the recording/playback process:</p>
-<ol>
-<li>
-<p>To start capturing the audio from the H/W device, you need to prepare the audio input device.
- After using <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, the device starts buffering (storing in an internal buffer) the captured audio.</p>
-<pre class="prettyprint">
-// Audio input prepare (starts the hardware recording process).
-error_code = audio_in_prepare(input);
-</pre>
-</li>
+<ol><li>
+<p>To start capturing the audio from the H/W device, prepare the audio input device. After using the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, the device starts buffering (storing in an internal buffer) the captured audio.</p>
+
+<pre class="prettyprint">error_code = audio_in_prepare(input);
+</pre></li>
+
+<li><p>To obtain the captured audio data from the internal buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function:</p>
-<li>
-<p>To obtain the captured audio data from the internal buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function.</p>
<pre class="prettyprint">
-// Copy recorded data from the input buffer to the local buffer.
+// Copy recorded data from the input buffer to the local buffer
int bytes_number = audio_in_read(input, buffer, buffer_size);
</pre>
-<p>The returned value should be the number of bytes read from the input buffer. However, if the value is negative, it represents an error code.</p>
-<p>Please note that this function can behave in two different ways:</p>
-<ol>
-<li>When it is called immediately after calling <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function,
- then it blocks the thread it is launched from until the buffer is fulfilled with the captured audio data.</li>
-<li>However, if the function is called with a delay long enough to let the internal buffer store
- more data than the buffer size indicate, then the function will execute immediately, without blocking its thread.</li></ol>
-<p>The explanation is connected with the functionality of the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function.
- It fulfills the local buffer by copying the data from the internal buffer. If not enough audio data was captured yet (not enough data is stored in the internal buffer),
- the function waits until enough data is captured to fulfill the whole local buffer. It is <strong>important</strong> to understand this mechanism. If you want to start recording audio after clicking a button,
- call <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function just before <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span>
- (in the same button's callback). Otherwise, if you prepare the device earlier and run only reading function inside the button's callback, your recording buffer will be fulfilled with the audio data
- recorded earlier (before the button was clicked).</p>
+
+<p>The returned value must be the number of bytes read from the input buffer. However, if the value is negative, it represents an error code.</p>
+
+<p>This function can behaves in 2 different ways:</p>
+<ul>
+<li>When it is called immediately after calling the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, it blocks the thread it is launched from until the buffer is fulfilled with the captured audio data.</li>
+<li>When it is called with a delay long enough to let the internal buffer store more data than the buffer size indicates, the function executes immediately, without blocking its thread.</li></ul>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function fulfills the local buffer by copying the data from the internal buffer. If not enough audio data was captured yet (not enough data is stored in the internal buffer), the function waits until enough data is captured to fulfill the whole local buffer. It is <strong>important</strong> to understand this mechanism. If you want to start recording audio after clicking a button, call the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function just before the <span style="font-family: Courier New,Courier,monospace">audio_in_read()</span> function (in the same button callback). Otherwise, if you prepare the device earlier and run only the reading function inside the button callback, your recording buffer is fulfilled with the audio data recorded earlier (before the button was clicked).</p>
</li>
-<li><p>To stop the hardware recording process (buffering), after reading the data, use <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function:</p>
+<li><p>To stop the hardware recording process (buffering) after reading the data, use the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function:</p>
+
<pre class="prettyprint">
-// Stop the hardware recording process.
error_code = audio_in_unprepare(input);
</pre></li>
-</ol>
-<ol>
<li><p>Playing the recorded audio sample follows the same rules as the recording process.</p>
-<p>To play the recorded audio sample from the buffer, you need to prepare the audio output device.
- After using <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function, the device prepares its internal output buffer for the playback.</p>
+<p>To play the recorded audio sample from the buffer, prepare the audio output device. After using the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function, the device prepares its internal output buffer for the playback.</p>
+
<pre class="prettyprint">
-// Audio output prepare (starts the hardware playback process).
error_code = audio_out_prepare(output);
</pre>
</li>
+<li><p>The audio sample playback process is launched by using the <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function:</p>
-<li><p>Then, the audio sample playback process is launched by using <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function:</p>
<pre class="prettyprint">
-// Copy the recorded data from the local buffer to the output buffer.
+// Copy the recorded data from the local buffer to the output buffer
int bytes_number = audio_out_write(output, buffer, buffer_size);
</pre>
-<p>The returned value should be the number of bytes read from the input buffer. However, if the value is negative, it represents an error code.</p>
+
+<p>The returned value must be the number of bytes read from the input buffer. However, if the value is negative, it represents an error code.</p>
</li>
-<li><p>To stop the hardware playback process (buffering), after writing the data to the output buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function:</p>
+<li><p>To stop the hardware playback process (buffering) after writing the data to the output buffer, use the <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function:</p>
+
<pre class="prettyprint">
-// Stop the hardware playback process.
error_code = audio_out_unprepare(output);
</pre></li></ol>
-<h3 id="record" name="record">Modifying the Audio Sample Volume</h3>
+<h3 id="modify" name="modify">Modifying the Audio Sample Volume</h3>
+
+<p>To modify the volume of the audio sample stored in the local buffer:</p>
-<p>To modify the volume of the audio sample stored in the local buffer, proceed with the following function:</p>
<pre class="prettyprint">
#define MIN_2BYTES_SIGNED (−32768)
#define MAX_2BYTES_SIGNED 32767
void modify_sound()
{
- // Get the sample type of the input.
- audio_sample_type_e sample_type;
-
- int error_code = audio_in_get_sample_type(input, &sample_type);
- if (error_code != AUDIO_IO_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_get_sample_type() failed! Error code = %d", error_code);
- return;
- }
-
- uint8_t *index = (uint8_t*)buffer;
- while (index < (((uint8_t*)buffer)+buffer_size))
- {
- if (AUDIO_SAMPLE_TYPE_S16_LE == sample_type)
- {
- // We are using int16_t type, because it's 2 bytes long.
- int16_t *value = (int16_t*)index;
-
- // Make the sample louder.
- int32_t tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
- if (tmp > MAX_2BYTES_SIGNED) tmp = MAX_2BYTES_SIGNED;
- if (tmp < MIN_2BYTES_SIGNED) tmp = MIN_2BYTES_SIGNED;
- (*value) = tmp;
- } else {
- // We are using uint8_t type, because it's 1 byte long.
- uint8_t *value = (uint8_t*)index;
-
- // Make the sample louder.
- uint16_t tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
- if (tmp > 255) tmp = 255;
- (*value) = tmp;
- }
-
- // Go to the next sample.
- index += sample_type == AUDIO_SAMPLE_TYPE_S16_LE? 2 : 1;
- }
-
- dlog_print(DLOG_DEBUG, LOG_TAG, "Volume of the synchronous recording increased.");
+ // Get the sample type of the input
+ audio_sample_type_e sample_type;
+
+ int error_code = audio_in_get_sample_type(input, &sample_type);
+ if (error_code != AUDIO_IO_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_get_sample_type() failed! Error code = %d", error_code);
+
+ return;
+ }
+
+ uint8_t *index = (uint8_t*)buffer;
+ while (index < (((uint8_t*)buffer)+buffer_size))
+ {
+ if (AUDIO_SAMPLE_TYPE_S16_LE == sample_type)
+ {
+ // Use int16_t type, because it is 2 bytes long
+ int16_t *value = (int16_t*)index;
+
+ // Make the sample louder
+ int32_t tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
+ if (tmp > MAX_2BYTES_SIGNED) tmp = MAX_2BYTES_SIGNED;
+ if (tmp < MIN_2BYTES_SIGNED) tmp = MIN_2BYTES_SIGNED;
+ (*value) = tmp;
+ }
+ else
+ {
+ // Use uint8_t type, because it is 1 byte long
+ uint8_t *value = (uint8_t*)index;
+
+ // Make the sample louder
+ uint16_t tmp = (*value) * 8; // Why not 8 times louder? (on dB scale even much louder)
+ if (tmp > 255) tmp = 255;
+ (*value) = tmp;
+ }
+
+ // Go to the next sample
+ index += sample_type == AUDIO_SAMPLE_TYPE_S16_LE? 2 : 1;
+ }
+
+ dlog_print(DLOG_DEBUG, LOG_TAG, "Volume of the synchronous recording increased.");
}
</pre>
<h2 id="async" name="async">Managing Asynchronous Recording and Playback</h2>
-<h3 id="set" name="set">Start Asynchronous Recording</h3>
-<p>The asynchronous recording process uses callback functions for capturing audio samples. After initialization of the audio input device, proper callback function must be set using
- <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function. It is <strong>important</strong> to use this function before calling
- <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, because otherwise, the callback function won't be called.</p>
+<h3 id="async_rec" name="async_rec">Starting the Asynchronous Recording</h3>
+
+<p>The asynchronous recording process uses callback functions for capturing audio samples.</p>
+
+<ol><li>After initialization of the audio input device, proper callback function must be set using the <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function. Use this function before calling the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function, because otherwise the callback function is not be called.
+
<pre class="prettyprint">
-// Set a callback function that will be called asynchronously for every single part of the captured voice data.
+// Set a callback function that is called asynchronously for every single part of the captured voice data
error_code = audio_in_set_stream_cb(input, _audio_io_stream_read_cb, NULL);
</pre>
-<p>After this step we can call the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function and start capturing the audio. However, in this case we want to store
- the recording in a file instead of using local buffer. For this purpose we have to prepare (create and open) a file the recording will be stored in.</p>
+
+<p>After this step, call the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function and start capturing the audio. However, in this case, to store the recording in a file instead of using local buffer, you must prepare (create and open) a file the recording is stored in:</p>
+
<pre class="prettyprint">
#include <storage.h>
-// Prepare a file, where the recorded data will be stored.
+// Prepare a file, where the recorded data is stored
char io_stream_w_path[200];
char *storage_path;
-int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &storage_path); // storage_id could be found using storage_foreach_device_supported() function
-snprintf(io_stream_w_path, 200, "%s/%s", storage_path, "pcm_w.raw");
+// storage_id can be found using the storage_foreach_device_supported() function
+int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &storage_path);
+snprintf(io_stream_w_path, 200, "%s/%s", storage_path, "pcm_w.raw");
free(storage_path);
-FILE* fp_w = fopen(io_stream_w_path, "w");
-if (!fp_w) {
- dlog_print(DLOG_ERROR, LOG_TAG, "fopen() function failed while opening %s file!", io_stream_w_path);
+FILE* fp_w = fopen(io_stream_w_path, "w");
+if (!fp_w)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "fopen() function failed while opening %s file!", io_stream_w_path);
}
</pre>
+<p>To obtain the storage path, 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) instead of direct access.</p>
+</li>
-<p>Note : To obtain storage path, we recommend to use <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__STORAGE__MODULE.html">Storage</a> API instead of directly access.</p>
+<li>
+<p>The file is ready and the callback function is set. Proceed with the asynchronous recording by calling the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function to initiate the hardware recording process:</p>
-<p>The file is ready and the callback function is set. Now you can proceed with the asynchronous recording. Call the <span style="font-family: Courier New,Courier,monospace">audio_in_prepare()</span> function
- to initiate the hardware recording process.</p>
<pre class="prettyprint">
-// Audio input prepare (starts the hardware recording process).
error_code = audio_in_prepare(input);
</pre>
-<p>From now on our callback function will be invoked respectively for every captured audio sample pack.</p>
+<p>From now on, the callback function is invoked respectively for every captured audio sample pack.</p>
+
+<p>Inside the callback function, you retrieve a handle to the input device and the number of captured audio sample bytes using the <span style="font-family: Courier New,Courier,monospace">audio_in_peek()</span> function. This information can be used to extract the data from the input internal buffer and store it in the file. The audio data stored in the obtained buffer is written to the recording file (the one that was prepared earlier) with the <span style="font-family: Courier New,Courier,monospace">fwrite()</span> function, and after storing the received audio sample pack in the file, it can be removed from the internal buffer using the <span style="font-family: Courier New,Courier,monospace">audio_in_drop()</span> function.</p>
+
<pre class="prettyprint">
-// Callback invoked for every captured part of the recording.
void _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
{
- const void * buffer = NULL;
-
- if (nbytes > 0)
- {
- // Retrieve buffer pointer from audio input buffer
- int error_code = audio_in_peek(handle, &buffer, &nbytes);
- if (error_code != AUDIO_IO_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_peek() failed! Error code = %d", error_code);
- return;
- }
-
- // Store the recorded part in the file.
- fwrite(buffer, sizeof(char), nbytes, fp_w);
-
- // Remove the obtained audio input data from the actual stream buffer.
- error_code = audio_in_drop(handle);
- if (error_code != AUDIO_IO_ERROR_NONE)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_drop() failed! Error code = %d", error_code);
- }
- }
+ const void * buffer = NULL;
+
+ if (nbytes > 0)
+ {
+ // Retrieve buffer pointer from audio input buffer
+ int error_code = audio_in_peek(handle, &buffer, &nbytes);
+ if (error_code != AUDIO_IO_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_peek() failed! Error code = %d", error_code);
+
+ return;
+ }
+
+ // Store the recorded part in the file
+ fwrite(buffer, sizeof(char), nbytes, fp_w);
+
+ // Remove the obtained audio input data from the actual stream buffer
+ error_code = audio_in_drop(handle);
+ if (error_code != AUDIO_IO_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_in_drop() failed! Error code = %d", error_code);
+ }
+ }
}
-</pre>
-<p>As can be seen above, inside the callback function we retrieve a handle to the input device and the number of captured audio sample bytes.
- This information can be used to extract the data from the input internal buffer and store it in the file. First of all, the pointer to the internal audio buffer is obtained
- using <span style="font-family: Courier New,Courier,monospace">audio_in_peek()</span> function.</p>
-<pre class="prettyprint">
-// Retrieve a pointer to the audio input internal buffer.
-int error_code = audio_in_peek(handle, &buffer, &nbytes);
-</pre>
+</pre></li>
+</ol>
-<p>Then the audio data stored in the obtained buffer is written to the recording file (the one that was prepared earlier) with <span style="font-family: Courier New,Courier,monospace">fwrite()</span> function.</p>
-<pre class="prettyprint">
-// Store the recorded part in the file.
-fwrite(buffer, sizeof(char), nbytes, fp_w);
-</pre>
+<h3 id="stop" name="stop">Stopping the Asynchronous Recording</h3>
-<p>After storing the received audio sample pack in the file, it can be removed from internal buffer.</p>
-<pre class="prettyprint">
-// Remove the obtained audio input data from the actual stream buffer.
-error_code = audio_in_drop(handle);
-</pre>
+<p>It is possible to stop the asynchronous recording process manually:</p>
-<h3 id="set" name="set">Stop Asynchronous Recording</h3>
+<ol><li>The <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function stops the hardware recording process, so the callback for asynchronous recording is no longer called:
-<p>It is possible to stop the asynchronous recording process manually. The <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> function stops the hardware recording process,
- so the callback for asynchronous recording won't be called anymore.</p>
<pre class="prettyprint">
-// Stop the hardware recording process.
error_code = audio_in_unprepare(input);
</pre>
-
-<p>If the asynchronous recording won't be used anymore, or if the <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function is called each time before starting
- the asynchronous recording, then you can unset the callback function with <span style="font-family: Courier New,Courier,monospace">audio_in_unset_stream_cb()</span> function.</p>
+</li>
+<li><p>If the asynchronous recording is no longer used, or if the <span style="font-family: Courier New,Courier,monospace">audio_in_set_stream_cb()</span> function is called each time before starting the asynchronous recording, you can unset the callback function with the <span style="font-family: Courier New,Courier,monospace">audio_in_unset_stream_cb()</span> function:</p>
<pre class="prettyprint">
-// Unset the callback function used for asynchronous recording process.
error_code = audio_in_unset_stream_cb(input);
</pre>
+</li>
+<li><p>The file used for recording is still opened, so if the recording was stopped, the file can be closed:</p>
-<p>Please note that the file used for recording is still opened, so if the recording was stopped, the file can be closed.</p>
<pre class="prettyprint">
-// Close the file used for recording.
error_code = fclose(fp_w);
</pre>
+</li></ol>
+
+<h3 id="start" name="start">Starting the Asynchronous Playback</h3>
+
+<p>Playing the audio sample asynchronously is similar to the recording:</p>
-<h3 id="set" name="set">Start Asynchronous Playback</h3>
+<ol><li>The callback function used for asynchronous playback is set with the <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function:
-<p>Playing the audio sample asynchronously is similar to the recording. First of all, the callback function used for asynchronous playback is set with
- <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function. </p>
<pre class="prettyprint">
-// Set a callback function that will be called asynchronously for every single part of the stored audio data.
+// Set a callback function that is called asynchronously for every single part of the stored audio data
error_code = audio_out_set_stream_cb(output, _audio_io_stream_write_cb, NULL);
</pre>
+<p>After this step, you can call the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function and start playing the audio. However, in this case, to play the recording from a file instead of using local buffer, you must prepare (open for reading) a file the recording is stored in:</p>
-<p>After this step we can call the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function and start playing the audio. However, in this case we want to play
- the recording from a file instead of using local buffer. For this purpose we have to prepare (open for reading) a file the recording is stored in.</p>
<pre class="prettyprint">
#include <storage.h>
-// Prepare a file, that will be used for playback.
char io_stream_r_path[200];
char *storage_path;
-int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &storage_path); // storage_id could be found using storage_foreach_device_supported() function
-snprintf(io_stream_r_path, 200, "%s/%s", storage_path, "pcm_w.raw");
+// storage_id can be found using the storage_foreach_device_supported() function
+int error = storage_get_directory(storage_id, STORAGE_DIRECTORY_SOUNDS, &storage_path);
+snprintf(io_stream_r_path, 200, "%s/%s", storage_path, "pcm_w.raw");
free(storage_path);
-FILE* fp_r = fopen(io_stream_r_path, "r");
+FILE* fp_r = fopen(io_stream_r_path, "r");
</pre>
+</li>
+
+<li>
+<p>The file is ready and the callback function is set. Proceed with the asynchronous playback by calling the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function to initiate the hardware playback process:</p>
-<p>The file is ready and the callback function is set. Now you can proceed with the asynchronous playback. Call the <span style="font-family: Courier New,Courier,monospace">audio_out_prepare()</span> function
- to initiate the hardware playback process.</p>
<pre class="prettyprint">
-// Audio output prepare (starts the hardware playback process)
error_code = audio_out_prepare(output);
</pre>
-<p>From now on our callback function will be invoked respectively for every audio sample pack retrieved from the file.</p>
+</li>
+<li>
+<p>From now on, the callback function is invoked respectively for every audio sample pack retrieved from the file.</p>
+
+<p>Inside the callback, you retrieve a handle to the output internal buffer and the number of audio sample bytes that can be written to the output buffer using the <span style="font-family: Courier New,Courier,monospace">malloc()</span> and <span style="font-family: Courier New,Courier,monospace">memset()</span> functions. Read the pack of the audio sample from the file and store it in the local buffer using the <span style="font-family: Courier New,Courier,monospace">fread()</span> function, and copy the audio sample data from the local buffer to the output internal buffer to start the playback with the <span style="font-family: Courier New,Courier,monospace">audio_out_write()</span> function.</p>
+
<pre class="prettyprint">
-// Callback invoked for every stored part of the audio.
void _audio_io_stream_write_cb(audio_out_h handle, size_t nbytes, void *userdata)
{
- char * buffer = NULL;
+ char * buffer = NULL;
- if (nbytes > 0)
- {
- buffer = malloc(nbytes);
- memset(buffer, 0, nbytes);
+ if (nbytes > 0)
+ {
+ buffer = malloc(nbytes);
+ memset(buffer, 0, nbytes);
- // Play the following part of the recording.
- fread(buffer, sizeof(char), nbytes, fp_r);
+ // Play the following part of the recording
+ fread(buffer, sizeof(char), nbytes, fp_r);
- // Copy the recorded data from the buffer to the output buffer.
- int data_size = audio_out_write(handle, buffer, nbytes);
- if (data_size < 0)
- {
- dlog_print(DLOG_ERROR, LOG_TAG, "audio_out_write() failed! Error code = %d", data_size);
- }
+ // Copy the recorded data from the buffer to the output buffer
+ int data_size = audio_out_write(handle, buffer, nbytes);
- free(buffer);
- }
+ if (data_size < 0)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "audio_out_write() failed! Error code = %d", data_size);
+ }
+
+ free (buffer);
+ }
}
-</pre>
+</pre></li></ol>
-<p>As can be seen above, inside the callback function we retrieve a handle to the output internal buffer and the number of audio sample bytes that can be written to the output buffer.
- First of all, read the audio sample pack from the file and store it in a local buffer.</p>
-<pre class="prettyprint">
-char * buffer = malloc(nbytes);
-memset(buffer, 0, nbytes);
+<h3 id="stop_async" name="stop_async">Stopping the Asynchronous Playback</h3>
+<p>you can stop the asynchronous playback process manually:</p>
-// Read the pack of the audio sample from the file and store it in the local buffer.
-fread(buffer, sizeof(char), nbytes, fp_r);
-</pre>
+<ol><li>The <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function stops the hardware playback process, so the callback for asynchronous playback is no longer called:
-<p>Copy the audio sample data from the local buffer to the output internal buffer to start the playback.</p>
<pre class="prettyprint">
-// Copy the recorded data from the local buffer to the output buffer.
-int data_size = audio_out_write(handle, buffer, nbytes);
-</pre>
-
-<h3 id="set" name="set">Stop Asynchronous Playback</h3>
-
-<p>It is possible to stop the asynchronous playback process manually. The <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> function stops the hardware playback process,
- so the callback for asynchronous playback won't be called anymore.</p>
-<pre class="prettyprint">
-// Stop the hardware playback process.
error_code = audio_out_unprepare(output);
</pre>
+</li>
+<li>
+<p>If the asynchronous playback is no longer used, or if the <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function is called each time before starting the asynchronous playback, you can unset the callback function with the <span style="font-family: Courier New,Courier,monospace">audio_out_unset_stream_cb()</span> function when the playback is stopped:</p>
-<p>If the asynchronous playback won't be used anymore, or if the <span style="font-family: Courier New,Courier,monospace">audio_out_set_stream_cb()</span> function is called each time before starting
- the asynchronous playback, then you can unset the callback function with <span style="font-family: Courier New,Courier,monospace">audio_out_unset_stream_cb()</span> function, when the playback is stopped.</p>
<pre class="prettyprint">
-// Unset the callback function used for asynchronous playback process.
error_code = audio_out_unset_stream_cb(output);
</pre>
+</li>
+<li>
+<p>The file used for playback is still opened, so if the playback was stopped, the file can be closed:</p>
-<p>Please note that the file used for playback is still opened, so if the playback was stopped, the file can be closed.</p>
<pre class="prettyprint">
-// Close the file used for playback.
error_code = fclose(fp_r);
</pre>
+</li></ol>
+
<h2 id="release" name="release">Releasing Resources</h2>
-<p>To destroy the audio handles and release the allocated resources after you have finished working with the audio input and output devices do the following steps:</p>
+<p>To destroy the audio handles and release the allocated resources after you have finished working with the audio input and output devices:</p>
<ol><li><p>Release the memory allocated to the local buffer using the <span style="font-family: Courier New,Courier,monospace">free()</span> function:</p>
-<pre class="prettyprint">
-// Release the memory allocated for the local buffer used for recording/playing.
-free(buffer);
-</pre></li>
+<pre class="prettyprint">free(buffer);</pre></li>
+
+<li><p>Unprepare the audio input and output devices using the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions:</p>
-<li><p>Unprepare the audio input and output devices using the <span style="font-family: Courier New,Courier,monospace">audio_in_unprepare()</span>
- and <span style="font-family: Courier New,Courier,monospace">audio_out_unprepare()</span> functions.</p>
<pre class="prettyprint">
-// Stop the hardware recording process.
+// Stop the hardware recording process
error_code = audio_in_unprepare(input);
// Stop the hardware playback process
error_code = audio_out_unprepare(output);
</pre></li>
-<li><p>Unset callback function used for asynchronous recording/playback, if they weren't unset yet, using the <span style="font-family: Courier New,Courier,monospace">audio_in_unset_stream_cb()</span>
- and <span style="font-family: Courier New,Courier,monospace">audio_out_unset_stream_cb()</span> functions.</p>
+<li><p>Unset the callback functions used for asynchronous recording/playback, if they were not unset yet, using the <span style="font-family: Courier New,Courier,monospace">audio_in_unset_stream_cb()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_unset_stream_cb()</span> functions:</p>
+
<pre class="prettyprint">
-// Unset the callback function used for asynchronous recording process.
+// Unset the callback function used for asynchronous recording process
audio_in_unset_stream_cb(input);
-// Unset the callback function used for asynchronous playback process.
+// Unset the callback function used for asynchronous playback process
audio_out_unset_stream_cb(output);
</pre></li>
-<li><p>Destroy the audio input and output handles using the <span style="font-family: Courier New,Courier,monospace">audio_in_destroy()</span>
- and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span> functions.</p>
+<li><p>Destroy the audio input and output handles using the <span style="font-family: Courier New,Courier,monospace">audio_in_destroy()</span> and <span style="font-family: Courier New,Courier,monospace">audio_out_destroy()</span> functions:</p>
+
<pre class="prettyprint">
-// Deinitialize audio input device.
+// Deinitialize audio input device
error_code = audio_in_destroy(input);
-// Deinitialize audio output device.
+// Deinitialize audio output device
error_code = audio_out_destroy(output);
</pre></li>
-<li><p>Close opened files, if they weren't closed yet, using the <span style="font-family: Courier New,Courier,monospace">fclose()</span> function:</p>
+
+<li><p>Close opened files, if they were not closed yet, using the <span style="font-family: Courier New,Courier,monospace">fclose()</span> function:</p>
<pre class="prettyprint">
fclose(fp_w);
</table>
-<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> enumerator:
<pre class="prettyprint">
int error_code = CAMERA_ERROR_NONE;
<p>To receive notifications about delivering a copy of the newly previewed frame, register a callback function using the <span style="font-family: Courier New,Courier,monospace">camera_set_preview_cb()</span> function. The callback function is called once per frame during the preview.</p>
-<pre class="prettyprint">// Set camera preview callback
+<pre class="prettyprint">
error_code = camera_set_preview_cb(cam_data.g_camera, _camera_preview_cb, NULL);
</pre>
<li>
<p>To receive notifications about auto-focus state changes, register a callback function using the <span style="font-family: Courier New,Courier,monospace">camera_set_focus_changed_cb()</span> function:</p>
-<pre class="prettyprint">// Set camera focus change callback
+<pre class="prettyprint">
error_code = camera_set_focus_changed_cb(cam_data.g_camera, _camera_focus_cb, NULL);
</pre>
<ol>
<li>If the auto-focus is switched on, switch if off using the <span style="font-family: Courier New,Courier,monospace">camera_cancel_focusing()</span> function:
- <pre class="prettyprint">// Cancel camera focusing
+ <pre class="prettyprint">
error_code = camera_cancel_focusing(cam_data.g_camera);</pre></li>
<li>Stop the camera preview using the <span style="font-family: Courier New,Courier,monospace">camera_stop_preview()</span> function:
- <pre class="prettyprint">// Stop camera preview
+ <pre class="prettyprint">
error_code = camera_stop_preview(cam_data.g_camera);</pre></li>
<li>Unregister the camera preview and camera focus change callback functions using the <span style="font-family: Courier New,Courier,monospace">camera_unset_preview_cb()</span> and <span style="font-family: Courier New,Courier,monospace">camera_unset_focus_changed_cb()</span> functions, respectively:
error_code = camera_unset_focus_changed_cb(cam_data.g_camera);</pre></li>
<li>Destroy the camera handle and release all its resources using the <span style="font-family: Courier New,Courier,monospace">camera_destroy()</span> function:
- <pre class="prettyprint">// Destroy camera handle
+ <pre class="prettyprint">
error_code = camera_destroy(cam_data.g_camera);</pre></li>
</ol>
<pre class="prettyprint">int image_util_foreach_supported_jpeg_colorspace(image_util_supported_jpeg_colorspace_cb callback,
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>
+<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>
+
+<li><p>The <span style="font-family: Courier New,Courier,monospace">image_util_transform_run()</span> function used for all image transformations needs the <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> parameter. Create it by setting the source image:</p>
+<pre class="prettyprint">
+ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &img_source, &width, &height, &size_decode);
+
+ret = media_format_create(&fmt);
+ret = media_format_set_video_mime(fmt, colorspace);
+ret = media_format_set_video_width(fmt, width);
+ret = media_format_set_video_height(fmt, height);
+
+ret = media_packet_create_alloc(fmt, NULL, NULL, &src);
+ret = media_packet_get_buffer_size(src, &size);
+
+src = malloc(size);
+ret = media_packet_get_buffer_data_ptr(src, &src_ptr);
+ret = memcpy(src_ptr, img_source, size);</pre>
+</li>
+</ol>
<h2 id="colorspace" name="colorspace">Converting the Color Space</h2>
</li></ol>
-<p>To set the source image:</p>
-<ul>
-<li><p>The following example shows how to create the media_packet_h parameter needed by image_util_transform_run( ) function:</p>
-
-<pre class="prettyprint">
-ret = image_util_decode_jpeg(SAMPLE_FILENAME, colorspace, &img_source, &width, &height, &size_decode);
-
-ret = media_format_create(&fmt);
-ret = media_format_set_video_mime(fmt, colorspace);
-ret = media_format_set_video_width(fmt, width);
-ret = media_format_set_video_width(fmt, height);
-
-ret = media_packet_create_alloc(fmt, NULL, NULL, &src);
-ret = media_packet_get_buffer_size(src, &size);
-
-src = malloc(size);
-ret = media_packet_get_buffer_data_ptr(src, &src_ptr);
-ret = memcpy(src_ptr, img_source, size);</pre>
-
-
-</li>
-</ul>
-
<h2 id="resize" name="resize">Resizing an Image</h2>
<p>To resize an image:</p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
- <meta content="IE=9" http-equiv="X-UA-Compatible" />
- <link href="../../css/styles.css" type="text/css" rel="stylesheet" />
- <link href="../../css/snippet.css" type="text/css" rel="stylesheet" />
- <script src="../../scripts/snippet.js" type="text/javascript"></script>
- <script charset="utf-8" src="../../scripts/jquery.util.js" type="text/javascript"></script>
- <script charset="utf-8" src="../../scripts/common.js" type="text/javascript"></script>
- <script charset="utf-8" src="../../scripts/core.js" type="text/javascript"></script>
- <script charset="utf-8" src="../../scripts/search.js" type="text/javascript"></script>
+<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>Media Codec: Encoding and Decoding Media Files</title>
- </head>
- <body style="overflow: auto;" onload="prettyPrint()">
- <div id="toc-navigation">
- <div id="profile">
- <p><img src="../../images/mn_icon.png" alt="Mobile native" /> <img src="../../images/wn_icon.png"
- alt="Wearable native" /></p>
- </div>
- <div id="toc_border">
- <div id="toc">
- <p class="toc-title">Content</p>
- <ul class="toc">
- <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 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>
+</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="container">
- <div id="contents">
- <div class="content">
- <h1>Media Codec: Encoding and Decoding Media Files</h1>
- <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 href="#init">Initializing Media Codecs</a>
- <p>Initialize the media codecs for use.</p>
- </li>
- <li><a href="#manage">Managing Media Codecs</a>
- <p>Prepare and start the codec.</p>
- </li>
- <li><a href="#release">Releasing Resources</a>
- <p>Reset the codec and destroy the handle.</p>
- </li>
- </ul>
- <h2 name="init" id="init">Initializing Media Codecs</h2>
- <h3 name="configure" id="configure">Creating and Configuring MediaCodec</h3>
- <p>Before using the Media codec:</p>
- <ol>
- <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>
+ <div id="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <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 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>
+
+
+<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 href="#init">Initializing Media Codecs</a>
+<p>Initialize the media codecs for use.</p></li>
+
+<li><a href="#manage">Managing Media Codecs</a>
+<p>Prepare and start the codec.</p></li>
+
+<li><a href="#release">Releasing Resources</a>
+<p>Reset the codec and destroy the handle.</p></li></ul>
+
+
+ <h2 id="init" name="init">Initializing Media Codecs</h2>
+<h3 name="configure" id="configure">Creating and Configuring Media Codecs</h3>
+<p>Before using the Media codec:</p>
+<ol>
+<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>
- <li>Define a handle for the media codec and pass it to the <span style="font-family: Courier New,Courier,monospace">mediacodec_create()</span>
- function. The handle must be passed to all other Media Codec APIs.
- <pre class="prettyprint">mediacodec_h *mediacodec;
+<li>Define a handle for the media codec and pass it to the <span style="font-family: Courier New,Courier,monospace">mediacodec_create()</span> function. The handle must be passed to all other Media Codec APIs.
+<pre class="prettyprint">
+mediacodec_h *mediacodec;
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 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>To configure the video encoder, perform the following function:<br />
- <pre class="prettyprint">ret = mediacodec_set_venc_info(mediacodec, width, height, fps, target_bits);</pre>
- To configure the video decoder, perform the following function:<br />
- <pre class="prettyprint">ret = mediacodec_set_vdec_info(mediacodec, width, height);
+</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 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>To configure the video encoder and decoder:
+<pre class="prettyprint">ret = mediacodec_set_venc_info(mediacodec, width, height, fps, target_bits);
+
+ret = mediacodec_set_vdec_info(mediacodec, width, height);
</pre>
- To configure the audio encoder, perform the following function:<br />
- <pre class="prettyprint">ret = mediacodec_set_aenc_info(mediacodec, samplerate, channel, bit, bitrate);
+
+<p>To configure the audio encoder and decoder:</p>
+<pre class="prettyprint">ret = mediacodec_set_aenc_info(mediacodec, samplerate, channel, bit, bitrate);
+
+ret = mediacodec_set_adec_info(mediacodec, samplerate, channel, bit);
</pre>
- To configure the audio decoder, perform the following function:<br />
- <pre class="prettyprint">ret = <span style="font-family: Courier New,Courier,monospace">mediacodec_set_adec_info(mediacodec, samplerate, channel, bit);</span>
-</pre><br />
- <br />
- </li>
- </ol>
- <h3 name="callbacks" id="callbacks">Setting Callbacks</h3>
- <ol>
- <li>
- <p>To receive notifications when the input buffers are used,
- register a callback function using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_input_buffer_used_cb()</span>
- function. The callback is invoked when the input buffers are
- queued to the codec.</p>
- <pre class="prettyprint">ret = mediacodec_set_input_buffer_used_cb(mediacodec, _input_buffer_used_cb, NULL);</pre>
- <p>If the media_packet is used, the media_packet should be
- destroyed when this callback is invoked.</p>
- <pre class="prettyprint">static void _input_buffer_used_cb( media_packet_h pkt, void *user_data)<br />{<br /> media_packet_destroy(pkt);<br /> return;<br />}
+</li>
+</ol>
+
+<h3 name="callbacks" id="callbacks">Setting Callbacks</h3>
+
+<p>To set callbacks:</p>
+
+<ol>
+<li>
+<p>To receive notifications when the input buffers are used, register a callback using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_input_buffer_used_cb()</span> function. The callback is invoked when the input buffers are queued to the codec.</p>
+<pre class="prettyprint">ret = mediacodec_set_input_buffer_used_cb(mediacodec, _input_buffer_used_cb, NULL);</pre>
+
+<p>If a <span style="font-family: Courier New,Courier,monospace">media_packet</span> is used, it must be destroyed when the callback is invoked:</p>
+<pre class="prettyprint">static void
+_input_buffer_used_cb(media_packet_h pkt, void *user_data)
+{
+ media_packet_destroy(pkt);
+
+ return;
+}
</pre></li>
- <li value="2">
- <p>To receive notifications when the output buffers are dequeued,
- register a callback function using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_output_buffer_available_cb()</span>
- function. The callback is invoked when the output buffers are
- dequeued.</p>
- <pre class="prettyprint">ret = mediacodec_set_output_buffer_availalbe_cb(mediacodec, _output_buffer_available_cb, mediacodec);</pre>
- <p>If the media_packet is dequeued from the codec, this callback
- is invoked.<br />
- It is possible to get output packet through
- mediacodec_get_output() when the callback is invoked.</p>
- <pre class="prettyprint">static void _output_buffer_available_cb( media_packet_h pkt, void *user_data)<br />{<br /> media_packet_h out_pkt;<br /> mediacodec_h mediacodec = (mediacodec_h)user_data;<br /><br /> if ( pkt != NULL ) {<br /> mediacodec_get_output(mediacodec, &out_pkt, 0);<br /> media_packet_destroy(out_pkt); <br /> }<br /> return;<br />}
+<li>
+<p>To receive notifications when the output buffers are dequeued, register a callback using the <span style="font-family: Courier New,Courier,monospace">mediacodec_set_output_buffer_available_cb()</span> function. The callback is invoked when the output buffers are dequeued.</p>
+<pre class="prettyprint">ret = mediacodec_set_output_buffer_available_cb(mediacodec, _output_buffer_available_cb, mediacodec);</pre>
+<p>If the <span style="font-family: Courier New,Courier,monospace">media_packet</span> is dequeued from the codec, this callback is invoked.</p>
+<p>You can get the output packet through the <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> function when the callback is invoked:</p>
+<pre class="prettyprint">static void
+_output_buffer_available_cb(media_packet_h pkt, void *user_data)
+{
+ media_packet_h out_pkt;
+ mediacodec_h mediacodec = (mediacodec_h)user_data;
+
+ if (pkt != NULL)
+ {
+ mediacodec_get_output(mediacodec, &out_pkt, 0);
+ media_packet_destroy(out_pkt);
+ }
+
+ return;
+}
</pre></li>
- </ol>
- <span style="font-family: Arial,Verdana,Helvetica,sans-serif;"> </span><br />
- <h2 name="manage" id="manage">Managing Media Codecs</h2>
- <h3 name="callbacks" id="callbacks">Filling packet with data</h3>
- <p>Once the media_packet is allocated with corresponding mime types of
- codecs, it is possible to fill media_packet with data.</p>
- To fill packet with data:
- <ol>
- <li>Get the data pointer from media_packet and set buffer size on
- preallocated packet.<br />
- <pre class="prettyprint">unsigned char nal[48] = {0x00, 0x00, 0x00, 0x01, 0x67, 0x4D, 0x40, 0x33,<br /> 0x9A, 0x73, 0x80, 0xA0, 0x08, 0xB4, 0x20, 0x00,<br /> 0x32, 0xE9, 0xE0, 0x09, 0x89, 0x68, 0x11, 0xE3,<br /> 0x06, 0x23, 0xC0, 0x00, 0x00, 0x00, 0x01, 0x68,<br /> 0xEE, 0x3C, 0x80, 0x00, 0x00, 0x00, 0x01, 0x65,<br /> 0x88, 0x80, 0x01, 0x48, 0x00, 0x06, 0x57, 0xFD};<br /><br />media_format_h fmt;<br />media_packet_h pkt;<br />void *data;<br /><br />ret = media_format_set_video_mime (fmt, MEDIA_FORMAT_H264_SP);<br />ret = media_format_set_video_width(fmt, 1280);<br />ret = media_format_set_video_height(fmt, 544);<br />ret = media_packet_create_alloc(fmt, NULL, NULL, &pkt);<br /><br />ret = media_packet_get_buffer_data_ptr (pkt, &data);<br />memcpy(data, nal, 48);<br />ret = media_packet_set_buffer_size (pkt, 48);
+</ol>
+
+ <h2 id="manage" name="manage">Managing Media Codecs</h2>
+<h3 name="packet" id="packet">Filling the Packet with Data</h3>
+<p>Once the <span style="font-family: Courier New,Courier,monospace">media_packet</span> is allocated with corresponding codec MIME types, you can fill it with data:</p>
+
+<ol>
+<li>Get the data pointer from the <span style="font-family: Courier New,Courier,monospace">media_packet</span> and set the buffer size on the preallocated packet:
+<pre class="prettyprint">unsigned char nal[48] = {0x00, 0x00, 0x00, 0x01, 0x67, 0x4D, 0x40, 0x33,
+ 0x9A, 0x73, 0x80, 0xA0, 0x08, 0xB4, 0x20, 0x00,
+ 0x32, 0xE9, 0xE0, 0x09, 0x89, 0x68, 0x11, 0xE3,
+ 0x06, 0x23, 0xC0, 0x00, 0x00, 0x00, 0x01, 0x68,
+ 0xEE, 0x3C, 0x80, 0x00, 0x00, 0x00, 0x01, 0x65,
+ 0x88, 0x80, 0x01, 0x48, 0x00, 0x06, 0x57, 0xFD};
+
+media_format_h fmt;
+media_packet_h pkt;
+void *data;
+
+ret = media_format_set_video_mime (fmt, MEDIA_FORMAT_H264_SP);
+ret = media_format_set_video_width(fmt, 1280);
+ret = media_format_set_video_height(fmt, 544);
+ret = media_packet_create_alloc(fmt, NULL, NULL, &pkt);
+
+ret = media_packet_get_buffer_data_ptr (pkt, &data);
+memcpy(data, nal, 48);
+ret = media_packet_set_buffer_size (pkt, 48);
+</pre>
+</li>
+<li>If the memory buffer can contain extra padding bytes after each pixel roe, you can check whether the stride in the uncompressed video frame is not the same as the video width. In that case, the strided copy is needed:
+<pre class="prettyprint">void
+_fill_buffer(media_packet_h pkt, unsigned char *yuv, int width, int height)
+{
+ int i;
+
+ // Y plane
+ media_packet_get_video_stride_width(pkt, 0, &stride);
+ media_packet_get_video_plane_data_ptr(pkt, 0, &data);
+
+ for (i = 0 ; i < height; i++)
+ {
+ memcpy(data, yuv, width);
+ data += stride;
+ }
+}</pre>
+</li>
+ </ol>
+<h3 name="management" id="management">Managing Mediacodec</h3>
+
+<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><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>
+
+
+<p>To manage the codec process loop:</p>
+
+<ol>
+<li>If the prerequisites are set normally, prepare the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_prepare()</span> function.
+
+<pre class="prettyprint">ret = mediacodec_prepare(mediacodec);
</pre>
- </li>
- <li>If the memory buffer might contain extra padding bytes after
- each row of pixels, It is possible to check whether the stride in
- uncompressed video frame is not same as the video width. If then,
- strided copy is needed as below.<br />
- <pre class="prettyprint">void _fill_buffer(media_packet_h pkt, unsigned char *yuv, int width, int height)<br />{<br /> int i;<br /><br /> /* Y plane */<br /> media_packet_get_video_stride_width(pkt, 0, &stride);<br /> media_packet_get_video_plane_data_ptr(pkt, 0, &data);<br /><br /> for (i = 0 ; i < height; i++) {<br /> memcpy(data, yuv, width);<br /> data += stride;<br />} <br />
+</li>
+<li>Before calling the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span> function, set the flag in the <span style="font-family: Courier New,Courier,monospace">media_packet</span>.
+<p>If the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains codec data, such as SPS or PPS in case of H.264, you must set the codec config flag using the <span style="font-family: Courier New,Courier,monospace">media_packet_set_flags()</span> function:</p>
+<pre class="prettyprint">ret = media_packet_set_flags(pkt, MEDIA_PACKET_CODEC_CONFIG);
</pre>
- </li>
- </ol>
- <h3 name="callbacks" id="callbacks">Managing Mediacodec</h3>
- <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>
- <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>
- <p>To manage the codec process loop:</p>
- <ol>
- <li>If the prerequisites are set normally, prepare the media codec
- using the <span style="font-family: Courier New,Courier,monospace">mediacodec_prepare()</span>
- function.
- <pre class="prettyprint">ret = mediacodec_prepare(mediacodec);
-</pre></li>
- <li>Before calling mediacodec_process_input(), it is needed to set
- flag in media_packet.<br />
- <br />
- If the media_packet contains codec data such as SPS, PPS in case
- of H.264, it is needed to set codec config flag using
- media_packet_set_flags().<br />
- <pre class="prettyprint">ret = media_packet_set_flags(pkt, MEDIA_PACKET_CODEC_CONFIG);
-</pre>If the media_packet contains the end of stream, it is needed to set end of
- stream flag. The eos callback will be invoked if the eos packet is
- decoded or encoded and eos callback is set.<br />
- <pre class="prettyprint">ret = media_packet_set_flags(pkt, MEDIA_PACKET_END_OF_STREAM);
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains the end of stream, you must set the end of stream (eos) flag. The eos callback is invoked if the eos packet is decoded or encoded and the eos callback is set.</p>
+<pre class="prettyprint">ret = media_packet_set_flags(pkt, MEDIA_PACKET_END_OF_STREAM);
</pre></li>
- <li>Start the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span>
- and <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span>
- functions.
-
<pre class="prettyprint">media_packet_h in_buf = NULL;
-ret = mediacodec_process_input (mediacodec, in_buf, 0);
+
+
+<li>Start the media codec using the <span style="font-family: Courier New,Courier,monospace">mediacodec_process_input()</span> and <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> functions.
+<pre class="prettyprint">media_packet_h in_buf = NULL;
+ret = mediacodec_process_input(mediacodec, in_buf, 0);
media_packet_h output_buf = NULL;
-ret = mediacodec_get_output (mediacodec, &output_buf, 0);
+ret = mediacodec_get_output(mediacodec, &output_buf, 0);
+</pre>
+</li>
+<li>After calling the <span style="font-family: Courier New,Courier,monospace">mediacodec_get_output()</span> function, you can check the frame using the <span style="font-family: Courier New,Courier,monospace">media_packet</span>. You can check whether the <span style="font-family: Courier New,Courier,monospace">media_packet</span> contains key frame or codec data:
+<pre class="prettyprint">bool keyframe;
+bool codec_config;
+
+ret = media_packet_is_sync_frame(pkt, &keyframe);
+ret = media_packet_is_codec_config(pkt, &codec_config);
</pre>
- </li>
- <li>After calling mediacodec_get_output(), you can check frame using
- media_packet()<br />
- If the media_packet contains key frame or codec data, you can
- check as below.<br />
- <pre class="prettyprint">bool keyframe;<br />bool codec_config;<br /><br />ret = media_packet_is_sync_frame(pkt, &keyframe);<br />ret = media_packet_is_codec_config(pkt, &codec_config);
-</pre><br />
- <br />
- </li>
- </ol>
- <h2 name="release" id="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);
+</li>
+</ol>
+
+ <h2 id="release" name="release">Releasing Resources</h2>
+
+<p>After you have finished work with the media codec, 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:</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>
- <script src="../../scripts/jquery.zclip.min.js" type="text/javascript"></script>
- <script src="../../scripts/showhide.js" type="text/javascript"></script>
- </div>
- </div>
- </div>
- <a href="#" class="top sms"><img alt="Go to top" src="../../images/btn_top.gif" /></a>
- <div id="footer">
- <p class="footer">Except as noted, this content - excluding the Code
- Examples - is licensed under <a target="_blank" href="http://creativecommons.org/licenses/by/3.0/legalcode">Creative
- Commons Attribution 3.0</a> and all of the Code Examples contained
- herein are licensed under <a target="_blank" href="https://www.tizen.org/bsd-3-clause-license">BSD-3-Clause</a>.<br />
- For details, see the <a target="_blank" href="https://www.tizen.org/content-license">Content
- License</a>.</p>
- </div>
- <script type="text/javascript">
+<p>Afterwards, the media codec state is changed to <span style="font-family: Courier New,Courier,monospace">MEDIACODEC_STATE_NONE</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 - 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']);
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
- </body>
+
+</body>
</html>
<pre class="prettyprint">
#include <media_format.h>
</pre></li>
-<li>Define a handle for <span style="font-family: Courier New,Courier,monospace">media_format_h</span> and pass it to the <span style="font-family: Courier New,Courier,monospace">media_format_create()</span> function, which returns the handle. Set the video (or audio) information with the <span style="font-family: Courier New,Courier,monospace">media_format_set_video_info()</span> function.
+<li>Define a handle for <span style="font-family: Courier New,Courier,monospace">media_format_h</span> and pass it to the <span style="font-family: Courier New,Courier,monospace">media_format_create()</span> function, which returns the handle. <p>Set the video (or audio) information, as shown below.</p>
<pre class="prettyprint">
media_format_h format;
if (media_format_create(&format) == MEDIA_FORMAT_ERROR_NONE)
{
- if (media_format_set_video_info(format, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000) != MEDIA_FORMAT_ERROR_NONE)
- {
- printf("media_format_set_video_info failed!");
- }
+ media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+ media_format_set_video_width(format, 640);
+ media_format_set_video_height(format, 480);
+ media_format_set_video_avg_bps(format, 10000000);
+ media_format_set_video_max_bps(format, 15000000);
}
else
{
</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>To reuse the packet handle even if the <span style="font-family: Courier New,Courier,monospace">media_packet_destroy() </span> function is called, 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>.</p>
+<p>Use the <span style="font-family: Courier New,Courier,monospace">media_format_unref(media_format_h fmt)</span> function after creating the handle, because, all functions that create the <span style="font-family: Courier New,Courier,monospace">media_packet_h</span> handle increase the <span style="font-family: Courier New,Courier,monospace">media_format_h</span> handle reference count.</p>
<p>The following creation functions are available:</p>
<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_packet_h packet;
media_format_create(&fmt);
- media_format_set_video_info(fmt, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000);
-
+ media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+ media_format_set_video_width(format, 640);
+ media_format_set_video_height(format, 480);
+ media_format_set_video_avg_bps(format, 10000000);
+ media_format_set_video_max_bps(format, 15000000);
+
+ // MEDIA_FORMAT_H264_HP data type is MEDIA_FORMAT_ENCODED and the buffer is allocated in heap
+ // If the data type is MEDIA_FORMAT_RAW, the buffer is allocated in the tbm surface
+
media_packet_create_alloc (fmt, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
+
+ media_packet_destroy(packet);
}
int _finalize_callback(media_packet_h packet, int err, void* userdata)
media_packet_h packet;
media_format_create(&fmt);
- media_format_set_video_info(fmt, MEDIA_FORMAT_H264_HP, 480, 640, 10000000, 15000000);
-
+ media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+ media_format_set_video_width(format, 640);
+ media_format_set_video_height(format, 480);
+ media_format_set_video_avg_bps(format, 10000000);
+ media_format_set_video_max_bps(format, 15000000);
+
+ // Only create a handle, do not allocate the buffer
media_packet_create (fmt, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
}
{
return MEDIA_PACKET_FINALIZE;
}
-
</pre>
</li>
<li>Create a handle and store the TBM surface data with the <span style="font-family: Courier New,Courier,monospace">media_packet_create_from_tbm_surface()</span> function:
media_packet_h packet;
media_format_create(&fmt);
- media_format_set_video_info(fmt, MEDIA_FORMAT_RGBA, 128, 128, 2000000, 15000000);
+ media_format_set_video_mime(format, MEDIA_FORMAT_RGBA);
+ media_format_set_video_width(format, 128);
+ media_format_set_video_height(format, 128);
+ media_format_set_video_avg_bps(format, 10000000);
+ media_format_set_video_avg_bps(format, 15000000);
media_packet_create_from_tbm_surface (fmt, surface, _finalize_callback, fcb_data, &packet);
media_format_unref(fmt);
{
return MEDIA_PACKET_FINALIZE;
}
+</pre>
+</li>
+<li>Create handle with an already allocated external buffer by using the <span style="font-family: Courier New,Courier,monospace">media_packet_create_from_external_memory()</span> function:
+<pre class="prettyprint">
+{
+ media_format_h fmt;
+ media_packet_h packet;
+
+ media_format_create(&fmt);
+ media_format_set_video_mime(format, MEDIA_FORMAT_H264_HP);
+ media_format_set_video_width(format, 640);
+ media_format_set_video_height(format, 480);
+ media_format_set_video_avg_bps(format, 10000000);
+ media_format_set_video_avg_bps(format, 15000000);
+ media_packet_create_from_external_memory (fmt, mem_ptr, size, _finalize_callback, fcb_data, &packet);
+ media_format_unref(fmt);
+}
+int _finalize_callback(media_packet_h packet, int err, void* userdata)
+{
+ // Do something
+
+ return MEDIA_PACKET_FINALIZE;
+}
</pre>
-</li></ul></li>
+</li>
+</ul></li>
<li>Set and get the metadata with the media packet handle:
<pre class="prettyprint">
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />
+ <script type="text/javascript" src="../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Media Vision: Generating and Detecting Barcodes</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 Media Vision</a></li>
+ <li><a href="#generate">Generating Barcodes</a></li>
+ <li><a href="#detect">Detecting Barcodes</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/multimedia/media_vision_n.htm">Media Vision Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Media Vision: Generating and Detecting Barcodes</h1>
+
+<p>This tutorial demonstrates how you can generate and detect barcodes.</p>
+
+<h2>Warm-up</h2>
+
+<p>Become familiar with the Media Vision API basics by learning about:</p>
+
+ <ul>
+ <li><a href="#init">Initializing Media Vision</a>
+ <p>Initialize the bar code reader and generator for use.</p></li>
+ <li><a href="#generate">Generating Barcodes</a>
+ <p>Create barcodes into memory and a PNG file.</p></li>
+ <li><a href="#detect">Detecting Barcodes</a>
+ <p>Detect barcodes from the device camera preview.</p></li>
+ </ul>
+
+<h2 id="init" name="init">Initializing Media Vision</h2>
+<p>To initialize Media Vision:</p>
+<ol>
+<li>To use the barcode-related functions and data types of the Media Vision API, include the <span style="font-family: Courier New,Courier,monospace;"><mv_barcode.h></span> header file in your application:
+<pre class="prettyprint">
+#include <mv_barcode.h>
+</pre>
+</li>
+<li>For barcode generation, create a structure to store the global data with the <span style="font-family: Courier New,Courier,monospace;">bargendata_s</span> structure:
+<pre class="prettyprint">
+typedef struct _bargendata_s
+{
+ // Generate the variables to store barcode information
+ mv_barcode_type_e type;
+ mv_barcode_qr_ecc_e ecc;
+ mv_barcode_qr_mode_e mode;
+ int version;
+
+ size_t width;
+ size_t height;
+
+ mv_barcode_image_format_e image_format;
+
+ mv_source_h g_source;
+} bargendata_s;
+
+static bargendata_s bargendata;
+</pre>
+</li>
+
+
+<li>For barcode detection:
+<ol type="a">
+<li>Include the <span style="font-family: Courier New,Courier,monospace;"><camera.h></span> header file to handle camera preview images:
+<pre class="prettyprint">
+#include <camera.h>
+</pre>
+</li>
+<li>Create a structure to store the global data with the <span style="font-family: Courier New,Courier,monospace;">bardetdata_s</span> structure:
+<pre class="prettyprint">
+typedef struct _bardetdata_s
+{
+ // Generate the variables for the camera display
+ Evas_Object *win;
+ Evas_Object *rect;
+ Evas *evas;
+
+ int preview_width;
+ int preview_height;
+
+ mv_source_h g_source;
+ mv_engine_config_h g_engine_cfg;
+
+ camera_h g_camera;
+} bargendata_s;
+
+static bardetdata_s bardetdata;
+</pre>
+</li>
+<li>Create a <span style="font-family: Courier New,Courier,monospace;">g_source</span> source handle using the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function.
+<p>The data, including the barcode to be detected, is handled through the source handle.</p>
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&bardetdata.&g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+<li>Configure the barcode detection engine with the <span style="font-family: Courier New,Courier,monospace;">mv_create_engine_config()</span> function. The function configures 2 engine attributes with default values:
+
+<ul><li>The <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_MODE</span> attribute defines the detection mode using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect_attr_mode_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga5b2cd376bdb6d63835fc7867d2842ccd">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga5b2cd376bdb6d63835fc7867d2842ccd">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_MODE_VIDEO</span>.</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET</span> attribute defines the detection target using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect_attr_target_e</span> enumerator (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__BARCODE__MODULE.html#ga47aaef5d40653352c5bee73b227062a6">wearable</a> applications). The default value is <span style="font-family: Courier New,Courier,monospace;">MV_BARCODE_DETECT_ATTR_TARGET_ALL</span>.</li></ul>
+
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_engine_config(&bardetdata.&g_engine_cfg);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+<li>To provide camera preview images, create the camera handle, set the display and preview callback, and start the camera preview:
+<pre class="prettyprint">
+// Create the camera handle
+error_code = camera_create(CAMERA_DEVICE_CAMERA0, &bardetdata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+// Set the camera display
+error_code = camera_set_display(bardetdata.g_camera, CAMERA_DISPLAY_TYPE_OVERLAY, GET_DISPLAY(bardetdata.win);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+// Get the camera preview resolution
+error_code = camera_get_preview_resolution(bardetdata.g_camera, & bardetdata.width, & bardetdata.height);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code %d", error_code);
+}
+
+// Set the camera preview callback
+error_code = camera_set_media_packet_preview_cb(bardetdata.g_camera, _camera_media_packet_preview_cb, NULL);l
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+// Start the camera preview
+error_code = camera_start_preview(barcodeAppData.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+<p>For more information about the <span style="font-family: Courier New,Courier,monospace;">camera_set_display()</span> function, see <a href="camera_tutorial_n.htm#init">Initializing the Camera</a> in the Camera tutorial.</p>
+</li>
+</ol>
+</li>
+</ol>
+
+
+
+
+<h2 id="generate" name="generate">Generating Barcodes</h2>
+
+<p>To generate barcodes:</p>
+<ol>
+<li>To generate barcodes, define the barcode type. In case of the QR code type, additional error correction level, encoding mode, and its version must be set.
+<pre class="prettyprint">
+bargendata.type = MV_BARCODE_QR;
+bargendata.ecc = MV_BARCODE_QR_ECC_LOW;
+bargendata.mode = MV_BARCODE_QR_MODE_BYTE;
+bargendata.version = 20;
+</pre>
+</li>
+<li>Execute the generation process:
+<ul>
+<li>To generate a barcode into memory:
+<ol type="a">
+<li>Create the <span style="font-family: Courier New,Courier,monospace;">g_source</span> source handle using the <span style="font-family: Courier New,Courier,monospace;">mv_create_source()</span> function.
+<p>The <span style="font-family: Courier New,Courier,monospace;">g_source</span> handle is used to save the generated barcode information and the memory address.</p>
+<pre class="prettyprint">
+int error_code = 0;
+
+error_code = mv_create_source(&bargendata.g_source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code= %d", error_code);
+}
+</pre>
+</li>
+<li>Generate the barcode using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_generate_source()</span> function:
+<pre class="prettyprint">
+error_code = mv_barcode_generate_source(NULL, "MediaVision-Tutorial-QRcode", bargendata.type,
+ bargendata.mode, bargendata.ecc, bargendata.version, bargendata .g_source);
+
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+<li>To get the width, height, color space, and memory address of the barcode, use the <span style="font-family: Courier New,Courier,monospace;">mv_source_get_width()</span>, <span style="font-family: Courier New,Courier,monospace;">mv_source_get_height()</span>, <span style="font-family: Courier New,Courier,monospace;">mv_source_get_colorspace()</span>, and <span style="font-family: Courier New,Courier,monospace;">mv_source_get_buffer()</span> functions:
+<pre class="prettyprint">
+mv_colorspace_e image_colorspace = MEDIA_VISION_COLORSPACE_INVALID;
+unsigned int image_width = 0;
+unsigned int height_height = 0;
+unsigned char *image_buffer_ptr = NULL;
+unsigned int image_buffer_size = 0;
+
+error_code = mv_source_get_width(bargendata.source, &image_width);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = mv_source_get_height(bargendata.source, &image_height);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = mv_source_get_colorspace(bargendata.source, &image_colorspace);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = mv_source_get_buffer(bargendata.source, &image_buffer_ptr, &image_buffer_size);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+<li>When the barcode generation is complete, release the <span style="font-family: Courier New,Courier,monospace;">g_source</span> handle:
+<pre class="prettyprint">
+error_code = mv_source_destroy(bargendata.source);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+</ol>
+</li>
+<li>To generate a barcode into a file:
+<ol type="a">
+<li>Define the file format and image resolution:
+<pre class="prettyprint">
+bargendata.width = 800;
+bargendata.height = 800;
+
+bargendata.image_format = MV_BARCODE_IMAGE_FORMAT_PNG;
+</pre>
+</li>
+<li>Generate the barcode using the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_generate_image()</span> function.
+<p>In the following example, the generated file is saved in the <span style="font-family: Courier New,Courier,monospace;">/opt/usr/media</span> directory with the file name <span style="font-family: Courier New,Courier,monospace;">mv_barcode_qrcode.png</span>.</p>
+<pre class="prettyprint">
+error_code = mv_barcode_generate_image(NULL, "MediaVision-Tutorial-QRcode",
+ bargendata.width, bargendata.height, bargendata.type,
+ bargendata.mode, bargendata.ecc, bargendata.version,
+ "/opt/usr/media/mv_barcode_qrcode.png", bargendata.image_format);
+
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+</li>
+</ol>
+</li>
+</ul>
+</li>
+</ol>
+
+
+<h2 id="detect" name="detect">Detecting Barcodes</h2>
+
+<p>To detect barcodes:</p>
+<ol>
+<li>Fill the <span style="font-family: Courier New,Courier,monospace;">g_source</span> source handle with the media packet using the <span style="font-family: Courier New,Courier,monospace;">mv_source_fill_by_media_packet()</span> function.
+<p>Use the media packet, because the camera preview images can be received through the <span style="font-family: Courier New,Courier,monospace;">_camera_media_packet_preview_cb()</span> callback function as a media packet handle. </p>
+<pre class="prettyprint">
+static void _camera_media_packet_preview_cb (media_packet_h pkt, void *user_data)
+{
+ mv_rectangle_s mv_roi = { {0,0}, bardetdata.width, bardetdata.height};
+
+ if (pkt == NULL)
+ {
+ return;
+ }
+
+ error_code = mv_source_fill_by_media_packet(bardetdata.g_source, pkt);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error code);
+ }
+
+ if (pkt)
+ {
+ error_code = media_packet_destroy(pkt);
+ pkt = NULL;
+ }
+</pre>
+</li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace;">mv_barcode_detect()</span> function to detect barcodes.
+<p>The ROI (Region of Interest) feature is supported to set the region to detect barcode on a whole image resolution. In this example, the whole image resolution is set to the ROI.</p>
+<pre class="prettyprint">
+ error_code = mv_barcode_detect(bardetdata.g_source, bardetdata.g_engine_cfg, mv_roi, _barcode_detected_cb, NULL);
+ if (error_code != MEDIA_VISION_ERROR_NONE)
+ {
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+ }
+}
+</pre>
+</li>
+
+<li>Implement the <span style="font-family: Courier New,Courier,monospace;">_barcode_detected_cb()</span> callback function, which is triggered when a barcode is detected.
+<p>In the callback, when the number of detected barcodes is more than zero, print the number of detected barcodes and their messages. The used source must be cleared to use the next preview image.</p>
+<pre class="prettyprint">
+static void _barcode_detected_cb (mv_source_h source,
+mv_engine_config_h engine_cfg, const mv_quadrangle_s *barcode_locations,
+const char *message[],
+const mv_barcode_type_e *types,
+int number_of_barcodes,
+void *user_data)
+{
+ int i = 0;
+ char type[50] = {‘\0};
+
+ mv_source_clear(mv_source);
+ if (number_of_barcode > 0)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "the number of barcodes: %d", number_of barcode);
+ for (i=0; i<number_of_barcodes; i++)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "%d >> message: %s\n", I, messages[i]);
+ }
+ }
+}
+</pre>
+</li>
+<li>After barcode detection is complete, stop the camera preview, unset the preview callback function, and destroy the camera resource:
+<pre class="prettyprint">
+error_code = camera_unset_media_packet_preview_cb (bardetdata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = camera_stop_preview(bardetdata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = camera_destroy(bardetdata.g_camera);
+if (error_code != CAMERA_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</pre>
+<p>For more information, see <a href="camera_tutorial_n.htm#release">Releasing Resources</a> in the Camera tutorial.</p>
+</li>
+<li>To release the <span style="font-family: Courier New,Courier,monospace;">g_source</span> and <span style="font-family: Courier New,Courier,monospace;">g_engine_cfg</span> handles, use the <span style="font-family: Courier New,Courier,monospace;">mv_destroy_source()</span> and <span style="font-family: Courier New,Courier,monospace;">mv_destroy_engine_config()</span> functions:
+<pre class="prettyprint">
+error_code = mv_destroy_engine_cfg(bardetdata.g_engine_cfg);
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+
+error_code = mv_destroy_source(bardetdata.g_source)
+if (error_code != MEDIA_VISION_ERROR_NONE)
+{
+ dlog_print(DLOG_ERROR, LOG_TAG, "error code = %d", error_code);
+}
+</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>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/multimedia/metadata_editor_n.htm">Metadata Editor Guide</a></li>
- <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
- <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>To initialize the metadata editor:</p>
<ol>
-<li><p>To use the functions and data types of the Metadata Editor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EDITOR__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><metadata_editor.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Metadata Editor API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace;"><metadata_editor.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <metadata_editor.h>
</pre></li><li><p>To work with the Metadata Editor API, create a handle to the metadata editor. A global variable is used in this tutorial.</p>
<pre class="prettyprint">
ret = metadata_editor_set_path(g_metadata_h, music_test_path);
</pre></li>
-<li>Edit the metadata in the file with the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_set_metadata()</span> function. As parameters, define the metadata editor handle, the wanted data type (a <span style="font-family: Courier New,Courier,monospace;">metadata_editor_attr_e</span> enumeration value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EDITOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EDITOR__MODULE.html#ga5b27fedbf5aaa22106f88b831c596872">wearable</a> applications)), and a pointer to the <span style="font-family: Courier New,Courier,monospace;">char</span> variable which is fulfilled by the function.
+<li>Edit the metadata in the file with the <span style="font-family: Courier New,Courier,monospace;">metadata_extractor_set_metadata()</span> function. As parameters, define the metadata editor handle, the wanted data type (a <span style="font-family: Courier New,Courier,monospace;">metadata_editor_attr_e</span> enumeration value (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html#ga1c6a8dcf861f527302e9c55152692df3">wearable</a> applications)), and a pointer to the <span style="font-family: Courier New,Courier,monospace;">char</span> variable which is fulfilled by the function.
<p>The following code snippet edits the title of the audio content. Other metadata attributes can be similarly updated.</p>
<li><a href="media_codec_tutorial_n.htm">Media Codec: Encoding and Decoding Media Files</a> <p>Demonstrates how you can encode and decode media files.</p></li>
<li><a href="media_controller_tutorial_n.htm">Media Controller: Communicating between the Server and Client for Media Control</a> <p>Demonstrates how you can communicate between the media controller server and the media controller client.</p></li>
<li><a href="media_tools_tutorial_n.htm">Media Tool: Managing Media Handles</a> <p>Demonstrates how you can manage media handles.</p></li>
+ <li><a href="media_vision_tutorial_n.htm">Media Vision: Generating and Detecting Barcodes</a> <p>Demonstrates how you can create and read barcodes.</p></li>
<li><a href="metadata_editor_tutorial_n.htm">Metadata Editor: Editing Metadata from an Input Audio File</a> <p>Demonstrates how you can edit the metadata of several popular audio formats.</p></li>
<li><a href="metadata_extractor_tutorial_n.htm">Metadata Extractor: Extracting Metadata from an Input Media File</a> <p>Demonstrates how you can get metadata from media files.</p></li>
<li><a href="player_tutorial_n.htm">Player: Playing Multimedia Content from a File, Network, and Memory</a> <p>Demonstrates how you can play audio and video files, and control audio equalizer.</p></li>
<p>The <span style="font-family: Courier New,Courier,monospace"><Elementary.h></span> header file is needed for setting the display.</p></li>
<li>
+<p>You must get the default path for this tutorial. For the following example code, you must include the <span style="font-family: Courier New,Courier,monospace;"><storage.h></span> header file.</p>
+<pre class="prettyprint">
+#define MP3_SAMPLE "SampleAudio.mp3";
+#define MP4_SAMPLE "SampleVideo.mp4";
+
+int internal_storage_id;
+char *audio_storage_path = NULL;
+char *video_storage_path = NULL;
+char *audio_path = NULL;
+char *video_path = NULL;
+
+static bool storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
+{
+ if (type == STORAGE_TYPE_INTERNAL)
+ {
+ internal_storage_id = storage_id;
+
+ return false;
+ }
+
+ return true;
+}
+
+void _get_storage_path()
+{
+ int error_code = 0;
+ char *path = NULL;
+
+ error_code = storage_foreach_device_supported(storage_cb, NULL);
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_MUSIC, &path);
+ if (error_code != STORAGE_ERROR_NONE)
+ {
+ audio_storage_path = strdup(path);
+ free(path);
+ }
+
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_VIDEOS, &path);
+ if (error_code != STORAGE_ERROR_NONE)
+ {
+ video_storage_path = strdup(path);
+ free(path);
+ }
+}
+
+void _set_test_path()
+{
+ int path_len = 0;
+
+ path_len = strlen(audio_storage_path) + strlen(MP3_SAMPLE) + 1;
+ audio_path = malloc(path_len);
+ memset(audio_path, 0x0, path_len);
+
+ strncat(audio_path, audio_storage_path, strlen(audio_storage_path));
+ strncat(audio_path, MP3_SAMPLE, strlen(MP3_SAMPLE));
+
+ path_len = strlen(video_storage_path) + strlen(MP4_SAMPLE) + 1;
+ video_path = malloc(path_len);
+ memset(video_path, 0x0, path_len);
+
+ strncat(video_path, video_storage_path, strlen(video_storage_path));
+ strncat(video_path, MP4_SAMPLE, strlen(MP4_SAMPLE));
+}
+</pre>
+</li>
+
+<li>
<p>Create a player handle and pass it to the <span style="font-family: Courier New,Courier,monospace;">player_create()</span> function. You need the player handle for defining which file to play and with what playback settings.</p>
<pre class="prettyprint">
-#define MP3_SAMPLE = "/opt/usr/media/SampleAudio.mp3";
-#define MP4_SAMPLE = "/opt/usr/media/SampleVideo.mp4";
-
typedef struct appdata
{
player_h player;
<p>To specify the source file to play, use the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
-<pre class="prettyprint">error_code = player_set_uri(ad->player, MP3_SAMPLE);</pre>
+<pre class="prettyprint">error_code = player_set_uri(ad->player, audio_path);</pre>
</li>
<li>
<p>To specify the source file to play, use the <span style="font-family: Courier New,Courier,monospace;">player_set_uri()</span> function:</p>
-<pre class="prettyprint">error_code = player_set_uri(ad->player, MP4_SAMPLE);</pre>
+<pre class="prettyprint">error_code = player_set_uri(ad->player, video_path);</pre>
</li>
</li>
-<li>
+<li id="play_video_2">
<p>Play the video file:</p>
static player_h player_1, player_2, player_3;
static player_state_e state_1, state_2, state_3;
static int ret =0;
-static char *path_1 = "tmp/sample.3gp";
-static char *path_2 = "tmp/test.wav";
-static char *path_3 = "tmp/test2.wav";
+static char *path_1 = NULL;
+static char *path_2 = NULL;
+static char *path_3 = NULL;
+char *resource_path = NULL;
+
+resource_path = app_get_resource_path();
+snprintf(path_1, sizeof(path_1)-1, "%s/sample.3gp", resource_path);
+snprintf(path_2, sizeof(path_2)-1, "%s/test.wav", resource_path);
+snprintf(path_3, sizeof(path_3)-1, "%s/test2.wav", resource_path);
+free(resource_path);
+
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>
<h2 id="insert" name="insert">Inserting Subtitles</h2>
<p>To insert subtitles to a video file:</p>
-<ol><li><a href="#init">Create the player handle</a> and <a href="#play_video">prepare the player</a>.</li>
+<ol><li><a href="#init">Create the player handle</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"
</tbody>
</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>
+<p>After setting the subtitle path, <a href="#play_video">set video display and prepare the player</a>. You can <a href="#play_video_2">play the video file</a> as usual, by starting the player.</p></li></ol>
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
<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>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__SINK__MODULE.html">Screen Mirroring Sink API for Wearable Native</a></li>
</ul>
</div></div>
</div>
<p>To initialize the screen mirroring sink:</p>
-<ol><li><p>To use the functions and data types of the Screen Mirroring Sink 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 files in your application:</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__SCREEN__MIRRORING__SINK__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__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>
<p>To handle screen mirroring exceptions:</p>
-<p>If the state callback function returns
the error or 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>
+<p>If the state callback function returns
an error or 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);
- if(error_code != SCMIRRORING_ERROR_NONE)
+
+ if (error_code != SCMIRRORING_ERROR_NONE)
{
- ret = destroy_scmirroring_sink(); // see <a href="#release">Releasing Resources</a>
- if(ret != TRUE)
+ ret = destroy_scmirroring_sink();
+ if (ret != TRUE)
{
- dlog_print(DLOG_ERROR, LOG_TAG, " destroy_scmirroring_sink fail");
+ dlog_print(DLOG_ERROR, LOG_TAG, " destroy_scmirroring_sink fail");
+
return;
}
}
{
int wav_player_id;
wav_player_error_e ret;
- const char* wav_path = "/tmp/test.wav";
+ const char* wav_path = "PATH OF YOUR WAV FILE";
ret = wav_player_start(wav_path, SOUND_TYPE_MEDIA, _playback_completed_cb, (void*)wav_path, &wav_player_id);
}
</pre>
+
+<p>To set the path of your WAV file, you may need to get the default path. For more information, see the <a href="../system/storage_tutorial_n.htm">Storage Tutorial</a>.</p>
+
</li>
<li>Stop the WAV player.
<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>To use the functions and data types of the Socket API, include the following header files:
+<pre class="prettyprint">
+#include <sys/stat.h>
+#include <arpa/inet.h>
+#include <netdb.h>
+#include <net/if.h>
+</pre>
+</li>
+
<li>Declare the necessary variables:
<pre class="prettyprint">
int main(int argc, char **argv)
rv = connection_get_type(connection, &net_state);
if (rv != CONNECTION_ERROR_NONE || net_state == CONNECTION_TYPE_DISCONNECTED)
{
- printf("Not connected %d\n", rv);
+ dlog_print(DLOG_INFO, LOG_TAG, "Not connected %d\n", rv);
connection_destroy(connection);
return -1;
rv = connection_get_current_profile(connection, &profile_h);
if (rv != CONNECTION_ERROR_NONE)
{
- printf("Fail to get profile handle %d\n", rv);
+ dlog_print(DLOG_INFO, LOG_TAG, "Fail to get profile handle %d\n", rv);
connection_destroy(connection);
return -1;
if (rv == CONNECTION_ERROR_NONE && g_strcmp0(local_ipv6, "::") != 0)
{
ip_type = CONNECTION_ADDRESS_FAMILY_IPV6;
- printf("IPv6 address : %s\n", local_ipv6);
+ dlog_print(DLOG_INFO, LOG_TAG, "IPv6 address : %s\n", local_ipv6);
}
// If both IPv4 and IPv6 types are set, the IPv4 type is used as default here
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);
+ dlog_print(DLOG_INFO, LOG_TAG, "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;
+ dlog_print(DLOG_INFO, LOG_TAG, "No IP address!\n");
+ // Error handling
}
connection_profile_get_network_interface_name(profile_h, &interface_name);
- printf("Interface Name:%s\n", interface_name);
+ dlog_print(DLOG_INFO, LOG_TAG, "Interface Name:%s\n", interface_name);
}
</pre>
</li>
<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>Define the user URL and message to be sent.</li>
<li>Retrieve the IP addresses:
<pre class="prettyprint">
struct sockaddr_in6 *addr6;
if (getaddrinfo(user_url, user_port, &hints, &result) != 0)
{
- printf("getaddrinfo() error\n");
- goto done;
+ dlog_print(DLOG_INFO, LOG_TAG, "getaddrinfo() error\n");
+ // Error handling
}
}
</pre>
{
if ((sockfd = socket(AF_INET, SOCK_STREAM, 0)) > 0)
{
- printf("socket error\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "socket error\n");
freeaddrinfo(result);
- goto done;
}
- printf("IPv4\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "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");
+ dlog_print(DLOG_INFO, LOG_TAG, "socket error\n");
freeaddrinfo(result);
- goto done;
}
- printf("IPv6\n");
+ dlog_print(DLOG_INFO, LOG_TAG, "IPv6\n");
}
}
</pre>
<pre class="prettyprint">
if (connect(sockfd, rp->ai_addr, rp->ai_addrlen) < 0)
{
- printf("connect() error: %s\n", strerror(errno));
+ dlog_print(DLOG_INFO, LOG_TAG, "connect() error: %s\n", strerror(errno));
freeaddrinfo(result);
close(sockfd);
- goto done;
}
</pre>
</li>
char *interface_name = NULL;
connection_profile_get_network_interface_name(profile_h, &interface_name);
-printf("Interface Name:%s\n", interface_name);
+dlog_print(DLOG_INFO, LOG_TAG, "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));
+ dlog_print(DLOG_INFO, LOG_TAG, "connect() error: %s\n", strerror(errno));
freeaddrinfo(result);
close(sockfd);
- goto done;
}
</pre>
</li>
<pre class="prettyprint">
if ((count = write(sockfd, user_msg, 200)) < 0)
{
- printf("write() error: %s\n", strerror(errno));
+ dlog_print(DLOG_INFO, LOG_TAG, "write() error: %s\n", strerror(errno));
freeaddrinfo(result);
close(sockfd);
-
- goto done;
}
-printf("Sent count: %d, msg: %s\n", count, user_msg);
+dlog_print(DLOG_INFO, LOG_TAG, "Sent count: %d, msg: %s\n", count, user_msg);
</pre>
</li>
<li>Read a message from the remote host:
if ((count = read(sockfd, buf, 256)) < 0)
{
- printf("read() error: %s\n", strerror(errno));
+ dlog_print(DLOG_INFO, LOG_TAG, "read() error: %s\n", strerror(errno));
freeaddrinfo(result);
close(sockfd);
-
- goto done;
}
buf[count] = '\0';
-printf("\nRead: %s\n", buf);
+dlog_print(DLOG_INFO, LOG_TAG, "\nRead: %s\n", buf);
</pre>
</li></ul></li>
<li>Close the socket and release the resources:
connection_profile_destroy(profile_h);
connection_destroy(connection);
- g_free(local_ipv6);
- g_free(local_ipv4);
- g_free(interface_name);
+ free(local_ipv6);
+ free(local_ipv4);
+ free(interface_name);
return 0;
</pre>
{
TC_PRT("smartcard_channel_transmit_get_response is success");
TC_PRT("response is ");
- for ( i = 0; i < pLength; i++)
+ for (i = 0; i < pLength; i++)
TC_PRT("%x ", (int)ptransmitResponse[i]);
TC_PRT("\n");
}
<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;"><tizen-manifest.xml></span> file of the application package.</p></li>
+<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;">manifest.xml</span> file of the application package.</p></li>
<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>
int ret = CKMC_ERROR_NONE;
ckmc_cert_s *pcert;
-const char *file_name = "<defined_media_storage_directory>/ckmc_test_cert.pem"; // defined_media_storage_directory can be obtained through storgae_get_directory() api
+// defined_media_storage_directory can be obtained with the storage_get_directory() function
+const char *file_name = "<defined_media_storage_directory>/ckmc_test_cert.pem";
ret = ckmc_load_cert_from_file(file_name, &pcert);
if (CKMC_ERROR_NONE != ret)
ckmc_key_s *private_key = NULL;
ckmc_cert_s *cert = NULL;
ckmc_cert_list_s *ca_cert_list = NULL;
-const char *p12file = "<defined_media_storage_directory>/ckmc_p12_test.p12"; // defined_media_storage_directory can be obtained through storgae_get_directory() api
+// defined_media_storage_directory can be obtained with the storage_get_directory() function
+const char *p12file = "<defined_media_storage_directory>/ckmc_p12_test.p12";
const char *password = "password"; // PKCS#12 file can be protected by a password
ret = ckmc_load_from_pkcs12_file(p12file, password, &private_key, &cert, &ca_cert_list);
</script>
</body>
- </html>
+ </html>
\ No newline at end of file
<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">
int ret = -1;
char* capability = "http://tizen.org/account/capability/contact";
-ret = account_type_query_by_provider_feature(account_type_callback, capability, NULL);
+ret = account_type_create(&account_type);
+
+account_type_query_by_provider_feature(account_type_callback, capability, NULL);
</pre></li>
</ol>
</li>
<li>Create an account.
-<p>For more information, see
the <a href="#add">Creating and Managing an Account</a>.</p>
+<p>For more information, see <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)
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="#screen">Adding an Application on the Account Screen</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 <a href="#screen">Adding an Application on the Account Screen</a>.</p>
<pre class="prettyprint">// List_Account() console output
MyCallback ID: 12
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.description, "description");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set description failed : %x\n", error_code);</pre></li>
-<li>Set the event timezone ID.
-<p>The start and end time must be inserted in the event. If the timezone ID is not inserted, the timezone for the start and end time is considered to be UTC. The properties are in the <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> file.</p>
+<li>Set the event time zone ID.
+<p>The start and end time must be inserted in the event. If the time zone ID is not inserted, the time zone for the start and end time is considered to be UTC. The properties are in the <span style="font-family: Courier New,Courier,monospace">calendar_view.h</span> file.</p>
<pre class="prettyprint">error_code = calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
if (error_code != CALENDAR_ERROR_NONE)
dlog_print(DLOG_ERROR, LOG_TAG, "set start_tzid failed : %x\n", error_code);
calendar_record_h event = NULL;
error_code += calendar_record_create(_calendar_event._uri, &event);
-error_code += calendar_record_set_str(event, _calendar_event.summary, "test");
-error_code += calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
-error_code += calendar_record_set_str(event, _calendar_event.end_tzid, "Asia/Seoul");
+error_code += calendar_record_set_str(event, _calendar_event.summary, "test");
+error_code += calendar_record_set_str(event, _calendar_event.start_tzid, "Asia/Seoul");
+error_code += calendar_record_set_str(event, _calendar_event.end_tzid, "Asia/Seoul");
calendar_time_s st = {0};
st.type = CALENDAR_TIME_UTIME;
st.time.utime = 1349226000;
-error_code += calendar_record_set_caltime(event, _calendar_event.start_time, st);
+error_code += calendar_record_set_caltime(event, _calendar_event.start_time, st);
calendar_time_s et = {0};
et.type = CALENDAR_TIME_UTIME;
et.time.utime = 1354582800;
-error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);
+error_code += calendar_record_set_caltime(event, _calendar_event.end_time, et);
error_code += calendar_record_set_int(event, _calendar_event.freq, CALENDAR_RECURRENCE_MONTHLY);
error_code += calendar_record_set_int(event, _calendar_event.interval, 1);
<p>You can get the associated contacts of a person by query. In this example, you get the associated contact records.</p>
<pre class="prettyprint">static bool _get_associated_contacts(contacts_record_h record, contacts_list_h *associated_contacts)
{
- int error_code = CONTACTS_ERROR_NONE;
+ int error_code;
int person_id;
contacts_query_h query = NULL;
contacts_filter_h filter = NULL;
error_code = contacts_record_get_int(record, _contacts_person.id, &person_id);
+ error_code = CONTACTS_ERROR_NONE;
error_code += contacts_query_create(_contacts_contact._uri, &query);
error_code += contacts_filter_create(_contacts_contact._uri, &filter);
error_code += contacts_filter_add_int(filter, _contacts_contact.person_id, CONTACTS_MATCH_EQUAL, person_id);
return true;
}</pre>
+
<h2 id="sd_create" name="sd_create">Creating a Speed Dial</h2>
<p>To create a speed dial record:</p>
error_code = contacts_db_delete_record(_contacts_speeddial._uri, speeddial_number);
</pre>
+
<h2 id="pl_create" name="pl_create">Creating a Log</h2>
</li>
<li>Import the vCard stream.
-<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 <span style="font-family: Courier New,Courier,monospace;">.vcf</span> 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";
-DIR *dir = opendir(folder);
-struct dirent *pDirent = NULL;
-if (dir)
+int internal_storage_id;
+char *vcf_path = NULL;
+
+static bool
+storage_cb(int storage_id, storage_type_e type, storage_state_e state, const char *path, void *user_data)
{
- while ((pDirent = readdir(dir)) != NULL)
+ if (type == STORAGE_TYPE_INTERNAL)
+ {
+ internal_storage_id = storage_id;
+
+ return false;
+ }
+
+ return true;
+}
+
+void
+_get_storage_path()
+{
+ int error_code = 0;
+ char *path = NULL;
+
+ error_code = storage_foreach_device_supported(storage_cb, NULL);
+ error_code = storage_get_directory(internal_storage_id, STORAGE_DIRECTORY_DOWNLOADS, &path);
+ if (error_code != STORAGE_ERROR_NONE)
+ {
+ vcf_path = strdup(path);
+ free(path);
+ }
+}
+
+void
+_import_vcard()
+{
+ int path_len = 0;
+
+ DIR *dir = opendir(vcf_path);
+ struct dirent *pDirent = NULL;
+ if (NULL == dir)
+ {
+ free(vcf_path);
+
+ return;
+ }
+
+ while ((pDirent = readdir(dir)) != NULL)
{
if (pDirent->d_type != DT_REG)
continue;
char *extension = strrchr(pDirent->d_name, '.');
if (!extension || strcmp(extension, ".vcf"))
continue;
- char * filepath = malloc(strlen(folder)+strlen(pDirent->d_name)+4);
- sprintf(filepath, "%s/%s", folder, pDirent->d_name);
+ char * filepath = malloc(strlen(vcf_path)+strlen(pDirent->d_name)+4);
+ sprintf(filepath, "%s/%s", vcf_path, pDirent->d_name);
// Full path to file available through filepath string
<pre class="prettyprint">
bool contacts_vcard_cb(contacts_record_h record, void *user_data)
{
- // Here you have record
+ // Here you have a record
return true;
}
}
else
return 1;
- // Here import
+ // Import the contacts
contacts_list_h list_import;
err = contacts_vcard_parse_to_contacts(vcard_stream, &list_import);
if (err != 0)
+++ /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>Service Adaptor Client: Working with Plugins</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="#Starting_up">Starting up</a>
- </li>
- <li><a href="#Files_listing">Files listing</a>
- </li>
- <li><a href="#File_upload">File upload</a>
- </li>
- <li><a href="#File_download">File download</a>
- </li>
- <li><a href="#File_remove">File remove</a>
- </li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<h1>Service Adaptor Client: Working with Plugins</h1>
- <p>This tutorial demonstrates how you can use Service Adaptor Client API to work with plugins.</p>
- <h2>Warm-up</h2>
- <p>Become familiar with the Service Adaptor Client API basics:</p>
- <ul>
- <li><a href="#Starting_up">Starting up</a>
- <p>Obtaining Service Adaptor handle and plugins initialization.</p></li>
- <li><a href="#Files_listing">Files listing</a>
- <p>Obtaining list of files in the storage.</p></li>
- <li><a href="#File_upload">File upload</a>
- <p>Uploading file to the storage.</p></li>
- <li><a href="#File_download">File download</a>
- <p>Downloading file from the storage</p></li>
- <li><a href="#File_remove">File remove</a>
- <p>Removing file from the storage</p></li>
- </ul>
-
-<h2 id="Starting_up" name="Starting_up">Starting up</h2>
-<p>To use Service Adaptor Plugins in your application, you must learn to obtain Service Adaptor handle and list of available plugins:</p>
-<ol>
-<li><p>Obtain Service Adaptor handle:</p>
-<pre class="prettyprint">
-static service_adaptor_h service_adaptor;
-
-void service_adaptor_init()
-{
- int ret = service_adaptor_create(&service_adaptor);
-
- if (SERVICE_ADAPTOR_ERROR_NONE != ret)
- {
- /* Handle error */
- }
-}
-</pre>
-</li>
-<li><p>Use some data structure to store obtained plugin handles:</p>
-<pre class="prettyprint">
-struct plugin_list_item_s
-{
- service_plugin_h plugin;
- struct plugin_list_item_s *next;
-};
-
-typedef struct plugin_list_item_s plugin_list_item_t;
-typedef plugin_list_item_t plugin_list_t;
-typedef plugin_list_item_t* plugin_list_item_h;
-typedef plugin_list_t* plugin_list_h;
-
-/* Implementation details of this function are not in scope of this tutorial */
-extern void plugin_list_item_add(plugin_list_h plugins, plugin_list_item_h plugin_item);
-</pre>
-</li>
-<li><p>Obtain list of available Service Adaptor plugins:</p>
-<pre class="prettyprint">
-static plugin_list_t plugins;
-
-static bool _plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
-{
- plugin_list_item_h plugin_item = (plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
-
- /* Add plugin to the list */
- plugin_list_item_add(&plugins, plugin_item);
-
- /* Create plugin handle */
- service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin_item->plugin);
-
- /* Set plugin properties */
- service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "app_key");
- service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "app_secret");
-
- /* Initialize plugin */
- service_plugin_start(plugin_item->plugin, service_mask);
-
- return true;
-}
-
-void plugin_lookup()
-{
- /* Iterate over plugins' list */
- int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, &plugins);
-
- if (SERVICE_ADAPTOR_ERROR_NO_DATA == ret)
- {
- /* Handle no plugins */
- }
- else if (SERVICE_ADAPTOR_ERROR_NONE != ret)
- {
- /* Handle error */
- }
-}
-</pre>
-</ol>
-
-<h2 id="Files_listing" name="Files_listing">Files listing</h2>
-<p>Use obtained plugin handle to list files in the storage:</p>
-<ol>
-<pre class="prettyprint">
-static bool _file_iterator_cb(service_storage_file_h file, void *user_data)
-{
- char *name = NULL;
- unsigned long long size = 0;
- bool is_dir = false;
-
- /* Fetch basic file info */
- service_storage_file_is_dir(file, &is_dir);
- service_storage_file_get_size(file, &size);
- service_storage_file_get_logical_path(file, &name);
-
- return true;
-}
-
-static void _service_storage_result_cb(int result, service_storage_file_list_h list, void *user_data)
-{
- /* Iterate over files' list */
- service_storage_file_list_foreach_file(list, _file_iterator_cb, NULL);
-}
-
-void plugin_get_file_list(service_plugin_h plugin)
-{
- service_storage_get_file_list(plugin, "/", _service_storage_result_cb, NULL);
-}
-</pre>
-</ol>
-
-<h2 id="File_upload" name="File_upload">File upload</h2>
-<p>Uploading file to the storage requires creation of upload task in the first place:</p>
-<ol>
-<li><p>Obtain Service Adaptor handle:</p>
-<pre class="prettyprint">
-static void task_progress_cb(unsigned long long progress, unsigned long long total, void *user_data)
-{
- /* Handle task progress */
-}
-
-static void task_state_cb(service_storage_task_state_e state, void *user_data)
-{
- /* Handle task states */
- switch (state)
- {
- case SERVICE_STORAGE_TASK_IN_PROGRESS:
- break;
- case SERVICE_STORAGE_TASK_COMPLETED:
- break;
- case SERVICE_STORAGE_TASK_CANCELED:
- break;
- case SERVICE_STORAGE_TASK_FAILED:
- break;
- }
-}
-
-static int create_upload_task(service_plugin_h plugin, const char *local_path, const char *storage_path, service_storage_task_h *task)
-{
- return service_storage_create_upload_task(plugin, local_path, storage_path, task);
-}
-
-void plugin_upload_file(service_plugin_h plugin, const char *local_path, const char *storage_path)
-{
- service_storage_task_h task;
-
- /* Upload local file to the storage */
- if (SERVICE_ADAPTOR_ERROR_NONE != create_upload_task(plugin, storage_path, local_path, &task))
- {
- /* Handle create upload task error */
-
- return;
- }
-
- /* Set task progress change callback to have ability to monitor progress */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_progress_cb(task, task_progress_cb, NULL))
- {
- /* Handle error */
-
- return;
- }
-
- /* Set task state change callback to have ability to monitor state */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_state_changed_cb(task, task_state_cb, NULL))
- {
- /* Handle error */
-
- return;
- }
-
- /* Start task */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_start_task(task))
- {
- /* Handle error */
-
- return;
- }
-}
-</pre>
-</ol>
-
-<h2 id="File_download" name="File_download">File download</h2>
-<p>Downloading file from the storage requires creation of download task in the first place:</p>
-<ol>
-<pre class="prettyprint">
-static int create_download_task(service_plugin_h plugin, const char *storage_path, const char *local_path, service_storage_task_h *task)
-{
- return service_storage_create_download_task(plugin, storage_path, local_path, task);
-}
-
-void plugin_download_file(service_plugin_h plugin, const char *storage_path, const char *local_path)
-{
- service_storage_task_h task;
-
- /* Download file from storage to local directory */
- if (SERVICE_ADAPTOR_ERROR_NONE != create_download_task(plugin, storage_path, local_path, &task))
- {
- /* Handle create download task error */
-
- return;
- }
-
- /* Set task progress change callback to have ability to monitor progress */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_progress_cb(task, task_progress_cb, NULL))
- {
- /* Handle error */
-
- return;
- }
-
- /* Set task state change callback to have ability to monitor state */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_state_changed_cb(task, task_state_cb, NULL))
- {
- /* Handle error */
-
- return;
- }
-
- /* Start task */
- if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_start_task(task))
- {
- /* Handle error */
-
- return;
- }
-}
-</pre>
-</ol>
-
-<h2 id="File_remove" name="File_remove">File remove</h2>
-<p>Removing file from storage is done by calling single function:</p>
-<ol>
-<pre class="prettyprint">
-static void file_remove_cb(int result, void *user_data)
-{
- if (SERVICE_ADAPTOR_ERROR_NONE != result)
- {
- /* Handle remove error */
- }
-}
-
-void plugin_remove_file(service_plugin_h plugin, const char *file)
-{
- const int ret = service_storage_remove(plugin, file, file_remove_cb, NULL);
-
- if (SERVICE_ADAPTOR_ERROR_NONE == ret)
- {
- /* Handle error */
- }
-}
-</pre>
-</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>Service Adaptor: Working with Plugins</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="#Starting_up">Initializing the Service Adaptor</a></li>
+ <li><a href="#Files_listing">Retrieving the File List</a></li>
+ <li><a href="#File_upload">Uploading Files</a></li>
+ <li><a href="#File_download">Downloading Files</a></li>
+ <li><a href="#File_remove">Removing Files</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/social/service_adaptor_n.htm">Service Adaptor Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Service Adaptor: Working with Plugins</h1>
+ <p>This tutorial demonstrates how you can use adaptors to work with plugins.</p>
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Service Adaptor API basics:</p>
+ <ul>
+ <li><a href="#Starting_up">Initializing the Service Adaptor</a>
+ <p>Obtain the Service adaptor handle and initialize the plugins.</p></li>
+ <li><a href="#Files_listing">Retrieving the File List</a>
+ <p>Get a list of files in the storage.</p></li>
+ <li><a href="#File_upload">Uploading Files</a>
+ <p>Upload a file to the storage.</p></li>
+ <li><a href="#File_download">Downloading Files</a>
+ <p>Download a file from the storage</p></li>
+ <li><a href="#File_remove">Removing Files</a>
+ <p>Remove a file from the storage</p></li>
+ </ul>
+
+<h2 id="Starting_up" name="Starting_up">Initializing the Service Adaptor</h2>
+<p>To use Service adaptor plugins in your application, you must learn to obtain a Service adaptor handle and list of available plugins:</p>
+<ol>
+<li><p>Obtain a Service adaptor handle:</p>
+<pre class="prettyprint">
+static service_adaptor_h service_adaptor;
+
+void
+service_adaptor_init()
+{
+ int ret = service_adaptor_create(&service_adaptor);
+
+ if (SERVICE_ADAPTOR_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li><p>Use a data structure to store the obtained plugin handles:</p>
+<pre class="prettyprint">
+struct plugin_list_item_s
+{
+ service_plugin_h plugin;
+ struct plugin_list_item_s *next;
+};
+
+typedef struct plugin_list_item_s plugin_list_item_t;
+typedef plugin_list_item_t plugin_list_t;
+typedef plugin_list_item_t* plugin_list_item_h;
+typedef plugin_list_t* plugin_list_h;
+
+extern void
+plugin_list_item_add(plugin_list_h plugins, plugin_list_item_h plugin_item);
+</pre>
+</li>
+<li><p>Obtain list of available Service adaptor plugins:</p>
+<pre class="prettyprint">
+static plugin_list_t plugins;
+
+static bool
+_plugin_iterator_cb(char *plugin_uri, int service_mask, void *user_data)
+{
+ plugin_list_item_h plugin_item = (plugin_list_item_h)calloc(1, sizeof(plugin_list_item_t));
+
+ // Add plugin to the list
+ plugin_list_item_add(&plugins, plugin_item);
+
+ // Create plugin handle
+ service_adaptor_create_plugin(service_adaptor, plugin_uri, &plugin_item->plugin);
+
+ // Set plugin properties
+ service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_KEY, "app_key");
+ service_plugin_add_property(plugin_item->plugin, SERVICE_PLUGIN_PROPERTY_APP_SECRET, "app_secret");
+
+ // Initialize plugin
+ service_plugin_start(plugin_item->plugin, service_mask);
+
+ return true;
+}
+
+void
+plugin_lookup()
+{
+ // Iterate over plugin list
+ int ret = service_adaptor_foreach_plugin(service_adaptor, _plugin_iterator_cb, &plugins);
+
+ if (SERVICE_ADAPTOR_ERROR_NO_DATA == ret)
+ {
+ // Handle no plugins
+ }
+ else if (SERVICE_ADAPTOR_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+</ol>
+
+<h2 id="Files_listing" name="Files_listing">Retrieving the File List</h2>
+<p>To list the files in the storage, use the obtained plugin handle:</p>
+<pre class="prettyprint">
+static bool
+_file_iterator_cb(service_storage_file_h file, void *user_data)
+{
+ char *name = NULL;
+ unsigned long long size = 0;
+ bool is_dir = false;
+
+ // Fetch basic file info
+ service_storage_file_is_dir(file, &is_dir);
+ service_storage_file_get_size(file, &size);
+ service_storage_file_get_logical_path(file, &name);
+
+ return true;
+}
+
+static void
+_service_storage_result_cb(int result, service_storage_file_list_h list, void *user_data)
+{
+ // Iterate over file list
+ service_storage_file_list_foreach_file(list, _file_iterator_cb, NULL);
+}
+
+void
+plugin_get_file_list(service_plugin_h plugin)
+{
+ service_storage_get_file_list(plugin, "/", _service_storage_result_cb, NULL);
+}
+</pre>
+
+<h2 id="File_upload" name="File_upload">Uploading Files</h2>
+<p>To upload a file to the storage:</p>
+<ol>
+<li>Define callbacks:
+<pre class="prettyprint">
+static void
+task_progress_cb(unsigned long long progress, unsigned long long total, void *user_data)
+{
+ // Handle the task progress
+}
+
+static void
+task_state_cb(service_storage_task_state_e state, void *user_data)
+{
+ // Handle task states
+ switch (state)
+ {
+ case SERVICE_STORAGE_TASK_IN_PROGRESS:
+ break;
+ case SERVICE_STORAGE_TASK_COMPLETED:
+ break;
+ case SERVICE_STORAGE_TASK_CANCELED:
+ break;
+ case SERVICE_STORAGE_TASK_FAILED:
+ break;
+ }
+}</pre></li>
+<li><p>Create an upload task:</p>
+<pre class="prettyprint">
+static int
+create_upload_task(service_plugin_h plugin, const char *local_path, const char *storage_path, service_storage_task_h *task)
+{
+ return service_storage_create_upload_task(plugin, local_path, storage_path, task);
+}
+
+void
+plugin_upload_file(service_plugin_h plugin, const char *local_path, const char *storage_path)
+{
+ service_storage_task_h task;
+
+ // Upload a local file to the storage
+ if (SERVICE_ADAPTOR_ERROR_NONE != create_upload_task(plugin, storage_path, local_path, &task))
+ {
+ // Error handling
+
+ return;
+ }
+</pre></li>
+<li><p>Register callbacks to monitor the upload progress and task state changes:</p>
+<pre class="prettyprint">
+ // Task progress change callback
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_progress_cb(task, task_progress_cb, NULL))
+ {
+ // Error handling
+
+ return;
+ }
+
+ // Task state change callback
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_state_changed_cb(task, task_state_cb, NULL))
+ {
+ // Error handling
+
+ return;
+ }
+</pre></li>
+<li><p>Start the upload task:</p>
+<pre class="prettyprint">
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_start_task(task))
+ {
+ // Error handling
+
+ return;
+ }
+}
+</pre></li>
+</ol>
+
+<h2 id="File_download" name="File_download">Downloading Files</h2>
+<p>To download a file from the storage:</p>
+<ol>
+<li>Create a download task:
+<pre class="prettyprint">
+static int
+create_download_task(service_plugin_h plugin, const char *storage_path, const char *local_path, service_storage_task_h *task)
+{
+ return service_storage_create_download_task(plugin, storage_path, local_path, task);
+}
+
+void
+plugin_download_file(service_plugin_h plugin, const char *storage_path, const char *local_path)
+{
+ service_storage_task_h task;
+
+ // Download file from the storage to a local directory
+ if (SERVICE_ADAPTOR_ERROR_NONE != create_download_task(plugin, storage_path, local_path, &task))
+ {
+ // Error handling
+
+ return;
+ }
+</pre></li>
+<li>Register callbacks to monitor the download progress and task state changes:
+<pre class="prettyprint">
+ // Task progress change callback
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_progress_cb(task, task_progress_cb, NULL))
+ {
+ // Error handling
+
+ return;
+ }
+
+ // Task state change callback
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_set_task_state_changed_cb(task, task_state_cb, NULL))
+ {
+ // Error handling
+
+ return;
+ }
+</pre></li>
+<li>Start the download task:
+<pre class="prettyprint">
+ if (SERVICE_ADAPTOR_ERROR_NONE != service_storage_start_task(task))
+ {
+ // Error handling
+
+ return;
+ }
+}
+</pre></li>
+</ol>
+
+<h2 id="File_remove" name="File_remove">Removing Files</h2>
+<p>To remove a file from the storage, use the <span style="font-family: Courier New,Courier,monospace">service_storage_remove()</span> function:</p>
+<pre class="prettyprint">
+static void
+file_remove_cb(int result, void *user_data)
+{
+ if (SERVICE_ADAPTOR_ERROR_NONE != result)
+ {
+ // Error handling
+ }
+}
+
+void
+plugin_remove_file(service_plugin_h plugin, const char *file)
+{
+ const int ret = service_storage_remove(plugin, file, file_remove_cb, NULL);
+
+ if (SERVICE_ADAPTOR_ERROR_NONE == ret)
+ {
+ // Error handling
+ }
+}
+</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>
<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>
+ <li><a href="service_adaptor_tutorial_n.htm">Service Adaptor: Working with Plugins</a>
+ <p>Demonstrates how you can manage adaptors between the Service Adaptor Client and related plugins.</p></li>
</ul>
<p>The following tutorials apply in <span style="color: red">mobile applications only</span>:</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>Sync Adapter: Implementing the Sync Mechanism</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="#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 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: 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">Setting the Callback Functions</a>
- <p>Set the client callback functions for starting or canceling sync operations.</p></li>
- </ul>
-
-<h2 id="set_callback" name="set_callback">Setting the Callback Functions</h2>
-
-<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 <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 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";
-result = sync_adapter_init(capability);
-</pre>
-<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>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 <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)
-{
- // Start the sync operation
-}
-
-int on_cancel_cb(account_h account, const char *capability)
-{
- // Cancel the sync operation
-}
-</pre>
-</li>
-
-<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>
-
-</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>
-
<li>Register the defined callback with the <span style="font-family: Courier New,Courier,monospace;">media_key_reserve()</span> function:
<pre class="prettyprint">
-void medi_key_api_func()
+void media_key_api_func()
{
int r = 0;
<li><a href="device_tutorial_n.htm">Device: Accessing Devices, Such as SB, MMC, Battery, CPU, and Display</a>
<p>Demonstrates how you can control attached devices, such as display, battery, LED, haptic, and power.</p>
</li>
- <li><a href="dlog_tutorial_n.htm">dlog: Sending Log Output for Debug Activities</a> <p>Demonstrates how you can use the dlog library to collect log messages from various applications and the system.</p></li>
- <li><a href="media_key_tutorial_n.htm">Media key: Managing Callbacks from Media Key Events</a> <p>Demonstrates how you can manage callbacks for media key events.</p></li>
+ <li><a href="dlog_tutorial_n.htm">dlog: Sending Log Output for Debug Activities</a>
+ <p>Demonstrates how you can use the dlog library to collect log messages from various applications and the system.</p></li>
+ <li><a href="media_key_tutorial_n.htm">Media key: Managing Callbacks from Media Key Events</a>
+ <p>Demonstrates how you can manage callbacks for media key events.</p></li>
<li><a href="runtime_tutorial_n.htm">Runtime information: Receiving and Monitoring Runtime Information</a>
<p>Demonstrates how you can obtain runtime information, such as system preferences.</p>
</li>
</li>
<li><a href="storage_tutorial_n.htm">Storage: Getting Information about Storages</a>
<p>Demonstrates how you can obtain detailed information from the internal and external storage.</p></li>
+ <li><a href="t-trace_tutorial_n.htm">T-trace: Tracing Applications</a>
+ <p>Demonstrates how you can insert tracepoints in your application.</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>T-trace: Tracing 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 Tracing</a>
+ </li>
+ <li><a href="#insert">Inserting Tracepoints</a>
+ </li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/system/t-trace_n.htm">T-trace Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.devtools/html/native_tools/t_trace_n.htm">T-trace Tool</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>T-trace: Tracing Applications</h1>
+
+
+<p>This tutorial demonstrates how you can insert tracepoints in Tizen native applications and then <a href="../../../../org.tizen.devtools/html/native_tools/t_trace_n.htm">run the T-trace tool</a> to view the results.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the T-trace API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing Tracing</a>
+ <p>Initialize tracing for use.</p></li>
+ <li><a href="#insert">Inserting Tracepoints</a>
+ <p>Create custom tracepoints in your application.</p></li>
+ </ul>
+
+<h2 id="init" name="init">Initializing Tracing</h2>
+
+<p>To initialize tracing:</p>
+<ol>
+<li>To use the functions and data types of the T-trace API, include the <span style="font-family: Courier New,Courier,monospace"><trace.h></span> header file in your application:
+<pre class="prettyprint">
+#include <trace.h>
+</pre>
+</li>
+<li>Make sure you have the <span style="font-family: Courier New,Courier,monospace">libttrace.so</span> T-trace library. The T-trace library provides a tracing function to write traces to the system trace buffer.</li>
+<li>Check that the following prerequisites are fulfilled:
+ <ul>
+ <li>linux-2.6.27 kernel</li>
+ <li><span style="font-family: Courier New,Courier,monospace">debugfs</span> mounted on <span style="font-family: Courier New,Courier,monospace">/sys/kernel/debug</span></li>
+ </ul>
+</li>
+</ol>
+
+
+<h2 id="insert" name="insert">Inserting Tracepoints</h2>
+
+<p>To insert tracepoints:</p>
+
+<ul>
+<li>Use synchronous tracing:
+<p>If the trace event starts and ends in a same context within the same process, thread, and function, use the <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_end()</span> functions to track the event. Note that every <span style="font-family: Courier New,Courier,monospace">trace_begin()</span> function matches up with a <span style="font-family: Courier New,Courier,monospace">trace_end()</span> function that occurs after it.</p>
+
+<pre class="prettyprint">
+int main(void)
+{
+ int integer = 12;
+ trace_begin("event name: %d", integer);
+
+ trace_end();
+
+ return 0;
+}
+</pre>
+</li>
+
+<li>Use asynchronous tracing:
+<p>If the trace event starts and ends in a different context, use the <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> and <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span> functions to track the event. Note that every <span style="font-family: Courier New,Courier,monospace">trace_async_begin()</span> function matches with a <span style="font-family: Courier New,Courier,monospace">trace_async_end()</span> function that has the same name and cookie. As the cookie provides an identifier among several events, it must have a unique integer value.</p>
+<pre class="prettyprint">
+void function1()
+{
+ int cookies_f1 = 123;
+
+ trace_async_begin(cookies, "event name");
+}
+
+void function2()
+{
+ int cookies_f2 = 123;
+
+ trace_async_end(cookies_f2, "event name");
+
+}
+</pre>
+</li>
+<li>Track the trace counter:
+<p>If you want to track the change of an integer counter on your application, use the <span style="font-family: Courier New,Courier,monospace">trace_update_counter()</span> function:</p>
+<pre class="prettyprint">
+void function2(int count)
+{
+ trace_update_counter(count, "event_name");
+}
+</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>
+
<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: Parsing and Formatting Phone Numbers</title>
+ <title>Phonenumber utils: Parsing and Formatting Phone Numbers</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
- <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>
+ <li><a href="../../../../org.tizen.guides/html/native/telephony/phonenumber_util_n.htm">Phonenumber utils Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber utils API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.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: Parsing and Formatting Phone Numbers</h1>
+<h1>Phonenumber utils: Parsing and Formatting Phone Numbers</h1>
<p>This tutorial demonstrates how you can parse and format phone numbers.</p>
<h2>Warm-up</h2>
-<p>Become familiar with the Phonenumber-utils API basics by learning about:</p>
+<p>Become familiar with the Phonenumber utils API basics by learning about:</p>
<ul>
<li><a href="#get">Getting the Location</a>
<p>Get the location based on the region and language.</p></li>
<ol>
-<li><p>To use the functions and data types of the Phonenumber-utils API (in <a href="../../../../org.tizen.native.mobile.apireference/XX.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/XX.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><phone_number.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Phonenumber utils API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><phone_number.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <phone_number.h>
</pre>
<ol>
-<li><p>To use the functions and data types of the Phonenumber-utils API (in <a href="../../../../org.tizen.native.mobile.apireference/XX.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/XX.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><phone_number.h></span> header file in your application:</p>
+<li><p>To use the functions and data types of the Phonenumber utils API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><phone_number.h></span> header file in your application:</p>
<pre class="prettyprint">
#include <phone_number.h>
</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>Telephony Information: Handling Phone Call, SIM Card, and Network Information</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 Telephony Service</a></li>
+ <li><a href="#call">Getting Call Information</a></li>
+ <li><a href="#sim">Getting SIM Information</a></li>
+ <li><a href="#network">Getting Network Information</a></li>
+ <li><a href="#modem">Getting Modem Information</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/telephony/telephony_info_n.htm">Telephony Information Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Telephony Information: Handling Phone Call, SIM Card, and Network Information</h1>
+
+
+<p>This tutorial demonstrates how you can get the status of both voice and video calls, get notified when the user makes a voice or video call or hangs up the phone, extract information stored on a SIM card, and get IMEI information.</p>
+
+
+<h2>Warm-up</h2>
+<p>Become familiar with the Telephony Information API basics by learning about:</p>
+
+<ul>
+ <li><a href="#init">Initializing the Telephony Service</a>
+ <p>Initialize telephony for use.</p></li>
+ <li><a href="#call">Getting Call Information</a>
+ <p>Access call information and track changes in call status.</p></li>
+ <li><a href="#sim">Getting SIM Information</a>
+ <p>Access SIM information and track changes in SIM status.</p></li>
+ <li><a href="#network">Getting Network Information</a>
+ <p>Access network information and track changes in network status.</p></li>
+ <li><a href="#modem">Getting Modem Information</a>
+ <p>Access modem information.</p></li>
+</ul>
+
+
+ <h2 id="init" name="init">Initializing the Telephony Service</h2>
+
+<p>To initialize the telephony service:</p>
+<p>In a multi-SIM scenario, you must define which subscription (SIM1 or SIM2) you need, in case the application is related to calling, networks, modems, or SIM cards. Telephony provides a function to create handles for different subscriptions.</p>
+
+<ol>
+<li>
+<p>To use the functions and data types of the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><telephony.h></span> header file in your application:</p>
+<pre class="prettyprint">
+#include <telephony.h>
+</pre></li>
+<li>
+<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span>.</p>
+
+<pre class="prettyprint">
+typedef struct
+{
+ unsigned int count;
+ telephony_h *handle;
+}
+telephony_handle_list_s;
+</pre>
+<p>Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer to get the telephony handles for all subscriptions.</p>
+<p>For example, there are 2 handles in a dual SIM device. In this case, <span style="font-family: Courier New,Courier,monospace">handle[0]</span> means the primary SIM and <span style="font-family: Courier New,Courier,monospace">handle[1]</span> means the secondary SIM.</p>
+<p>You can send requests to specific subscriptions using the telephony handle for that subscription.</p></li>
+<li><p>Get the telephony handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function.</p>
+
+<pre class="prettyprint">
+#include <telephony.h>
+telephony_handle_list_s handle_list;
+int main()
+{
+ int i;
+
+ ret = telephony_init(&handle_list); // In case of single SIM, we get only one handle
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ return -1;
+ }
+ for (i = 0; i < handle_list.count; i++)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "telephony handle[%p] for subscription[%d]",
+ handle_list.handle[i], i);
+ }
+
+ return 0;
+ }
+</pre></li>
+
+<li><p>When the telephony handle is no longer needed, the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function must be called to free the handle.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_deinit()
+{
+ ret = telephony_deinit(&handle_list);
+}
+</pre></li></ol>
+
+ <h2 id="call" name="call">Getting Call Information</h2>
+
+<p>To get the voice and video call status and be notified when the user makes a voice or video call or hangs up the phone, use the Telephony Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) in call-related actions:</p>
+
+<h3>Getting the Current Call List</h3>
+
+<p>To get the current call list:</p>
+<ol><li><p>Get the current call handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span> function:</p>
+
+<pre class="prettyprint">
+unsigned int count;
+telephony_call_h *call_list;
+void tutorial_telephony_call_get_call_list()
+{
+ telephony_error_e ret;
+
+ ret = telephony_call_get_call_list(handle_list.handle[0], &count, &call_list);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ }
+ else
+ {
+ int i;
+ unsigned int handle_id = 0;
+ char *number = NULL;
+ telephony_call_type_e type = 0;
+ telephony_call_status_e status = 0;
+ telephony_call_direction_e direction = 0;
+ bool conf_status = 0;
+
+ if (count == 0)
+ {
+ dlog_print(DLOG_INFO, LOG_TAG, "count[%d], No calls", count);
+
+ return;
+ }
+
+ for (i = 0; i < count; i++)
+ {
+ telephony_call_get_handle_id(call_list[i], &handle_id);
+ telephony_call_get_number(call_list[i], &number);
+ telephony_call_get_type(call_list[i], &type);
+ telephony_call_get_status(call_list[i], &status);
+ telephony_call_get_direction(call_list[i], &direction);
+ telephony_call_get_conference_status(call_list[i], &conf_status);
+
+ dlog_print(DLOG_INFO, LOG_TAG, "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
+ handle_id, number,
+ type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
+ type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
+ status == TELEPHONY_CALL_STATUS_IDLE ? "IDLE" :
+ status == TELEPHONY_CALL_STATUS_ACTIVE ? "ACTIVE" :
+ status == TELEPHONY_CALL_STATUS_HELD ? "HELD" :
+ status == TELEPHONY_CALL_STATUS_DIALING ? "DIALING" :
+ status == TELEPHONY_CALL_STATUS_ALERTING ? "ALERTING" :
+ status == TELEPHONY_CALL_STATUS_INCOMING ? "INCOMING" : "UNKNOWN",
+ direction == TELEPHONY_CALL_DIRECTION_MO ? "MO" : "MT",
+ conf_status ? "TRUE" : "FALSE");
+ free(number);
+ }
+ telephony_call_release_call_list(count, &call_list);
+ }
+}
+</pre>
+<p>After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, conference status).</p></li>
+
+<li><p>When the call handle is no longer needed, call the <span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span> function to free the handle:</p>
+<pre class="prettyprint">
+void tutorial_telephony_call_release_call_list()
+{
+ telephony_call_release_call_list(count, &call_list);
+}
+</pre></li></ol>
+
+<h3>Receiving Change Notifications for the Call Status</h3>
+
+<p>Use a callback function to obtain change notifications for the call status asynchronously. The call ID is returned through a callback function, given to the function as one of its parameters.</p>
+
+<p>To be notified when the voice call status changes, implement and register a callback function compatible with the <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> function typedef:</p>
+
+<pre class="prettyprint">
+static int voice_call_noti_tbl[] =
+{
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE,
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE,
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD,
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING,
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING,
+ TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING,
+};
+
+void voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+ int ret;
+ telephony_call_h *call_list;
+ unsigned int count = 0;
+
+ switch (noti_id)
+ {
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Idle!!! [%d]", *(int *)data);
+ break;
+
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Active!!! [%d]", *(int *)data);
+ break;
+
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Held!!! [%d]", *(int *)data);
+ break;
+
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Dialing!!! [%d]", *(int *)data);
+ break;
+
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Alerting!!! [%d]", *(int *)data);
+ break;
+
+ case TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING:
+ dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Incoming!!! [%d]", *(int *)data);
+ break;
+
+ default:
+ dlog_print(DLOG_INFO, LOG_TAG, "Unknown noti");
+ break;
+ }
+
+// Get current call list
+
+void tutorial_telephony_set_noti_cb_voice()
+{
+ telephony_error_e ret;
+ int i;
+
+ for (i = 0; i < (sizeof(voice_call_noti_tbl) / sizeof(int)); i++)
+ {
+ ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i], voice_call_status_noti_cb, NULL);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ }
+ }
+}
+</pre>
+
+<p>After the callback is registered, you are notified of the voice call status until you cancel the registration. To unregister the callback, call the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function for each notification.</p>
+
+
+
+ <h2 id="sim" name="sim">Getting SIM Information</h2>
+
+<p>To extract information stored on a SIM card, use the Telephony SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications):</p>
+
+<h3>Getting the State of the SIM</h3>
+<p>Before retrieving information from the SIM card, retrieve the state of the SIM card. You can get SIM-related information only if the state of the SIM is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
+
+<p>You can get the state of the SIM card by calling the <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the status of the SIM, which is one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications), through its output parameters.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_sim_get_state()
+{
+ telephony_sim_state_e state;
+ ret = telephony_sim_get_state(handle_list.handle[0], &state);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ return -1;
+ }
+ dlog_print(DLOG_INFO, LOG_TAG, "SIM status: [%d]", status);
+
+ return 0;
+}
+</pre>
+
+<h3>Receiving Change Notifications for the SIM State</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain notifications for the changes in the SIM state asynchronously. The SIM status is returned through a callback function, given to the function as one of its parameters.</p>
+
+<pre class="prettyprint">
+void sim_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+ telephony_sim_state_e sim_state = *(int *)data;
+ dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", sim_state);
+}
+
+void tutorial_telephony_set_noti_cb_sim()
+{
+ telephony_error_e ret;
+ ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_SIM_STATUS,
+ sim_state_noti_cb, NULL);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ return 0;
+}
+</pre>
+
+<p>The callback function is invoked automatically when the status of the SIM changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
+
+<p>Once the callback function of the SIM state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
+
+<h3>Getting SIM Information</h3>
+<p>If you know the current SIM state and, for example, it is <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, call the SIM API to get the following information from the SIM card: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber name, subscriber number, subscriber ID, and application list.</p>
+
+<p>If you do not get an error (<span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>), the requested SIM information is received and stored in an output parameter. You must free all returned variables once you are done with them.</p>
+
+<p>To get ICCID information from a SIM card:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_sim_get_icc_id()
+{
+ telephony_error_e ret;
+ char *iccid;
+ ret = telephony_sim_get_icc_id(handle_list.handle[0], &iccid);
+ if (ret == TELEPHONY_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "Integrated Circuit Card IDentification: %s", iccid);
+ free(iccid);
+
+ return ret;
+}
+</pre>
+
+ <h2 id="network" name="network">Getting Network Information</h2>
+
+<p>To access, but not change, information about the current cellular network and telephony service, use the Telephony Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications):</p>
+
+
+<h3>Getting the Network Service State</h3>
+<p>Determine the state of the service network. The network service state is one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
+
+<p>You can only get telephony network information if the state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_service_state()
+{
+ telephony_network_service_state_e network_service_state;
+ int ret;
+ ret = telephony_network_get_service_state(handle_list.handle[0], &network_service_state);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ return -1;
+ }
+ dlog_print(DLOG_INFO, LOG_TAG, "Network Service State [%d]", network_service_state);
+
+ return 0;
+}
+</pre>
+
+<h3>Receiving Network Service State Change Notifications</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain change notifications for a network asynchronously. The network status is returned through a callback function, given to the function as one of its parameters.</p>
+
+<p>The Telephony Network API provides change notifications for the following information:</p>
+<ul>
+ <li>Network service state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>)</li>
+ <li>Cell ID changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span>)</li>
+ <li>Roaming state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span>)</li>
+ <li>Signal strength changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span>)</li>
+ <li>Network name changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span>)</li>
+ <li>PS (packet-switched) type changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span>)</li>
+ <li>Default data subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span>)</li>
+ <li>Default subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span>)</li>
+</ul>
+
+<pre class="prettyprint">
+void network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
+{
+ telephony_network_service_state_e network_state = *(int *)data;
+ dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", network_state);
+}
+
+void tutorial_telephony_set_noti_cb_network()
+{
+ telephony_error_e ret;
+ ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_NETWORK_SERVICE_STATE,
+ network_service_state_noti_cb, NULL);
+ if (ret != TELEPHONY_ERROR_NONE)
+ {
+ // Error handling
+ }
+
+ return 0;
+}
+</pre>
+
+<p>The callback function is invoked automatically when the status of the network changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. To get additional notifications when the cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state changes, define corresponding callback functions. Register each one of them with their corresponding notification ID.</p>
+
+<p>Once the callback function of the network state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
+
+<h3>Getting Network Information</h3>
+<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, use the Telephony Network API to get the network information: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
+
+<p>You must free all returned variables (strings) once you are done with them.</p>
+
+<p>To get network information:</p>
+
+<ul><li><p>To get the Cell ID:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_cell_id()
+{
+ telephony_error_e ret;
+ int cell_id;
+ ret = telephony_network_get_cell_id(handle_list.handle[0], &cell_id);
+ if (ret == TELEPHONY_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "Cell Id: %d", cell_id);
+
+ return ret;
+}
+</pre></li>
+
+<li><p>To get the MNC:</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_network_get_mnc()
+{
+ telephony_error_e ret;
+ char *mnc;
+ ret = telephony_network_get_mnc(handle_list.handle[0], &mnc);
+ if (ret == TELEPHONY_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "mnc: %s", mnc);
+ free(mnc);
+
+ return ret;
+}
+</pre></li></ul>
+
+ <h2 id="modem" name="modem">Getting Modem Information</h2>
+
+<p>To access, but not change, information about the modem (IMEI and power status), use the Telephony Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications):</p>
+
+<p>Use the <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span> function, and free all returned variables (strings) once you are done with them.</p>
+
+<pre class="prettyprint">
+void tutorial_telephony_modem_get_imei()
+{
+ telephony_error_e ret;
+ char *imei;
+ ret = telephony_modem_get_imei(handle_list.handle[0], &imei);
+ if (ret == TELEPHONY_ERROR_NONE)
+ dlog_print(DLOG_INFO, LOG_TAG, "imei: %s", imei);
+ free(imei);
+
+ return ret;
+}
+</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
<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>Telephony: Handling Phone Call, SIM Card, and Network Information</title>
+ <title>Telephony: Managing Phone Numbers and Telephony Information</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
<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 Telephony Service</a></li>
- <li><a href="#call">Getting Call Information</a></li>
- <li><a href="#sim">Getting SIM Information</a></li>
- <li><a href="#network">Getting Network Information</a></li>
- <li><a href="#modem">Getting Modem Information</a></li>
- </ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony Guide</a></li>
</div>
<div id="container"><div id="contents"><div class="content">
-<h1>Telephony: Handling Phone Call, SIM Card, and Network Information</h1>
+<h1>Telephony: Managing Phone Numbers and Telephony Information</h1>
-
-<p>This tutorial demonstrates how you can get the status of both voice and video calls, get notified when the user makes a voice or video call or hangs up the phone, extract information stored on a SIM card, and get IMEI information.</p>
+ <p>The telephony tutorials demonstrate how to manage phone numbers and various information related to the Telephony Service:</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>
+ <li><a href="telephony_info_tutorial_n.htm">Telephony Information: Handling Phone Call, SIM Card, and Network Information</a>
+ <p>Demonstrates how you can manage information related to calls, SIM card, network, and modem.</p></li>
+ </ul>
-<h2>Warm-up</h2>
-<p>Become familiar with the Telephony API basics by learning about:</p>
-
-<ul>
- <li><a href="#init">Initializing the Telephony Service</a>
- <p>Initialize telephony for use.</p></li>
- <li><a href="#call">Getting Call Information</a>
- <p>Access call information and track changes in call status.</p></li>
- <li><a href="#sim">Getting SIM Information</a>
- <p>Access SIM information and track changes in SIM status.</p></li>
- <li><a href="#network">Getting Network Information</a>
- <p>Access network information and track changes in network status.</p></li>
- <li><a href="#modem">Getting Modem Information</a>
- <p>Access modem information.</p></li>
-</ul>
-
-
- <h2 id="init" name="init">Initializing the Telephony Service</h2>
-
-<p>To initialize the telephony service:</p>
-<p>In a multi-SIM scenario, you must define which subscription (SIM1 or SIM2) you need, in case the application is related to calling, networks, modems, or SIM cards. Telephony provides a function to create handles for different subscriptions.</p>
-
-<ol>
-<li>
-<p>To use the functions and data types of the Telephony Information API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace"><telephony.h></span> header file in your application:</p>
-<pre class="prettyprint">
-#include <telephony.h>
-</pre></li>
-<li>
-<p>To create a telephony handle, use the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure that holds the handles for all the subscriptions defined in <span style="font-family: Courier New,Courier,monospace">telephony_common.h</span>.</p>
-
-<pre class="prettyprint">
-typedef struct
-{
- unsigned int count;
- telephony_h *handle;
-}
-telephony_handle_list_s;
-</pre>
-<p>Pass the <span style="font-family: Courier New,Courier,monospace">telephony_handle_list_s</span> structure pointer to get the telephony handles for all subscriptions.</p>
-<p>For example, there are 2 handles in a dual SIM device. In this case, <span style="font-family: Courier New,Courier,monospace">handle[0]</span> means the primary SIM and <span style="font-family: Courier New,Courier,monospace">handle[1]</span> means the secondary SIM.</p>
-<p>You can send requests to specific subscriptions using the telephony handle for that subscription.</p></li>
-<li><p>Get the telephony handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_init()</span> function.</p>
-
-<pre class="prettyprint">
-#include <telephony.h>
-telephony_handle_list_s handle_list;
-int main()
-{
- int i;
-
- ret = telephony_init(&handle_list); // In case of single SIM, we get only one handle
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- return -1;
- }
- for (i = 0; i < handle_list.count; i++)
- {
- dlog_print(DLOG_INFO, LOG_TAG, "telephony handle[%p] for subscription[%d]",
- handle_list.handle[i], i);
- }
-
- return 0;
- }
-</pre></li>
-
-<li><p>When the telephony handle is no longer needed, the <span style="font-family: Courier New,Courier,monospace">telephony_deinit()</span> function must be called to free the handle.</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_deinit()
-{
- ret = telephony_deinit(&handle_list);
-}
-</pre></li></ol>
-
- <h2 id="call" name="call">Getting Call Information</h2>
-
-<p>To get the voice and video call status and be notified when the user makes a voice or video call or hangs up the phone, use the Telephony Call API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__CALL.html">wearable</a> applications) in call-related actions:</p>
-
-<h3>Getting the Current Call List</h3>
-
-<p>Top get the current call list:</p>
-<ol><li><p>Get the current call handle by using the <span style="font-family: Courier New,Courier,monospace">telephony_call_get_call_list()</span> function:</p>
-
-<pre class="prettyprint">
-unsigned int count;
-telephony_call_h *call_list;
-void tutorial_telephony_call_get_call_list()
-{
- telephony_error_e ret;
-
- ret = telephony_call_get_call_list(handle_list.handle[0], &count, &call_list);
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- }
- else
- {
- int i;
- unsigned int handle_id = 0;
- char *number = NULL;
- telephony_call_type_e type = 0;
- telephony_call_status_e status = 0;
- telephony_call_direction_e direction = 0;
- bool conf_status = 0;
-
- if (count == 0)
- {
- dlog_print(DLOG_INFO, LOG_TAG, "count[%d], No calls", count);
-
- return;
- }
-
- for (i = 0; i < count; i++)
- {
- telephony_call_get_handle_id(call_list[i], &handle_id);
- telephony_call_get_number(call_list[i], &number);
- telephony_call_get_type(call_list[i], &type);
- telephony_call_get_status(call_list[i], &status);
- telephony_call_get_direction(call_list[i], &direction);
- telephony_call_get_conference_status(call_list[i], &conf_status);
-
- dlog_print(DLOG_INFO, LOG_TAG, "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
- handle_id, number,
- type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
- type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
- status == TELEPHONY_CALL_STATUS_IDLE ? "IDLE" :
- status == TELEPHONY_CALL_STATUS_ACTIVE ? "ACTVIE" :
- status == TELEPHONY_CALL_STATUS_HELD ? "HELD" :
- status == TELEPHONY_CALL_STATUS_DIALING ? "DIALING" :
- status == TELEPHONY_CALL_STATUS_ALERTING ? "ALERTING" :
- status == TELEPHONY_CALL_STATUS_INCOMING ? "INCOMING" : "UNKNOWN",
- direction == TELEPHONY_CALL_DIRECTION_MO ? "MO" : "MT",
- conf_status ? "TRUE" : "FALSE");
- free(number);
- }
- telephony_call_release_call_list(count, &call_list);
- }
-}
-</pre>
-<p>After getting the handle, you can use it to retrieve various call information (such as handle ID, number, type, status, direction, conference status).</p></li>
-
-<li><p>When the call handle is no longer needed, call the <span style="font-family: Courier New,Courier,monospace">telephony_call_release_call_list()</span> function to free the handle:</p>
-<pre class="prettyprint">
-void tutorial_telephony_call_release_call_list()
-{
- telephony_call_release_call_list(count, &call_list);
-}
-</pre></li></ol>
-
-<h3>Receiving Change Notifications for the Call Status</h3>
-<p>The callback function can be used to obtain change notifications for the call status asynchronously. The call id is returned through a callback function, given to the function as one of its parameters.</p>
-
-<li><p>To be notified when the voice call status changes, implement a callback function compatible with the <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> function typedef and register this function.</p>
-
-<pre class="prettyprint">
-static int voice_call_noti_tbl[] = {
- TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE,
- TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE,
- TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD,
- TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING,
- TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING,
- TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING,
-};
-
-void voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
-{
- int ret;
- telephony_call_h *call_list;
- unsigned int count = 0;
-
- switch (noti_id) {
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_IDLE:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Idle!!! [%d]", *(int *)data);
- break;
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_ACTIVE:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Active!!! [%d]", *(int *)data);
- break;
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_HELD:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Held!!! [%d]", *(int *)data);
- break;
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_DIALING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Dialing!!! [%d]", *(int *)data);
- break;
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_ALERTING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Alerting!!! [%d]", *(int *)data);
- break;
- case TELEPHONY_NOTI_VOICE_CALL_STATUS_INCOMING:
- dlog_print(DLOG_INFO, LOG_TAG, "Noti!!! Voice Call Status Incoming!!! [%d]", *(int *)data);
- break;
- default:
- dlog_print(DLOG_INFO, LOG_TAG, "Unknown noti");
- break;
- }
-
- ret_value = telephony_call_get_call_list(handle_list.handle[0], &count, &call_list);
- if (ret_value != TELEPHONY_ERROR_NONE) {
- LOGE("telephony_call_get_call_list() failed!!!zz [0x%x]", ret_value);
- } else {
- int i;
- unsigned int handle_id = 0;
- char *number = NULL;
- telephony_call_type_e type = 0;
- telephony_call_status_e status = 0;
- telephony_call_direction_e direction = 0;
- bool conf_status = 0;
-
- for (i = 0; i < count; i++) {
- telephony_call_get_handle_id(call_list[i], &handle_id);
- telephony_call_get_number(call_list[i], &number);
- telephony_call_get_type(call_list[i], &type);
- telephony_call_get_status(call_list[i], &status);
- telephony_call_get_direction(call_list[i], &direction);
- telephony_call_get_conference_status(call_list[i], &conf_status);
-
- dlog_print(DLOG_INFO, LOG_TAG, "id[%d] number[%s] type[%s] status[%s] direction[%s] conference_status[%s]",
- handle_id, number,
- type == TELEPHONY_CALL_TYPE_VOICE ? "VOICE" :
- type == TELEPHONY_CALL_TYPE_VIDEO ? "VIDEO" : "E911",
- status == TELEPHONY_CALL_STATUS_IDLE ? "IDLE" :
- status == TELEPHONY_CALL_STATUS_ACTIVE ? "ACTVIE" :
- status == TELEPHONY_CALL_STATUS_HELD ? "HELD" :
- status == TELEPHONY_CALL_STATUS_DIALING ? "DIALING" :
- status == TELEPHONY_CALL_STATUS_ALERTING ? "ALERTING" :
- status == TELEPHONY_CALL_STATUS_INCOMING ? "INCOMING" : "UNKNOWN",
- direction == TELEPHONY_CALL_DIRECTION_MO ? "MO" : "MT",
- conf_status ? "TRUE" : "FALSE");
- free(number);
- }
- telephony_call_release_call_list(count, &call_list);
- }
-}
-
-void tutorial_telephony_set_noti_cb_voice()
-{
- telephony_error_e ret;
- int i;
-
- for (i = 0; i < (sizeof(voice_call_noti_tbl) / sizeof(int)); i++) {
- ret = telephony_set_noti_cb(handle_list.handle[0], voice_call_noti_tbl[i], voice_call_status_noti_cb, NULL);
-  if (ret != TELEPHONY_ERROR_NONE)
-  {
-  // Error handling
-  }
- }
-}
-</pre>
-
-<p>After registering, you are notified of the voice call status until you cancel the registration of the callback function. To unregister the callback, invoke the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function with each notification.</p></li>
-
- <h2 id="sim" name="sim">Getting SIM Information</h2>
-
-<p>To extract information stored on a SIM card, use the Telephony SIM API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html">wearable</a> applications):</p>
-
-<h3>Getting the State of the SIM</h3>
-<p>Before retrieving information from the SIM card, retrieve the state of the SIM card. You can get SIM-related information only if the state of the SIM is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_SIM_STATE_AVAILABLE</span>.</p>
-
-<p>You can get the state of the SIM card by calling the <span style="font-family: Courier New,Courier,monospace">telephony_sim_get_state()</span> function. It returns the status of the SIM, which is one of the <span style="font-family: Courier New,Courier,monospace">telephony_sim_state_e</span> values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__SIM.html#ga08448f4cfaf7c59cd585008d3bf32b70">wearable</a> applications), through its output parameters.</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_sim_get_state()
-{
- telephony_sim_state_e state;
- ret = telephony_sim_get_state(handle_list.handle[0], &state);
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- return -1;
- }
- dlog_print(DLOG_INFO, LOG_TAG, "SIM status: [%d]", status);
-
- return 0;
-}
-</pre>
-
-<h3>Receiving Change Notifications for the SIM State</h3>
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain notifications for the changes in the SIM state asynchronously. The SIM status is returned through a callback function, given to the function as one of its parameters.</p>
-
-<pre class="prettyprint">
-void sim_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
-{
- telephony_sim_state_e sim_state = *(int *)data;
- dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", sim_state);
-}
-
-void tutorial_telephony_set_noti_cb_sim()
-{
- telephony_error_e ret;
- ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_SIM_STATUS,
- sim_state_noti_cb, NULL);
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- }
-
- return 0;
-}
-</pre>
-
-<p>The callback function is invoked automatically when the status of the SIM changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function.</p>
-
-<p>Once the callback function of the SIM state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
-
-<h3>Getting SIM Information</h3>
-<p>If you know the current SIM state and, for example, it is <span style="font-family: Courier New,Courier,monospace">SIM_STATE_AVAILABLE</span>, call the SIM API to get the following information from the SIM card: ICC-ID, operator (MCC+MNC), MSIN, SPN, subscriber name, subscriber number, subscriber ID, and application list.</p>
-
-<p>If you do not get an error (<span style="font-family: Courier New,Courier,monospace">SIM_ERROR_NONE</span>), the requested SIM information is received and stored in an output parameter. You must free all returned variables once you are done with them.</p>
-
-<p>To get ICCID information from a SIM card:</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_sim_get_icc_id()
-{
- telephony_error_e ret;
- char *iccid;
- ret = telephony_sim_get_icc_id(handle_list.handle[0], &iccid);
- if (ret == TELEPHONY_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Integrated Circuit Card IDentification: %s", iccid);
- free(iccid);
-
- return ret;
-}
-</pre>
-
- <h2 id="network" name="network">Getting Network Information</h2>
-
-<p>To access, but not change, information about the current cellular network and telephony service, use the Telephony Network API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html">wearable</a> applications):</p>
-
-
-<h3>Getting the Network Service State</h3>
-<p>Determine the state of the service network. The network service state is one of the <span style="font-family: Courier New,Courier,monospace">telephony_network_service_state_e</span> enumeration values (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__NETWORK.html#gae9f3b6e54a1086b8734f4acc71fd001b">wearable</a> applications).</p>
-
-<p>You can only get telephony network information if the state is <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NETWORK_SERVICE_STATE_IN_SERVICE</span>.</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_network_get_service_state()
-{
- telephony_network_service_state_e network_service_state;
- int ret;
- ret = telephony_network_get_service_state(handle_list.handle[0], &network_service_state);
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- return -1;
- }
- dlog_print(DLOG_INFO, LOG_TAG, "Network Service State [%d]", network_service_state);
-
- return 0;
-}
-</pre>
-
-<h3>Receiving Network Service State Change Notifications</h3>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">telephony_noti_cb()</span> callback function can be used to obtain change notifications for a network asynchronously. The network status is returned through a callback function, given to the function as one of its parameters.</p>
-
-<p>The Telephony Network API provides change notifications for the following information:</p>
-<ul>
- <li>Network service state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SERVICE_STATE</span>)</li>
- <li>Cell ID changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_CELLID</span>)</li>
- <li>Roaming state changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_ROAMING_STATUS</span>)</li>
- <li>Signal strength changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_SIGNALSTRENGTH_LEVEL</span>)</li>
- <li>Network name changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_NETWORK_NAME</span>)</li>
- <li>PS (packet-switched) type changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_PS_TYPE</span>)</li>
- <li>Default data subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_DATA_SUBSCRIPTION</span>)</li>
- <li>Default subscription changes (<span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span>, <span style="font-family: Courier New,Courier,monospace">TELEPHONY_NOTI_NETWORK_DEFAULT_SUBSCRIPTION</span>)</li>
-</ul>
-
-<pre class="prettyprint">
-void network_service_state_noti_cb(telephony_h handle, telephony_noti_e noti_id, void *data, void* user_data)
-{
- telephony_network_service_state_e network_state = *(int *)data;
- dlog_print(DLOG_INFO, LOG_TAG, "SIM state: [%d]", network_state);
-}
-
-void tutorial_telephony_set_noti_cb_network()
-{
- telephony_error_e ret;
- ret = telephony_set_noti_cb(handle_list.handle[0], TELEPHONY_NOTI_NETWORK_SERVICE_STATE,
- network_service_state_noti_cb, NULL);
- if (ret != TELEPHONY_ERROR_NONE)
- {
- // Error handling
- }
-
- return 0;
-}
-</pre>
-
-<p>The callback function is invoked automatically when the status of the network changes, if you register the callback function using the <span style="font-family: Courier New,Courier,monospace">telephony_set_noti_cb()</span> function. To get additional notifications when the cell ID, RSSI level, network name, PS type, default data subscription, default subscription, or roaming state changes, define corresponding callback functions. Register each one of them with their corresponding notification ID.</p>
-
-<p>Once the callback function of the network state change is registered, this callback function is invoked until it is unregistered with the <span style="font-family: Courier New,Courier,monospace">telephony_unset_noti_cb()</span> function by passing the notification ID.</p>
-
-<h3>Getting Network Information</h3>
-<p>If the current network service state is <span style="font-family: Courier New,Courier,monospace">NETWORK_INFO_SERVICE_STATE_IN_SERVICE</span>, use the Telephony Network API to get the network information: LAC, Cell ID, RSSI, roaming state, MCC, MNC, network provider name, PS type, and network type.</p>
-
-<p>You must free all returned variables (strings) once you are done with them.</p>
-
-<p>To get network information:</p>
-
-<ul><li><p>To get the Cell ID:</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_network_get_cell_id()
-{
- telephony_error_e ret;
- int cell_id;
- ret = telephony_network_get_cell_id(handle_list.handle[0], &cell_id);
- if (ret == TELEPHONY_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "Cell Id: %d", cell_id);
-
- return ret;
-}
-</pre></li>
-
-<li><p>To get the MNC:</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_network_get_mnc()
-{
- telephony_error_e ret;
- char *mnc;
- ret = telephony_network_get_mnc(handle_list.handle[0], &mnc);
- if (ret == TELEPHONY_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "mnc: %s", mnc);
- free(mnc);
-
- return ret;
-}
-</pre></li></ul>
-
- <h2 id="modem" name="modem">Getting Modem Information</h2>
-
-<p>To access, but not change, information about the modem (IMEI and power status), use the Telephony Modem API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION__MODEM.html">wearable</a> applications):</p>
-
-<p>Use the <span style="font-family: Courier New,Courier,monospace">telephony_modem_get_imei()</span> function, and free all returned variables (strings) once you are done with them.</p>
-
-<pre class="prettyprint">
-void tutorial_telephony_modem_get_imei()
-{
- telephony_error_e ret;
- char *imei;
- ret = telephony_modem_get_imei(handle_list.handle[0], &imei);
- if (ret == TELEPHONY_ERROR_NONE)
- dlog_print(DLOG_INFO, LOG_TAG, "imei: %s", imei);
- free(imei);
-
- return ret;
-}
-</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
<p>Select the API domain you are interested in and see how you can implement its various functionalities into your application:</p>
<ul>
+ <li><a href="account/account_tutorials_n.htm">Account</a>
+ <p>Demonstrates how you can manage account information, such as receive sync operation notifications, and obtain an access token by using the oauth2 authorization.</p></li>
<li><a href="app_framework/app_framework_tutorials_n.htm">Application Framework: Controlling Your Application</a>
<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>
<li><a href="content/content_tutorials_n.htm">Content: Getting and Handling Media Content</a>
<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>Demonstrates how you can detect user activities and gestures.</p></li>
+ <p>Demonstrates how you can detect user activities and gestures, and take advantage of contextual triggers and application usage patterns.</p></li>
<li><a href="graphics/graphics_tutorials_n.htm">Graphics: Creating and Managing Graphics</a>
<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>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>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>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>
<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>Demonstrates how you can recognize and synthesize speech.</p></li>
+ <p>Demonstrates how you can recognize and synthesize speech, and handle voice commands.</p></li>
<li><a href="web/web_tutorials_n.htm">Web: Managing Web Pages and Web Content</a>
<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>
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<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__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__Ecore.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.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__Ecore.html">Ecore API for Wearable Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__Edje.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>
<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__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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__Ecore.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>
<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__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.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__Edje.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>
transition: BOUNCE 2.5 0.0 5.0;
}
</pre><p>This program is named <span style="font-family: Courier New,Courier,monospace">animation,state1</span> and is started when the application receives the <span style="font-family: Courier New,Courier,monospace">load</span> signal immediately on startup. It runs the <span style="font-family: Courier New,Courier,monospace">STATE_SET</span> action so it changes the object state from default to down-state. The target of the program is the logo <span style="font-family: Courier New,Courier,monospace">part</span>.</p>
-<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with three parameters, the <span style="font-family: Courier New,Courier,monospace">bounce_decay</span>, the <span style="font-family: Courier New,Courier,monospace">number_of_bounces</span>, and the duration which here is set to five seconds.</p>
+<p>In order to switch from one state to another, it uses a <span style="font-family: Courier New,Courier,monospace">transition</span> of the <span style="font-family: Courier New,Courier,monospace">BOUNCE</span> type with three parameters, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, the <span style="font-family: Courier New,Courier,monospace">FIXME</span>, and the duration which here is set to five seconds.</p>
<p>This produces an falling and bouncing effect.</p>
<p>Also add an animation for the window title to make it move from the left to the right with a bounce effect while growing the font size.</p>
<p>Create a new state on the part called "txt_title" inside which both the font size and position are changed.</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;
<p class="toc-title">Related Info</p>
<ul class="toc">
<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__Edje.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__Edje.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>
<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 for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.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__EFL.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>
<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__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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__Ecore.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>
<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>EOM: Using the External Output Devices</title>
+ <title>External Output Manager: Using the External Output Devices</title>
</head>
<body onload="prettyPrint()" style="overflow: auto;">
</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__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> -->
+ <li><a href="../../../../org.tizen.guides/html/native/ui/eom_n.htm">External Output Manager Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager 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>
+<h1>External Output Manager: Using the External Output Devices</h1>
<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>
+ <p>Become familiar with the External Output Manager API basics by learning about:</p>
<ul>
<li><a href="#init">Initializing the EOM</a>
<p>Initialize the external output for use.</p></li>
<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:
+<li>To use the functions and data types of the External Output Manager 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>
<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>
+<p>If the setting is successful, the External Output Manager module uses the presentation mode when the external output device connected.</p>
<pre class="prettyprint">
int set_attribute()
{
<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__Edje__Group.html">Edje API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Edje.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__Edje.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>
<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__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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>
<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__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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>
<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__Eina__Group.html">Eina API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Eina.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__Eina.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>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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__Eina.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>
<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__Ecore__Group.html">Ecore API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__Ecore.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__Ecore.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>
<p class="toc-title">Related Info</p>
<ul class="toc">
<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__Ecore.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>
<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">E
OM: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</p></li>
+ <li><a href="eom_tutorial_n.htm">E
xternal Output Manager: Using External Output Devices</a> <p>Demonstrates how you can use external output devices.</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>Input Method: Managing Keyboards</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="#start">Starting the IME Life-cycle</a></li>
+ <li><a href="#callback">Adding Event Callbacks</a></li>
+ <li><a href="#menu">Making a Keyboard Option Menu</a></li>
+ <li>Input method manager
+ <ul class="toc">
+ <li><a href="#list">Showing the IME List</a></li>
+ <li><a href="#selector">Showing the IME Selector</a></li>
+ <li><a href="#enable">Checking the IME State</a></li>
+ </ul>
+ </li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/uix/ime_n.htm">Input Method Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Input Method: Managing Keyboards</h1>
+ <p>This tutorial demonstrates how you create an IME application and use the input method manager to help the user enable and select the new IME as the default keyboard.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Input Method API basics by learning about:</p>
+ <ul>
+ <li><a href="#start">Starting the IME Life-cycle</a>
+ <p>Start the IME application life-cycle.</p></li>
+ <li><a href="#callback">Adding Event Callbacks</a>
+ <p>Register and define mandatory and optional event callbacks.</p></li>
+ <li><a href="#menu">Making a Keyboard Option Menu</a>
+ <p>Create an option menu for the keyboard to handle the keyboard settings.</p></li>
+ <li>Input method manager
+ <ul>
+ <li><a href="#list">Showing the IME List</a>
+ <p>Open the IME list menu to show the installed IMEs to allow the user to enable them.</p></li>
+ <li><a href="#selector">Showing the IME Selector</a>
+ <p>Open the IME selector menu to show the enabled IMEs to allow the user to select the default keyboard.</p></li>
+ <li><a href="#enable">Checking the IME State</a>
+ <p>Check whether a specific IME is enabled, and which IME is currently selected as the default keyboard.</p></li>
+ </ul>
+ </li>
+ </ul>
+
+
+ <h2 id="start" name="start">Starting the IME Life-cycle</h2>
+<p>To start the IME application life-cycle:</p>
+<ol>
+<li>Implement the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function as the main entry point of IME application:
+<pre class="prettyprint">void ime_app_main(int argc, char **argv);</pre>
+<p>The function is called when the user selects the IME as default from the Keyboard selection menu in the Settings application.</p>
+</li>
+<li>Inside the <span style="font-family: Courier New,Courier,monospace">ime_app_main()</span> function, add the required callbacks and call the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function to start the application:
+<pre class="prettyprint">int ime_run(ime_callback_s *basic_cb, void *user_data);</pre></li>
+</ol>
+
+ <h2 id="callback" name="callback">Adding Event Callbacks</h2>
+<p>To register and define event callbacks for the IME application:</p>
+<ol>
+<li>Implement the mandatory callbacks:
+
+<ol type="a">
+<li>
+<p>You must register and implement the <span style="font-family: Courier New,Courier,monospace">create()</span>, <span style="font-family: Courier New,Courier,monospace">terminate()</span>, <span style="font-family: Courier New,Courier,monospace">show()</span>, and <span style="font-family: Courier New,Courier,monospace">hide()</span> callback functions. Register them as the parameter of the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:</p>
+
+<pre class="prettyprint">
+#include <Elementary.h>
+#include <inputmethod.h>
+
+static void create(void *user_data);
+static void terminate(void *user_data);
+static void show(int context_id, ime_context_h context, void *user_data);
+static void hide(int context_id, void *user_data);
+
+void
+ime_app_main(int argc, char **argv)
+{
+ ime_callback_s basic_callback =
+ {
+ create, // When the input panel is created
+ terminate, // When the input panel is terminated
+ show, // When the input panel is shown
+ hide, // When the input panel is hidden
+ };
+
+ ime_run(&basic_callback, NULL);
+}
+</pre>
+</li>
+<li>Define the callback functions:
+<pre class="prettyprint">
+static void
+create(void *user_data)
+{
+ int portrait_w, portrait_h, landscape_w, landscape_h;
+ Evas_Object *ime_win = ime_get_main_window();
+
+ // Update IME size information
+ ime_set_size(portrait_w, portrait_h, landscape_w, landscape_h);
+
+ // Create or initialize the resources
+}
+
+static void
+terminate(void *user_data)
+{
+ // Release the resources
+}
+
+static void
+show(int context_id, ime_context_h context, void *user_data)
+{
+ Ecore_IMF_Input_Panel_Layout layout;
+ ime_layout_variation_e layout_variation;
+ int cursor_pos;
+ Ecore_IMF_Autocapital_Type autocapital_type;
+ Ecore_IMF_Input_Panel_Return_Key_Type return_key_type;
+ bool return_key_state, prediction_mode, password_mode;
+ Ecore_IMF_Input_Hints input_hint;
+ Ecore_IMF_BiDi_Direction bidi;
+ Ecore_IMF_Input_Panel_Lang language;
+
+ Evas_Object *ime_win = ime_get_main_window();
+
+ ime_context_get_layout(context, &layout);
+ ime_context_get_layout_variation(context, &layout_variation);
+ // Draw the proper layout
+
+ ime_context_get_autocapital_type(context, &autocapital_type);
+ ime_context_get_cursor_position(context, &cursor_pos);
+ // Draw the capital or small characters accordingly
+
+ ime_context_get_return_key_type(context, &return_key_type);
+ ime_context_get_return_key_state(context, &return_key_state);
+ // Draw the proper Return key
+
+ // Show IME window
+ evas_object_show(ime_win);
+}
+
+static void
+hide(int context_id, void *user_data)
+{
+ Evas_Object *ime_win = ime_get_main_window();
+
+ // Hide IME window
+ evas_object_hide(ime_win);
+}
+</pre>
+<p>In the <span style="font-family: Courier New,Courier,monospace">show()</span> callback, the IME application can get the contextual information from an associated text input UI control to configure the keyboard state and look accordingly. The contextual information of each input UI control is provided through the <span style="font-family: Courier New,Courier,monospace">ime_context_get_***()</span> functions in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file.</p>
+</li>
+</ol>
+</li>
+<li>Implementing the optional callbacks, as needed:
+
+<ol type="a">
+<li>
+<p>You can register optional callbacks with the <span style="font-family: Courier New,Courier,monospace">ime_event_set_***_cb()</span> functions provided in the <span style="font-family: Courier New,Courier,monospace">inputmethod.h</span> header file:</p>
+
+<pre class="prettyprint">
+static int focus_in(int context_id, void *user_data);
+static int focus_out(int context_id, void *user_data);
+static int cursor_position_updated(int cursor_pos, void *user_data);
+
+void
+ime_app_main(int argc, char **argv)
+{
+ ime_callback_s basic_callback =
+ {
+ // Add the mandatory callbacks
+ };
+
+ ime_event_set_focus_in_cb(focus_in, NULL);
+ ime_event_set_focus_out_cb(focus_out, NULL);
+ ime_event_set_cursor_position_updated_cb(cursor_position_updated, NULL);
+
+ ime_run(&basic_callback, NULL);
+}
+</pre>
+</li>
+<li>Define the optional callback functions:
+<ul>
+<li>The <span style="font-family: Courier New,Courier,monospace">focus_in()</span> callback is triggered when an associated text input UI control in any application gets the focus. Usually, the <span style="font-family: Courier New,Courier,monospace">focus_in()</span> event is followed by the <span style="font-family: Courier New,Courier,monospace">show()</span> event.
+
+<pre class="prettyprint">
+static int
+focus_in(int context_id, void *user_data)
+{
+ // Take action
+}
+</pre></li>
+<li>The <span style="font-family: Courier New,Courier,monospace">focus_out()</span> callback is triggered when an associated text input UI control in any application loses the focus. Usually, the <span style="font-family: Courier New,Courier,monospace">focus_out()</span> event is followed by the <span style="font-family: Courier New,Courier,monospace">hide()</span> event.
+
+<pre class="prettyprint">
+static int
+focus_out(int context_id, void *user_data)
+{
+ // Take action
+}
+</pre></li>
+<li>The <span style="font-family: Courier New,Courier,monospace">cursor_position_updated()</span> callback is triggered when the position of the cursor in an associated text input UI control changes. You can use this callback to provide, for example, auto-capitalization or predictive text features.
+
+<pre class="prettyprint">
+static int
+cursor_position_updated(int cursor_pos, void *user_data)
+{
+ // Take action
+}
+</pre></li>
+</ul>
+</li>
+</ol>
+</li>
+
+</ol>
+
+ <h2 id="menu" name="menu">Making a Keyboard Option Menu</h2>
+<p>To make the option menu for the keyboard:</p>
+<ol>
+<li>Add the necessary callback functions for reacting to the keyboard option menu opening and closing before calling the <span style="font-family: Courier New,Courier,monospace">ime_run()</span> function:
+<pre class="prettyprint">
+static void
+option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data);
+static void
+option_window_destroyed(Evas_Object *window, void *user_data);
+
+void ime_app_main(int argc, char **argv)
+{
+ ime_callback_s basic_callback =
+ {
+ // Add the mandatory callbacks
+ };
+
+ ime_event_set_option_window_created_cb(option_window_created, NULL);
+ ime_event_set_option_window_destroyed_cb(option_window_destroyed, NULL);
+
+ ime_run(&basic_callback, NULL);
+}
+</pre>
+</li>
+<li>The option menu can be opened in 2 different ways:
+<ul>
+<li>The device Settings application can open the keyboard option menu from <strong>Settings > Language and input > Keyboard > Keyboard settings</strong>.
+<p>If the user selects the keyboard settings, the <span style="font-family: Courier New,Courier,monospace">option_window_created()</span> callback is executed:</p>
+<pre class="prettyprint">
+static void
+option_window_created(Evas_Object *window, ime_option_window_type_e type, void *user_data)
+{
+ // Create the option window.
+ // Draw the content to the given window object
+
+ evas_object_show(window);
+}
+</pre>
+</li>
+
+<li>The keyboard can have a specific key button for its option menu, allowing the user to open the option menu directly from the keyboard.
+
+<p>If the user clicks the key button, you can use the <span style="font-family: Courier New,Courier,monospace">ime_create_option_window()</span> function in the button click callback to open the option menu:</p>
+<pre class="prettyprint">
+static void
+_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+ // Open the IME option menu window
+ ime_create_option_window();
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">ime_create_option_window()</span> function call triggers the <span style="font-family: Courier New,Courier,monospace">option_window_created()</span> callback, in which you can draw the option menu content on the given window.</p>
+</li></ul>
+</li>
+<li>To close the option menu, call the <span style="font-family: Courier New,Courier,monospace">ime_destroy_option_window()</span> function. The function call triggers the <span style="font-family: Courier New,Courier,monospace">option_window_destroyed()</span> callback:
+<pre class="prettyprint">
+static void
+option_window_destroyed(Evas_Object *window, void *user_data)
+{
+ // Destroy the option window
+ // Release the resources
+}
+</pre>
+</li>
+</ol>
+
+ <h2 id="list" name="list">Showing the IME List</h2>
+
+<p>To launch the IME list menu to show the installed IMEs:</p>
+
+<ol>
+<li>To use the functions and data types of the Input Method Manager API, include the <span style="font-family: Courier New,Courier,monospace"><inputmethod_manager.h></span> header file in your application:
+<pre class="prettyprint">#include <inputmethod_manager.h></pre>
+</li>
+<li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/imemanager</span> privilege to the application manifest file.</li>
+<li>Open the IME list menu with the <span style="font-family: Courier New,Courier,monospace">ime_manager_show_ime_list()</span> function:
+
+<pre class="prettyprint">
+void show_ime_list()
+{
+ int ret = ime_manager_show_ime_list();
+ if (IME_MANAGER_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>If the menu opens successfully, the function returns 0.</p>
+</li></ol>
+
+ <h2 id="selector" name="selector">Showing the IME Selector</h2>
+
+<p>To launch the IME selector menu to allow the user to select the default keyboard:</p>
+
+<ol>
+<li>To use the functions and data types of the Input Method Manager API, include the <span style="font-family: Courier New,Courier,monospace"><inputmethod_manager.h></span> header file in your application:
+<pre class="prettyprint">#include <inputmethod_manager.h></pre>
+</li>
+<li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/imemanager</span> privilege to the application manifest file.</li>
+<li>Open the IME selector menu with the <span style="font-family: Courier New,Courier,monospace">ime_manager_show_ime_selector()</span> function:
+
+<pre class="prettyprint">
+void show_ime_selector()
+{
+ int ret = ime_manager_show_ime_selector();
+ if (IME_MANAGER_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>If the menu opens successfully, the function returns 0.</p>
+</li></ol>
+
+ <h2 id="enable" name="enable">Checking the IME State</h2>
+
+<p>To check the current default keyboard or whether a specific IME is enabled:</p>
+
+<ol>
+<li>Add the <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/imemanager</span> privilege to the application manifest file.</li>
+<li>To check whether a specific IME is enabled, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_is_ime_enabled()</span> function. The first parameter is the application ID of the IME whose status you want to check.
+
+<pre class="prettyprint">
+boolean is_ime_enabled(const char *app_id)
+{
+ boolean enabled = false;
+ int ret = ime_manager_is_ime_enabled(app_id, &enabled);
+ if (IME_MANAGER_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+
+ return enabled;
+}
+</pre>
+
+<p>If the function is successful, it returns 0.</p>
+</li>
+<li>To check which IME is current selected as the default keyboard, call the <span style="font-family: Courier New,Courier,monospace">ime_manager_get_active_ime()</span> function:
+
+<pre class="prettyprint">
+void get_active_ime()
+{
+ char *app_id = NULL;
+ int ret = ime_manager_get_active_ime(&app_id);
+ if (IME_MANAGER_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ // Take action
+
+ free(app_id);
+}
+</pre>
+
+<p>If the function is successful, it returns 0.</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>
<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>
</li>
- <li><a href="stt_tutorial_n.htm">STT: Recognizing the speech</a>
+ <li><a href="stt_tutorial_n.htm">STT: Recognizing Speech</a>
<p>Demonstrates how you can recognize sound data recorded by the user and send the result as text.</p>
</li>
+ <li><a href="voicecontrol_tutorials_n.htm">Voice Control: Using Voice Commands</a>
+ <p>Demonstrates how you can allow the user to control the device through voice commands.</p>
+ </li>
+ <li><a href="ime_tutorial_n.htm">Input Method: Managing Keyboards</a>
+ <p>Demonstrates how you can create an IME application and manage the keyboards.</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>Voice control elementary: Controlling UI Elements with Voice</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 Voice Control</a></li>
+ <li><a href="#callback">Monitoring Language Changes</a></li>
+ <li><a href="#info">Retrieving Voice Control Information</a></li>
+ <li><a href="#command_hint">Managing Commands and Hints</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/uix/voicecontrol_elm_n.htm">Voice control elementary Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__VOICE__CONTROL__ELEMENTARY__MODULE.html">Voice control elementary API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Voice control elementary: Controlling UI Elements with Voice</h1>
+ <p>This tutorial demonstrates how you can register voice commands for EFL-supported UI components to perform component-related actions, such as button clicks.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Voice control elementary API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Voice Control</a>
+ <p>Initialize the Voice control elementary library and create a handle.</p></li>
+ <li><a href="#callback">Monitoring Language Changes</a>
+ <p>Set and unset a callback to get notifications when the language changes.</p></li>
+ <li><a href="#info">Retrieving Voice Control Information</a>
+ <p>Get information about supported languages, widgets, and actions.</p></li>
+ <li><a href="#command_hint">Managing Commands and Hints</a>
+ <p>Set and unset commands and hints, and define the hint direction and offset.</p></li>
+ </ul>
+
+
+ <h2 id="init" name="init">Initializing the Voice Control</h2>
+<p>To initialize the Voice control elementary library and create a handle:</p>
+<ol>
+<li>To use the functions and data types of the Voice control elementary API, include the <span style="font-family: Courier New,Courier,monospace"><voice_control_elm.h></span> header file in your application:
+<pre class="prettyprint">#include <voice_control_elm.h></pre>
+</li>
+<li>Initialize the Voice control elementary library with the <span style="font-family: Courier New,Courier,monospace">vc_elm_initialize()</span> function:
+<pre class="prettyprint">
+void initialize_voice_control_elm()
+{
+ int ret;
+ ret = vc_elm_initialize();
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>Create a handle for each UI component for which you want to set a command and hint. Use the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_object()</span> function to create a handle for Evas_Objects, and the <span style="font-family: Courier New,Courier,monospace">vc_elm_create_item()</span> function for Elm_Object_Items.
+<pre class="prettyprint">
+void create_vc_elm_handler()
+{
+ int ret;
+ vc_elm_h handler_object;
+ vc_elm_h handler_item;
+
+ // Creating Evas_Object button
+ Evas_Object *button = elm_button_add(win);
+ ret = vc_elm_create_object(button, &handler_object);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ // Creating Elm_Object_Item list
+ Elm_Object_Item *item = elm_list_item_append(...);
+ ret = vc_elm_create_item(item, &handler_item);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>When voice control is no longer needed, destroy the handle and deinitialize the library:
+<pre class="prettyprint">
+void destroy_vc_elm_handler(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_destroy(handler);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void deinitialize_voice_control_elm()
+{
+ int ret;
+ ret = vc_elm_deinitialize();
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+</ol>
+
+ <h2 id="callback" name="callback">Monitoring Language Changes</h2>
+
+<p>To monitor when the system or application language changes:</p>
+
+<ol>
+<li>Set the language change callback to be invoked when the system or application language changes.
+<p>It is important to track the current language, since you must set the commands and hints accordingly to ensure that the voice commands are recognized correctly.</p>
+<pre class="prettyprint">
+void set_language_changed_cb()
+{
+ int ret;
+ ret = vc_elm_set_current_language_changed_cb(language_changed_cb, NULL);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>Define the callback to set the commands and hints according to the current language:
+<pre class="prettyprint">
+void language_changed_cb(const char *previous, const char *current, void* user_data)
+{
+ if ("en_US" == current)
+ {
+ vc_elm_set_command(handler, "button");;
+ vc_elm_set_command_hint(handler, "button");
+ }
+ else if ("ko_KR" = current)
+ {
+ vc_elm_set_command(handler, "버튼");;
+ vc_elm_set_command_hint(handler, "버튼");
+ }
+}
+</pre></li>
+
+<li>When no longer needed, unset the callback:
+<pre class="prettyprint">
+void unset_state_changed_cb()
+{
+ int ret;
+ ret = vc_elm_unset_current_language_changed_cb();
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li></ol>
+
+
+ <h2 id="info" name="info">Retrieving Voice Control Information</h2>
+
+<p>To get information about supported languages, widgets, and actions:</p>
+
+<ul>
+<li>
+<p>Get the current Voice control elementary language using the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_current_language()</span> function:</p>
+<pre class="prettyprint">
+void get_language()
+{
+ char *current_language;
+ int ret;
+ ret = vc_elm_get_current_language(&current_language);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Get the languages supported by Voice control elementary library with a callback function that runs for each language separately.
+<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported languages.</p>
+<pre class="prettyprint">
+bool supported_language_cb(const char *language, void* user_data)
+{
+ return true; // To continue to get the next language
+ return false; // To stop
+}
+
+void set_default_language_changed_cb()
+{
+ int ret;
+ ret = vc_elm_foreach_supported_languages(supported_language_cb, NULL);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Get the UI components supported by Voice control elementary library with a callback function that runs for each UI component separately.
+<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported UI components.</p>
+<pre class="prettyprint">
+void widget_cb(const char *widget, void *user_data)
+{
+ return true; // To continue to get the next UI component
+ return false; // To stop
+}
+
+void set_supported_widget_cb()
+{
+ int ret;
+ ret = vc_elm_foreach_supported_widgets(widget_cb, NULL);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Get the actions supported by Voice control elementary library for specific UI components with a callback function that runs for each action separately.
+<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported actions.</p>
+<p>To translate an actions to corresponding command parameters, use the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_action_command()</span> function.</p>
+<pre class="prettyprint">
+void action_cb(const char *action, void *user_data)
+{
+ char *command_param;
+ vc_elm_get_action_command(action, &command_param);
+ return true; // To continue to get the next action
+ return false; // To stop
+}
+
+void set_supported_action_cb()
+{
+ int ret;
+ // Elm_Button is an example, this can be obtained using vc_elm_foreach_supported_widgets callback
+ ret = vc_elm_foreach_supported_actions("Elm_Button", action_cb, NULL);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li></ul>
+
+ <h2 id="command_hint" name="command_hint">Managing Commands and Hints</h2>
+
+<p>To set and unset commands and hints, and define the hint direction and offset:</p>
+
+<ol>
+<li>Use the handle created for a specific UI component to set a command the user must speak in order to perform actions on the UI component:
+
+<pre class="prettyprint">
+void set_command(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_set_command(handler, "Command");
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}</pre>
+</li>
+<li>To show the command on the screen as a tooltip, set a hint (tooltip) for the UI component:
+
+<pre class="prettyprint">
+void set_command_hint(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_set_command_hint(handler, "Hint");
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}</pre>
+</li>
+<li>Set the hint direction and offset (X and Y coordinates).
+<p>By default, the hint tooltip is shown so that it does not cover the underlying UI component and does not intersect with other hints.</p>
+<pre class="prettyprint">
+void set_hint_direction(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_set_command_hint_direction(handler, VC_ELM_DIRECTION_RIGHT);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void set_hint_offset(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_set_command_hint_offset(handler, 100, 100);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>You can get the current hint location using the <span style="font-family: Courier New,Courier,monospace">vc_elm_get_command_hint_direction()</span> and <span style="font-family: Courier New,Courier,monospace">vc_elm_get_command_hint_offset()</span> functions:</p>
+<pre class="prettyprint">
+void get_hint_direction(vc_elm_h &handler)
+{
+ int ret;
+ vc_elm_direction_e direction;
+ ret = vc_elm_get_command_hint_direction(handler, &direction);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void get_hint_offset(vc_elm_h &handler)
+{
+ int ret;
+ int x, y;
+ ret = vc_elm_get_command_hint_offset(handler, &x, &y);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+</li>
+<li>When no longer needed, unset the command and hint:
+<pre class="prettyprint">
+void unset_command(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_unset_command(handler);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void unset_command_hint(vc_elm_h &handler)
+{
+ int ret;
+ ret = vc_elm_unset_command_hint(handler);
+ if (VC_ELM_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
--- /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>Voice control: Recognizing Voice Commands</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 Voice Control</a></li>
+ <li><a href="#callback">Managing Callbacks</a></li>
+ <li><a href="#info">Retrieving Voice Control Information</a></li>
+ <li><a href="#commands">Managing Commands</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/uix/voicecontrol_n.htm">Voice control Guide</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Voice control: Recognizing Voice Commands</h1>
+ <p>This tutorial demonstrates how you can register voice commands, which trigger a callback when the user speaks them.</p>
+
+ <h2>Warm-up</h2>
+ <p>Become familiar with the Voice control API basics by learning about:</p>
+ <ul>
+ <li><a href="#init">Initializing the Voice Control</a>
+ <p>Initialize and prepare the voice control for use.</p></li>
+ <li><a href="#callback">Managing Callbacks</a>
+ <p>Set and unset callbacks to get notifications about recognition results, state changes, and errors.</p></li>
+ <li><a href="#info">Retrieving Voice Control Information</a>
+ <p>Get information about the current states, and current and supported languages.</p></li>
+ <li><a href="#commands">Managing Commands</a>
+ <p>Create a command list and commands.</p></li>
+ </ul>
+
+
+ <h2 id="init" name="init">Initializing the Voice Control</h2>
+<p>To initialize and prepare the voice control for use:</p>
+<ol>
+<li>To use the functions and data types of the Voice control API, include the <span style="font-family: Courier New,Courier,monospace"><voice_control.h></span> header file in your application:
+<pre class="prettyprint">#include <voice_control.h></pre>
+</li>
+<li>Initialize the voice control with the <span style="font-family: Courier New,Courier,monospace">vc_initialize()</span> function:
+<pre class="prettyprint">
+void initialize_voice_control()
+{
+ int ret;
+ ret = vc_initialize();
+ if (VC_ERROR_NONE != result)
+ {
+ // Error handling
+ }
+}
+</pre>
+<p>If the function call is successful, the voice control state changes to <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">The voice control feature is not thread safe and depends on the ecore main loop. Implement voice control within the ecore main loop and do not use it in a thread.</td>
+ </tr>
+ </tbody>
+ </table>
+
+</li>
+<li>Prepare the Voice control service with the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function, which connects the background Voice control daemon. The daemon records and recognizes audio data and converts sound to text.
+<p>The <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function is asynchronous, and when the preparation succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span>. If the <span style="font-family: Courier New,Courier,monospace">vc_prepare()</span> function fails, the error callback is triggered.</p>
+
+<pre class="prettyprint">
+void prepare_vc()
+{
+ int ret;
+ ret = vc_prepare();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>When voice control is no longer needed, unprepare and deinitialize it:
+<pre class="prettyprint">
+void unprepared_vc()
+{
+ int ret;
+ ret = vc_unprepare();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void deinitialize_voice_control()
+{
+ int ret;
+ ret = vc_deinitialize();
+ if (VC_ERROR_NONE != result)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>When the <span style="font-family: Courier New,Courier,monospace">vc_unprepare()</span> function succeeds, the voice control state changes from <span style="font-family: Courier New,Courier,monospace">VC_STATE_READY</span> to <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</p>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Do not call the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function in a callback function. Within a callback function, the <span style="font-family: Courier New,Courier,monospace">vc_deinitialize()</span> function fails and returns <span style="font-family: Courier New,Courier,monospace">VC_ERROR_OPERATION_FAILED</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+</ol>
+
+ <h2 id="callback" name="callback">Managing Callbacks</h2>
+<p>The callback functions are defined in the <span style="font-family: Courier New,Courier,monospace">voice_control_common.h</span> header file, where you can find more information about them.</p>
+
+<p>To set and unset callbacks to get notifications about recognition results, state changes, and errors:</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">Set and unset all callbacks when the voice control state is <span style="font-family: Courier New,Courier,monospace">VC_STATE_INITIALIZED</span>.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<ul>
+<li>Set the state change callback to be invoked when the voice control state changes:
+<pre class="prettyprint">
+void state_changed_cb(vc_state_e previous, vc_state_e current, void* user_data)
+{
+ // Your code
+}
+void set_state_changed_cb()
+{
+ int ret;
+ ret = vc_set_state_changed_cb(state_changed_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+void unset_state_changed_cb()
+{
+ int ret;
+ ret = vc_unset_state_changed_cb();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>Set the service state change callback to be invoked when the Voice control service state changes:
+<pre class="prettyprint">
+void __service_state_changed_cb(vc_service_state_e previous, vc_service_state_e current, void* user_data)
+{
+ // Your code
+}
+void set_service_state_changed_cb()
+{
+ int ret;
+ ret = vc_set_service_state_changed_cb(__service_state_changed_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+void unset_service_state_changed_cb()
+{
+ int ret;
+ ret = vc_unset_service_state_changed_cb();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+
+<li>Set the current language change callback to be invoked when the system or application language changes:
+<pre class="prettyprint">
+void __current_language_changed_cb(const char* previous, const char* current, void* user_data)
+{
+ // Your code
+}
+void set_current_language_changed_cb()
+{
+ int ret;
+ ret = vc_set_current_language_changed_cb(__current_language_changed_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+void unset_current_language_changed_cb()
+{
+ int ret;
+ ret = vc_unset_current_language_changed_cb();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Set the recognition result callback to be invoked when a voice command is recognized.
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">If the recognition result produces a reject event, the Voice control service has rejected the recognized command. Make sure that the command does not conflict with other commands and there are not duplicated commands.</td>
+ </tr>
+ </tbody>
+ </table>
+
+<p>To get the command, use the Voice control APIs with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list</span> parameter, which is a list of recognized commands. The <span style="font-family: Courier New,Courier,monospace">result</span> parameter contains the recognized text.</p>
+
+<pre class="prettyprint">
+void __result_cb(vc_result_event_e event, vc_cmd_list_h vc_cmd_list, const char* result, void* user_data)
+{
+ int ret = -1;
+ int count = 0;
+ ret = vc_cmd_list_get_count(vc_cmd_list, &count);
+ if (VC_ERROR_NONE != ret)
+ {
+ // No result
+
+ return;
+ }
+
+ vc_cmd_list_first(vc_cmd_list);
+
+ int i = 0;
+ int type = 0;
+ char* cmd = NULL;
+ vc_cmd_h result_command = NULL;
+ for (i = 0;i < count;i++)
+ {
+ result_command = NULL;
+ ret = vc_cmd_list_get_current(vc_cmd_list, &result_command);
+ if (0 == ret && NULL != result_command)
+ {
+ cmd = NULL;
+ type = 0;
+ vc_cmd_get_command(result_command, &cmd);
+ vc_cmd_get_type(result_command, &type);
+ // Check command and type
+ }
+ }
+
+ return;
+}
+
+void set_result_cb()
+{
+ int ret;
+ ret = vc_set_result_cb(__result_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void unset_result_cb()
+{
+ int ret;
+ ret = vc_unset_result_cb();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Set the error callback to be invoked when an error occurs in the voice control process:
+<pre class="prettyprint">
+void __error_cb(vc_error_e reason, void* user_data)
+{
+ // Your code
+}
+
+void set_error_cb(vc_h vc)
+{
+ int ret;
+ ret = vc_set_error_cb(__error_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void unset_error_cb(vc_h vc)
+{
+ int ret;
+ ret = vc_unset_error_cb();
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li></ul>
+
+
+ <h2 id="info" name="info">Retrieving Voice Control Information</h2>
+
+<p>To get information about the current states, and current and supported languages:</p>
+
+<ul>
+<li>
+<p>Get the current voice control state using the <span style="font-family: Courier New,Courier,monospace">vc_get_state()</span> function.</p>
+<p>The voice control state changes according to function calls when the voice control is, for example, initialized and prepared.</p>
+<pre class="prettyprint">
+void get_state()
+{
+ vc_state_e current_state;
+ int ret;
+ ret = vc_get_state(&current_state);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>
+<p>Get the current voice control service state using the <span style="font-family: Courier New,Courier,monospace">vc_get_service_state()</span> function.</p>
+<p>The user controls the voice control service state. In a general scenario:</p>
+<ol><li>The user starts recording for recognition by using a voice application, button, or voice trigger. If the start is successful, the voice control service state changes to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_RECORDING</span>.</li>
+<li>After recording, the service state changes to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_PROCESSING</span> for recognition processing.</li>
+<li>After recognition is completed, the service state returns to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_READY</span>.</li></ol>
+<p>If the application uses continuous recognition, the voice control service state can be changed from <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_PROCESSING</span> directly to <span style="font-family: Courier New,Courier,monospace">VC_SERVICE_STATE_RECORDING</span>.</p>
+
+<pre class="prettyprint">
+void get_state(vc_h vc)
+{
+ vc_service_state_e service_state;
+ int ret;
+ ret = vc_get_service_state(&service_state);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Get the supported languages with a callback function that runs for each language separately.
+<p>The callback cannot be unset: as long as it returns <span style="font-family: Courier New,Courier,monospace">true</span>, it continues to loop over the supported languages.</p>
+<pre class="prettyprint">
+bool supported_language_cb(const char* language, void* user_data)
+{
+ return true; // To continue to get the next language
+ return false; // To stop
+}
+
+void get_supported_language()
+{
+ int ret;
+ ret = vc_foreach_supported_languages(supported_language_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+<li>Get the current language with the <span style="font-family: Courier New,Courier,monospace">vc_get_current_language()</span> function. The voice control recognition works for the current (default) language. Use the language change callback to be notified of language changes.
+
+<pre class="prettyprint">
+void get_current_language()
+{
+ int ret;
+ char* current_lang = NULL;
+ ret = vc_get_current_language(&current_lang);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre></li>
+</ul>
+
+ <h2 id="commands" name="commands">Managing Commands</h2>
+
+<p>To create a command list and commands:</p>
+
+<ol>
+<li>Create a command list with a command list handle.
+<p>The command list can include many commands, which have a command text and type. The list can have both the <span style="font-family: Courier New,Courier,monospace">VC_COMMAND_TYPE_FOREGROUND</span> and <span style="font-family: Courier New,Courier,monospace">VC_COMMAND_TYPE_BACKGROUND</span> type commands. The foreground commands are valid when the application is in a visible state and the background commands are valid when the application is in a visible or invisible state.</p>
+<p>You can access the command list after you set it to the voice control and when you get the recognition result. </p>
+
+<pre class="prettyprint">
+void create_command_list()
+{
+ int ret;
+ vc_cmd_list_h vc_cmd_list;
+ ret = vc_cmd_list_create(&vc_cmd_list);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>Create a command.
+<p>First create a command handle, and then define the command and type.</p>
+<pre class="prettyprint">
+void create_command()
+{
+ int ret;
+ vc_cmd_h vc_cmd = NULL;
+ ret = vc_cmd_create(&vc_cmd);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+
+ ret = vc_cmd_set_command(vc_cmd, "open");
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ ret = vc_cmd_set_type(vc_cmd, VC_COMMAND_TYPE_FOREGROUND);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>Add the command to the command list.
+<p>If necessary, you can also remove commands from the command list. After you remove the command, if you no longer use it, destroy the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</p>
+<pre class="prettyprint">
+void add_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
+{
+ int ret;
+ ret = vc_cmd_list_add(vc_cmd_list, vc_cmd);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void remove_command(vc_cmd_list_h vc_cmd_list, vc_cmd_h vc_cmd)
+{
+ int ret;
+ ret = vc_cmd_list_remove(vc_cmd_list, vc_cmd);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ // Destroy the command if no longer needed
+ ret = vc_cmd_destroy(vc_cmd);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+
+<p>To get the commands you have added to the command list, use the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_foreach_commands()</span> function to get all commands with a callback function at once, or the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function to retrieve the commands without a callback function.</p>
+
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">When you get the command handle with the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_get_current()</span> function, do not release the command handle. To release the command handle, call the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_remove()</span> function before the <span style="font-family: Courier New,Courier,monospace">vc_cmd_destroy()</span> function.</td>
+ </tr>
+ </tbody>
+ </table>
+<pre class="prettyprint">
+bool __vc_get_command_cb(vc_cmd_h vc_command, void* user_data)
+{
+ // Your code
+
+ return true;
+}
+
+void foreach_command(vc_cmd_list_h vc_cmd_list)
+{
+ int ret;
+ vc_cmd_h vc_cmd;
+ ret = vc_cmd_list_foreach_commands(vc_cmd_list, __vc_get_command_cb, NULL);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void get_commands(vc_cmd_list_h vc_cmd_list)
+{
+ int i;
+ int ret;
+ int count;
+ vc_cmd_h vc_cmd;
+ char* command = NULL;
+ int type = 0;
+
+ ret = vc_cmd_list_get_count(vc_cmd_list, &count);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+
+ if (0 >= count)
+ {
+ // Error handling
+
+ return;
+ }
+
+ ret = vc_cmd_list_first(vc_cmd_list);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+
+ do
+ {
+ ret = vc_cmd_list_get_current(vc_cmd_list, &vc_cmd);
+ if (VC_ERROR_NONE == ret)
+ {
+ ret = vc_cmd_get_command(vc_cmd, &command);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ if (NULL != command)
+ {
+ // Command must be released
+ free(command);
+ }
+
+ ret = vc_cmd_get_type(vc_cmd, &type);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+ // Do not release the command handle
+ }
+
+ ret = vc_cmd_list_next(vc_cmd_list);
+ } while (VC_ERROR_ITERATION_END != ret);
+}
+</pre>
+
+</li>
+<li>Register the commands for recognition by setting the command list to the voice control.
+<p>If you want to update registered commands, set the command list again with the updated commands.</p>
+<pre class="prettyprint">
+void set_command(vc_cmd_list_h vc_cmd_list, int type)
+{
+ int ret;
+ ret = vc_set_command_list(vc_cmd_list, type);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+<li>When no longer needed, unset the command list, and destroy the command and command list handles.
+<p>When you destroy the command list, all the commands in the command list are not automatically released. If you no longer need the commands, set the second parameter of the <span style="font-family: Courier New,Courier,monospace">vc_cmd_list_destroy()</span> function to <span style="font-family: Courier New,Courier,monospace">true</span>.</p>
+<pre class="prettyprint">
+void unset_command(int type)
+{
+ int ret;
+ ret = vc_unset_command_list(type);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void destroy_command(vc_cmd_h vc_cmd)
+{
+ int ret;
+ ret = vc_cmd_destroy(vc_cmd);
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+
+void destroy_command_list(vc_cmd_list_h vc_cmd_list)
+{
+ int ret;
+ ret = vc_cmd_list_destroy(vc_cmd_list, true); // true destroys all commands
+ if (VC_ERROR_NONE != ret)
+ {
+ // Error handling
+ }
+}
+</pre>
+</li>
+</ol>
+
+
+<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+<script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+</body>
+</html>
<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/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>Sync: Scheduling for Application Data Syncing</title>
+ <title>Voice Control: Using Voice Commands</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>
+ <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/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 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 class="toc-title">Related Info</p>
+ <ul class="toc">
+ <li><a href="../../../../org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm">Voice Control Guides</a></li>
+ <li><a href="../../../../org.tizen.native.mobile.apireference/XX.html">Voice Control API for Mobile Native</a></li>
+ <li><a href="../../../../org.tizen.native.wearable.apireference/XX.html">Voice Control API for Wearable Native</a></li>
+ </ul>
+ </div></div>
+</div>
- <p>The sync tutorials demonstrate how to use the following features in creating Tizen native applications:</p>
+<div id="container"><div id="contents"><div class="content">
+<h1>Voice Control: Using Voice Commands</h1>
+ <p>The voice control tutorials demonstrate how to allow the user to control the device through voice commands:</p>
<ul>
- <li>
- <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><a href="voicecontrol_tutorial_n.htm">Voice control: Recognizing Voice Commands</a>
+ <p>Demonstrates how you can register voice commands, which trigger a callback when the user speaks them.</p>
</li>
- <li>
- <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><a href="voicecontrol_elm_tutorial_n.htm">Voice control elementary: Controlling UI Elements with Voice</a>
+ <p>Demonstrates how you can register voice commands for EFL-supported UI components to perform component-related actions, such as button clicks.</p>
</li>
</ul>
-
-
<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../../scripts/showhide.js"></script>
</pre>
<p>The <span style="font-family: Courier New,Courier,monospace">evas_object_size_hint_weight_set()</span>
-function sets the hints for an object’s weight. <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> is a macro definition
-for a value 1.0. (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> for -1.0).
-<span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add (Evas_Object* obj, Evas_Object* subobj)</span>
-adds a subobj as the resize object of obj.
-<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>
+function sets the hints for an object's weight. <span style="font-family: Courier New,Courier,monospace">EVAS_HINT_EXPAND</span> is a macro definition for a value 1.0 (<span style="font-family: Courier New,Courier,monospace">EVAS_HINT_FILL</span> for -1.0). The <span style="font-family: Courier New,Courier,monospace">elm_win_resize_object_add(Evas_Object* obj, Evas_Object* subobj)</span> function adds a subobj as the resize object of obj. The <span style="font-family: Courier New,Courier,monospace">evas_object_show(Evas_Object* obj)</span> function 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>
<h2 id="view" name="view">Setting the Window View</h2>
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=9" />
+ <link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
+ <link rel="stylesheet" type="text/css" href="../../../css/snippet.css" />
+ <script type="text/javascript" src="../../../scripts/snippet.js"></script>
+ <script type="text/javascript" src="../../../scripts/jquery.util.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/common.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/core.js" charset="utf-8"></script>
+ <script type="text/javascript" src="../../../scripts/search.js" charset="utf-8"></script>
+
+ <title>Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</title>
+</head>
+
+<body onload="prettyPrint()" style="overflow: auto;">
+
+<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="toc_border"><div id="toc">
+ <p class="toc-title">Content</p>
+ <ul class="toc">
+ <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a></li>
+ <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</a></li>
+ <li><a href="#Managing_Advertising">Managing the Advertising Options</a></li>
+ <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a></li>
+ <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a></li>
+ <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a></li>
+ <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a></li>
+ <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a></li>
+ <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a></li>
+ </ul>
+ <p class="toc-title">Related Info</p>
+ <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>
+ </ul>
+ </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</h1>
+
+
+ <p>This tutorial demonstrates how you can manage Bluetooth Low Energy devices and exchange data with a peer device.</p>
+
+ <table class="note">
+<tbody>
+ <tr>
+ <th class="note">Note</th>
+ </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.</td>
+ </tr>
+ <tr>
+ <td class="note">The Bluetooth API is not supported on any Tizen Emulators.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <h2 id="warm_up" name="warm_up">Warm-up</h2>
+ <p>Become familiar with the Bluetooth Low Energy API basics by learning about:</p>
+ <ul>
+ <li><a href="#Managing_BT_Adapter">Managing the Local Bluetooth Adapter</a> <p>Enable and disable the local Bluetooth adapter, and change the device name for it.</p></li>
+ <li><a href="#Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</a> <p>Search for remote devices.</p></li>
+ <li><a href="#Managing_Advertising">Managing the Advertising Options</a> <p>Manage what information is advertised to any Bluetooth Low Energy device in the proximity.</p></li>
+ <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a> <p>Connect to a detected Bluetooth Low Energy device.</p></li>
+ <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a> <p>Monitor the connection state to a remote Bluetooth Low Energy device.</p></li>
+ <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a> <p>Check information about the Bluetooth GATT services provided by a remote device.</p></li>
+ <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a> <p>Read and write a value of the Bluetooth GATT characteristic of a remote device.</p></li>
+ <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a> <p>Monitor changes in a Bluetooth GATT characteristic value.</p></li>
+ <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a> <p>Read and write a value of the Bluetooth GATT characteristic descriptor of a remote device.</p></li>
+ </ul>
+
+ <h2 id="Managing_BT_Adapter" name="Managing_BT_Adapter">Managing the Local Bluetooth Adapter</h2>
+
+ <p>To enable the Bluetooth device, request the built-in Settings application to present the relevant switch to the user so that they can enable or disable the Bluetooth. For more information, see <a href="bluetooth_tutorial_w.htm#Managing_BT_Adapter">Managing the Local Bluetooth Adapter in the Bluetooth Tutorial</a>.</p>
+
+ <h2 id="Discovering_BT_Devices" name="Discovering_BT_Devices">Discovering Bluetooth Low Energy Devices</h2>
+
+ <p>Learning how to search for remote devices is a basic Bluetooth management skill:</p>
+ <ol>
+ <li>Define a scan event handler by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
+ <p>The callback is invoked when the scan has started, a remote device has been detected, or the scan is finished.</p>
+<pre class="prettyprint">
+var callbacks =
+{
+ onstarted: function()
+ {
+ console.log("Scan started");
+ },
+ ondevicefound: function(device)
+ {
+ console.log("Found device: " + device.name + " [" + device.address + "]");
+ },
+ onfinished: function(devices)
+ {
+ console.log("Scan finished. Found " + devices.length + " devices.");
+ }
+};
+</pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
+ </tr>
+ </tbody>
+ </table> </li>
+
+ <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ </li>
+
+ <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.startScan(callbacks);</pre>
+ </li>
+ <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.stopScan();</pre>
+ </li>
+
+ </ol>
+
+ <h2 id="Managing_Advertising" name="Managing_Advertising">Managing the Advertising Options</h2>
+ <p>The Bluetooth Low Energy technology allows a device to broadcast some information without a connection between devices. The Bluetooth Low Energy API provides methods to control this advertising (broadcasting).</p>
+ <p>Learning how to control what information is advertised by the device is a useful Bluetooth Low Energy skill:</p>
+
+ <ol>
+ <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ </li>
+
+ <li><p>Set up options and start advertising with the <span style="font-family: Courier New,Courier,monospace">startAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">
+var advertiseData = new tizen.BluetoothLEAdvertiseData(
+{
+ includeName: true,
+ serviceuuids: ["180f"] /* 180F is 16bit Battery Service UUID */
+});
+var connectable = true;
+
+adapter.startAdvertise(advertiseData, "ADVERTISE",
+ function onstate(state)
+ {
+ console.log("Advertising configured: " + state);
+ },
+ function(error)
+ {
+ console.log("startAdvertise() failed: " + error.message);
+ },
+ "LOW_LATENCY", connectable);
+</pre>
+ <table class="note">
+ <tbody>
+ <tr>
+ <th class="note">Note</th>
+ </tr>
+ <tr>
+ <td class="note">To learn how to make your mobile device visible to other Bluetooth devices, see <a href="bluetooth_tutorial_w.htm#Managing_BT_Adapter">Managing the Local Bluetooth Adapter of the Bluetooth Tutorial</a>.</td>
+ </tr>
+ </tbody>
+ </table>
+ </li>
+ <li><p>To disable the advertising, use the <span style="font-family: Courier New,Courier,monospace">stopAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
+<pre class="prettyprint">adapter.stopAdvertise();</pre>
+ </li>
+ </ol>
+
+ <h2 id="Connecting" name="Connecting">Connecting to a Bluetooth Low Energy Device</h2>
+
+ <p>Learning how to connect to other devices is a basic Bluetooth Low Energy management skill:</p>
+ <ol>
+ <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ </li>
+ <li><p>Define success and error callbacks for the connect operation:</p>
+<pre class="prettyprint">
+function connectFail(error)
+{
+ console.log("Failed to connect to device: " + e.message);
+}
+
+function connectSuccess()
+{
+ console.log("Connected to device");
+}
+</pre>
+ </li>
+
+ <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
+ <p>Within the callback request, establish a connection with the found device using the <span style="font-family: Courier New,Courier,monospace">connect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var remoteDevice = null;
+
+function onDeviceFound(device)
+{
+ if (remoteDevice === null)
+ {
+ remoteDevice = device;
+ console.log("Found device " + device.name + ". Connecting...");
+
+ device.connect(connectSuccess, connectFail);
+ }
+
+ adapter.stopScan();
+}
+</pre>
+ </li>
+
+ <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
+<pre class="prettyprint">adapter.startScan({ondevicefound: onDeviceFound});</pre></li>
+
+ <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
+<pre class="prettyprint">remoteDevice.disconnect();</pre></li>
+
+ </ol>
+
+ <h2 id="Connection_Notification" name="Connection_Notification">Receiving Notifications on Connection State Changes</h2>
+
+ <p>Learning how to receive notifications whenever the device connection is established or lost is a useful Bluetooth management skill:</p>
+ <ol>
+
+ <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
+<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
+ </li>
+ <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
+<pre class="prettyprint">
+var connectionListener =
+{
+ onconnected: function(device)
+ {
+ console.log("Connected to the device: " + device.name + " [" + device.address + "]");
+ },
+ ondisconnected: function(device)
+ {
+ console.log("Disconnected from the device " + device.name + " [" + device.address + "]");
+ }
+};
+</pre>
+ </li>
+
+ <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
+ <p>Within the callback, register a connection state change listener using the <span style="font-family: Courier New,Courier,monospace">addConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">
+var remoteDevice = null;
+var watchId;
+
+function onDeviceFound(device)
+{
+ if (remoteDevice === null)
+ {
+ remoteDevice = device;
+ console.log("Found device " + device.name + ". Connecting...");
+
+ watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
+
+ remoteDevice.connect();
+ }
+
+ adapter.stopScan();
+}
+</pre>
+ </li>
+
+ <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
+<pre class="prettyprint">adapter.startScan({ondevicefound: onDeviceFound});</pre></li>
+
+ <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
+<pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
+ </ol>
+
+ <h2 id="Retrieving_Services" name="Retrieving_Services">Retrieving Bluetooth GATT Services</h2>
+
+ <p>Learning how to retrieve a list of GATT services (Generic Attribute) provided by a remote device is basic Bluetooth Low Energy management skill:</p>
+ <ol>
+
+ <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+ <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
+<pre class="prettyprint">
+function showGATTService(service, indent)
+{
+ if (indent === undefined)
+ {
+ indent = "";
+ }
+
+ console.log(indent + "Service " + service.uuid + ". Has " + service.characteristics.length
+ + " characteristics and " + service.services.length + " sub-services.");
+
+ for (var i = 0; i < service.services.length; i++)
+ {
+ showGATTService(service.services[i], indent + " ");
+ }
+}
+</pre>
+ </li>
+ <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ </li>
+ <li><p>Retrieve GATT service information using the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface for every service UUID:</p>
+<pre class="prettyprint">
+var i = 0, service = null;
+
+for (i; i < serviceUUIDs.length; i++)
+{
+
+ service = remoteDevice.getService(serviceUUIDs[i]);
+
+ showGATTService(service);
+}</pre>
+ </li>
+
+ </ol>
+
+ <h2 id="Characteristic_Value" name="Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</h2>
+
+ <p>Learning how to read and write a value of the Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
+ <ol>
+
+ <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+ <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ </li>
+ <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ </li>
+ <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+ </li>
+ <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic:</p>
+<pre class="prettyprint">
+function readSuccess(value)
+{
+ console.log("Characteristic value: " + value);
+}
+
+function readFail(error)
+{
+ console.log("readValue() failed: " + error);
+}
+</pre>
+ </li>
+ <li><p>To retrieve the GATT characteristic value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
+<pre class="prettyprint">
+if (!property.isReadable)
+{
+ console.log("Property seems not to be readable. Attempting to read...");
+}
+property.readValue(readSuccess, readFail);</pre>
+ </li>
+ <li><p>To change the characteristic value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
+<pre class="prettyprint">
+function writeSuccess(value)
+{
+ console.log("Written");
+}
+
+function writeFail(error)
+{
+ console.log("writeValue() failed: " + error);
+}
+
+if (!property.isWritable)
+{
+ console.log("Property seems not to be writable. Attempting to write...");
+}
+var newValue = [82];
+
+property.writeValue(newValue, writeSuccess, writeFail);
+</pre>
+ </li>
+ </ol>
+
+ <h2 id="Characterictic_Notification" name="Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</h2>
+
+ <p>Learning how to monitor a changes in a Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
+ <ol>
+
+ <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+ <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ </li>
+ <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ </li>
+ <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
+ </li>
+ <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic every time the value changes:</p>
+<pre class="prettyprint">
+function onValueChange(value)
+{
+ console.log("Characteristic value is now: " + value);
+}
+</pre>
+ </li>
+
+ <li><p>Register a value change listener using the <span style="font-family: Courier New,Courier,monospace">addValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
+<pre class="prettyprint">var watchId = property.addValueChangeListener(onValueChange);</pre></li>
+
+ <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
+<pre class="prettyprint">property.removeValueChangeListener(watchId);</pre></li>
+ </ol>
+
+ <h2 id="Descriptor_Value" name="Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</h2>
+
+ <p>Learning how to read and write a value of the Bluetooth descriptor is a useful Bluetooth Low Energy management skill:</p>
+ <ol>
+
+ <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
+ <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
+<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
+ </li>
+ <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
+<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
+ </li>
+ <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
+<pre class="prettyprint">var characteristic = gattService.characteristics[0];</pre></li>
+ <li><p>Select an interesting descriptor from the <span style="font-family: Courier New,Courier,monospace">descriptors</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications). In this example, the first descriptor is used:</p>
+<pre class="prettyprint">var descriptor = characteristic.descriptors[0];</pre>
+ </li>
+ <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the descriptor:</p>
+<pre class="prettyprint">
+function readSuccess(value)
+{
+ console.log("Descriptor value: " + value);
+}
+
+function readFail(error)
+{
+ console.log("readValue() failed: " + error);
+}
+</pre>
+ </li>
+ <li><p>To retrieve the GATT descriptor value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
+<pre class="prettyprint">
+descriptor.readValue(readSuccess, readFail);</pre>
+ </li>
+ <li><p>To change the descriptor value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface:</p>
+<pre class="prettyprint">
+function writeSuccess(value)
+{
+ console.log("Written");
+}
+
+function writeFail(error)
+{
+ console.log("writeValue() failed: " + error);
+}
+
+var newValue = [3];
+
+descriptor.writeValue(newValue, writeSuccess, writeFail);
+</pre>
+ </li>
+ </ol>
+
+<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
+<script type="text/javascript" src="../../../scripts/showhide.js"></script>
+
+</div></div></div>
+
+<a class="top sms" href="#"><img src="../../../images/btn_top.gif" alt="Go to top" /></a>
+
+<div id="footer">
+<p class="footer">Except as noted, this content - excluding the Code Examples - is licensed under <a href="http://creativecommons.org/licenses/by/3.0/legalcode" target="_blank">Creative Commons Attribution 3.0</a> and all of the Code Examples contained herein are licensed under <a href="https://www.tizen.org/bsd-3-clause-license" target="_blank">BSD-3-Clause</a>.<br/>For details, see the <a href="https://www.tizen.org/content-license" target="_blank">Content License</a>.</p>
+</div>
+
+ <script type="text/javascript">
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-25976949-1']);
+_gaq.push(['_trackPageview']);
+(function() {
+var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();
+</script>
+
+ </body>
+</html>
\ No newline at end of file
<li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a></li>
<li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a></li>
<li><a href="#Communicating_Health">Communicating with a Health Source Device</a></li>
- <li>Bluetooth Low Energy</li>
- <ul>
- <li><a href="#Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</a></li>
- <li><a href="#Managing_Advertising">Managing the Advertising Options</a></li>
- <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a></li>
- <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a></li>
- <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a></li>
- <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a></li>
- <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a></li>
- <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a></li>
- </ul>
</ul>
<p class="toc-title">Related Info</p>
<ul class="toc">
<li><a href="#Creating_Bond">Creating a Bonding with a Bluetooth Device</a> <p>Create and end a bonding with a Bluetooth device.</p></li>
<li><a href="#Connecting_BT_device">Connecting to and Exchanging Data with a Bluetooth Device</a> <p>Register a service as a server, connect as a client to the service provided by the server device, and exchange data with the device.</p></li>
<li><a href="#Communicating_Health">Communicating with a Health Source Device</a> <p>Act as a sink and communicate with a health source device.</p></li>
- <li>Bluetooth Low Energy</li>
- <ul>
- <li><a href="#Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</a> <p>Search for remote devices.</p></li>
- <li><a href="#Managing_Advertising">Managing the Advertising Options</a> <p>Manage what information is advertised to any Bluetooth Low Energy device in the proximity.</p></li>
- <li><a href="#Connecting">Connecting to a Bluetooth Low Energy Device</a> <p>Connect to a detected Bluetooth Low Energy device.</p></li>
- <li><a href="#Connection_Notification">Receiving Notifications on Connection State Changes</a> <p>Monitor the connection state to a remote Bluetooth Low Energy device.</p></li>
- <li><a href="#Retrieving_Services">Retrieving Bluetooth GATT Services</a> <p>Check information about the Bluetooth GATT services provided by a remote device.</p></li>
- <li><a href="#Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</a> <p>Read and write a value of the Bluetooth GATT characteristic of a remote device.</p></li>
- <li><a href="#Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</a> <p>Monitor changes in a Bluetooth GATT characteristic value.</p></li>
- <li><a href="#Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</a> <p>Read and write a value of the Bluetooth GATT characteristic descriptor of a remote device.</p></li>
- </ul>
</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>
<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();
</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 */
<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>
</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>
-
- <h2 id="Discovering_BT_LE_Devices" name="Discovering_BT_LE_Devices">Discovering Bluetooth Low Energy Devices</h2>
-
- <p>Learning how to search for remote devices is a basic Bluetooth management skill:</p>
- <ol>
- <li>Define a scan event handler by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEScanCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEScanCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEScanCallback">wearable</a> applications).
- <p>The callback is invoked when a remote device has been detected.</p>
-<pre class="prettyprint">
-var callbacks =
-{
- onsuccess: function(device)
- {
- console.log("Found device: " + device.name + " [" + device.address + "]");
- }
-};
-</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To allow other Bluetooth devices to find your device, you must set the device to be visible through the system settings.</td>
- </tr>
- </tbody>
- </table> </li>
-
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
- </li>
-
- <li><p>To search for remote devices, use the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.startScan(callbacks);</pre>
- </li>
- <li><p>When you find the right remote device or the user cancels the scanning, disable the scan using the <span style="font-family: Courier New,Courier,monospace">stopScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopScan();</pre>
- </li>
-
- </ol>
-
- <h2 id="Managing_Advertising" name="Managing_Advertising">Managing the Advertising Options</h2>
- <p>The Bluetooth Low Energy technology allows a device to broadcast some information without a connection between devices. The Bluetooth Low Energy API provides methods to control this advertising (broadcasting).</p>
- <p>Learning how to control what information is advertised by the device is a useful Bluetooth Low Energy skill:</p>
-
- <ol>
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
- </li>
-
- <li><p>Set up options and start advertising with the <span style="font-family: Courier New,Courier,monospace">startAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">
-var advertiseData = new tizen.BluetoothLEAdvertiseData(
-{
- includeName: true,
- serviceuuids: ["180f"] /* 180F is 16bit Battery Service UUID */
-});
-var connectable = true;
-
-adapter.startAdvertise(advertiseData, "ADVERTISE",
- function onstate(state)
- {
- console.log("Advertising configured: " + state);
- },
- function(error)
- {
- console.log("startAdvertise() failed: " + error.message);
- },
- "LOW_LATENCY", connectable);
-</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">To learn how to make your mobile device visible to other Bluetooth devices, see <a href="bluetooth_tutorial_w.htm#Managing_BT_Adapter">Managing the Local Bluetooth Adapter of the Bluetooth Tutorial</a>.</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li><p>To disable the advertising, use the <span style="font-family: Courier New,Courier,monospace">stopAdvertise()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> interface:</p>
-<pre class="prettyprint">adapter.stopAdvertise();</pre>
- </li>
- </ol>
-
- <h2 id="Connecting" name="Connecting">Connecting to a Bluetooth Low Energy Device</h2>
-
- <p>Learning how to connect to other devices is a basic Bluetooth Low Energy management skill:</p>
- <ol>
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
- </li>
- <li><p>Define success and error callbacks for the connect operation:</p>
-<pre class="prettyprint">
-function connectFail(error)
-{
- console.log("Failed to connect to device: " + e.message);
-}
-
-function connectSuccess()
-{
- console.log("Connected to device");
-}
-</pre>
- </li>
-
- <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
- <p>Within the callback request, establish a connection with the found device using the <span style="font-family: Courier New,Courier,monospace">connect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">
-var remoteDevice = null;
-
-function onDeviceFound(device)
-{
- if (remoteDevice === null)
- {
- remoteDevice = device;
- console.log("Found device " + device.name + ". Connecting...");
-
- device.connect(connectSuccess, connectFail);
- }
-
- adapter.stopScan();
-}
-</pre>
- </li>
-
- <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan using the <span style="font-family: Courier New,Courier,monospace">startScan()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> adapter:</p>
-<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
-
- <li><p>When the connection to the remote device is no longer required, disconnect from the device by calling the <span style="font-family: Courier New,Courier,monospace">disconnect()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.disconnect();</pre></li>
-
- </ol>
-
- <h2 id="Connection_Notification" name="Connection_Notification">Receiving Notifications on Connection State Changes</h2>
-
- <p>Learning how to receive notifications whenever the device connection is established or lost is a useful Bluetooth management skill:</p>
- <ol>
-
- <li><p>Retrieve a <span style="font-family: Courier New,Courier,monospace">BluetoothLEAdapter</span> object (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEAdapter">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEAdapter">wearable</a> applications) with the <span style="font-family: Courier New,Courier,monospace">getLEAdapter()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothManager</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothManager">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothManager">wearable</a> applications):</p>
-<pre class="prettyprint">var adapter = tizen.bluetooth.getLEAdapter();</pre>
- </li>
- <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
-<pre class="prettyprint">
-var connectionListener =
-{
- onconnected: function(device)
- {
- console.log("Connected to the device: " + device.name + " [" + device.address + "]");
- },
- ondisconnected: function(device)
- {
- console.log("Disconnected from the device " + device.name + " [" + device.address + "]");
- }
-};
-</pre>
- </li>
-
- <li><p>Define a callback for the scan operation that connects to a found device and stops the scan.</p>
- <p>Within the callback, register a connection state change listener using the <span style="font-family: Courier New,Courier,monospace">addConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">
-var remoteDevice = null;
-var watchId;
-
-function onDeviceFound(device)
-{
- if (remoteDevice === null)
- {
- remoteDevice = device;
- console.log("Found device " + device.name + ". Connecting...");
-
- watchId = remoteDevice.addConnectStateChangeListener(connectionListener);
-
- remoteDevice.connect();
- }
-
- adapter.stopScan();
-}
-</pre>
- </li>
-
- <li><p>When the callbacks are completed, initiate the Bluetooth Low Energy scan:</p>
-<pre class="prettyprint">adapter.startScan({onsuccess: onDeviceFound});</pre></li>
-
- <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeConnectStateChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface:</p>
-<pre class="prettyprint">remoteDevice.removeConnectStateChangeListener(watchId);</pre></li>
- </ol>
-
- <h2 id="Retrieving_Services" name="Retrieving_Services">Retrieving Bluetooth GATT Services</h2>
-
- <p>Learning how to retrieve a list of GATT services (Generic Attribute) provided by a remote device is basic Bluetooth Low Energy management skill:</p>
- <ol>
-
- <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Define a connection state change listener by implementing the <span style="font-family: Courier New,Courier,monospace">BluetoothLEConnectChangeCallback</span> (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEConnectChangeCallback">wearable</a> applications):</p>
-<pre class="prettyprint">
-function showGATTService(service, indent)
-{
- if (indent === undefined)
- {
- indent = "";
- }
-
- console.log(indent + "Service " + service.uuid + ". Has " + service.characteristics.length
- + " characteristics and " + service.services.length + " sub-services.");
-
- for (var i = 0; i < service.services.length; i++)
- {
- showGATTService(service.services[i], indent + " ");
- }
-}
-</pre>
- </li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
- </li>
- <li><p>Retrieve GATT service information using the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface for every service UUID:</p>
-<pre class="prettyprint">
-var i = 0, service = null;
-
-for (i; i < serviceUUIDs.length; i++)
-{
-
- service = remoteDevice.getService(serviceUUIDs[i]);
-
- showGATTService(service);
-}</pre>
- </li>
-
- </ol>
-
- <h2 id="Characteristic_Value" name="Characteristic_Value">Accessing the Bluetooth GATT Characteristic Value</h2>
-
- <p>Learning how to read and write a value of the Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
- <ol>
-
- <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
- </li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
- </li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
- </li>
- <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic:</p>
-<pre class="prettyprint">
-function readSuccess(value)
-{
- console.log("Characteristic value: " + value);
-}
-
-function readFail(error)
-{
- console.log("readValue() failed: " + error);
-}
-</pre>
- </li>
- <li><p>To retrieve the GATT characteristic value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
-<pre class="prettyprint">
-if (!property.isReadable)
-{
- console.log("Property seems not to be readable. Attempting to read...");
-}
-property.readValue(readSuccess, readFail);</pre>
- </li>
- <li><p>To change the characteristic value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
-<pre class="prettyprint">
-function writeSuccess(value)
-{
- console.log("Written");
-}
-
-function writeFail(error)
-{
- console.log("writeValue() failed: " + error);
-}
-
-if (!property.isWritable)
-{
- console.log("Property seems not to be writable. Attempting to write...");
-}
-var newValue = [82];
-
-property.writeValue(newValue, writeSuccess, writeFail);
-</pre>
- </li>
- </ol>
-
- <h2 id="Characterictic_Notification" name="Characterictic_Notification">Receiving Notifications on Characteristic Value Changes</h2>
-
- <p>Learning how to monitor a changes in a Bluetooth characteristic is a useful Bluetooth Low Energy management skill:</p>
- <ol>
-
- <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
- </li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
- </li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var property = gattService.characteristics[0];</pre>
- </li>
- <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the characteristic every time the value changes:</p>
-<pre class="prettyprint">
-function onValueChange(value)
-{
- console.log("Characteristic value is now: " + value);
-}
-</pre>
- </li>
-
- <li><p>Register a value change listener using the <span style="font-family: Courier New,Courier,monospace">addValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications):</p>
-<pre class="prettyprint">var watchId = property.addValueChangeListener(onValueChange);</pre></li>
-
- <li><p>When the notifications about the connection are no longer required, unregister the listener from the device by calling the <span style="font-family: Courier New,Courier,monospace">removeValueChangeListener()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface:</p>
-<pre class="prettyprint">property.removeValueChangeListener(watchId);</pre></li>
- </ol>
-
- <h2 id="Descriptor_Value" name="Descriptor_Value">Accessing the Bluetooth GATT Descriptor Value</h2>
-
- <p>Learning how to read and write a value of the Bluetooth descriptor is a useful Bluetooth Low Energy management skill:</p>
- <ol>
-
- <li><a href="#Connecting">Connect to a Bluetooth Low Energy device</a>.</li>
- <li><p>Retrieve a list of GATT service UUIDs from the <span style="font-family: Courier New,Courier,monospace">uuids</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothLEDevice">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothLEDevice">wearable</a> applications):</p>
-<pre class="prettyprint">var serviceUUIDs = remoteDevice.uuids;</pre>
- </li>
- <li><p>Select a GATT service and use the <span style="font-family: Courier New,Courier,monospace">getService()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothLEDevice</span> interface to retrieve an object representing the service. In this example, the first service is used:</p>
-<pre class="prettyprint">var gattService = remoteDevice.getService(serviceUUIDs[0]);</pre>
- </li>
- <li><p>Select an interesting characteristic from the <span style="font-family: Courier New,Courier,monospace">characteristics</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTService</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTService">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTService">wearable</a> applications). In this example, the first characteristic is used:</p>
-<pre class="prettyprint">var characteristic = gattService.characteristics[0];</pre></li>
- <li><p>Select an interesting descriptor from the <span style="font-family: Courier New,Courier,monospace">descriptors</span> attribute of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTCharacteristic</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTCharacteristic">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTCharacteristic">wearable</a> applications). In this example, the first descriptor is used:</p>
-<pre class="prettyprint">var descriptor = characteristic.descriptors[0];</pre>
- </li>
- <li><p>Define a callback implementing the <span style="font-family: Courier New,Courier,monospace">ReadValueSuccessCallback</span> callback (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#ReadValueSuccessCallback">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#ReadValueSuccessCallback">wearable</a> applications), which receives the value of the descriptor:</p>
-<pre class="prettyprint">
-function readSuccess(value)
-{
- console.log("Descriptor value: " + value);
-}
-
-function readFail(error)
-{
- console.log("readValue() failed: " + error);
-}
-</pre>
- </li>
- <li><p>To retrieve the GATT descriptor value, use the <span style="font-family: Courier New,Courier,monospace">readValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface (in <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/bluetooth.html#BluetoothGATTDescriptor">mobile</a> and <a href="../../../../../org.tizen.web.apireference/html/device_api/wearable/tizen/bluetooth.html#BluetoothGATTDescriptor">wearable</a> applications):</p>
-<pre class="prettyprint">
-descriptor.readValue(readSuccess, readFail);</pre>
- </li>
- <li><p>To change the descriptor value, define callbacks and use the <span style="font-family: Courier New,Courier,monospace">writeValue()</span> method of the <span style="font-family: Courier New,Courier,monospace">BluetoothGATTDescriptor</span> interface:</p>
-<pre class="prettyprint">
-function writeSuccess(value)
-{
- console.log("Written");
-}
-
-function writeFail(error)
-{
- console.log("writeValue() failed: " + error);
-}
-
-var newValue = [3];
-
-descriptor.writeValue(newValue, writeSuccess, writeFail);
-</pre>
- </li>
- </ol>
<script type="text/javascript" src="../../../scripts/jquery.zclip.min.js"></script>
<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="bluetooth_le_tutorial_w.htm">Bluetooth Low Energy: Managing a Bluetooth Low Energy Device</a> <p>Demonstrates how you can manage Bluetooth Low Energy devices and exchange data with peer devices.</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>
</script>
</body>
-</html>
+</html>
\ No newline at end of file
<div id="start-header" data-role="header" data-position="fixed">
<h1>Bluetooth chat</h1>
</div></pre></li>
- <li> <p>The actual content section of the screen is defined within a <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>. It contains buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications) for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
+ <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>. It contains buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_button.htm">wearable</a> applications) for turning on the Bluetooth connection and either creating or joining a server connection. The buttons displayed depend on whether the Bluetooth adapter is on.</p>
<pre class="prettyprint lang-html"> <!--Content section-->
<div id="start-content" data-role="content" data-scroll="none">
<div class="box">
<h3 id="server" name="server">Defining the Choose Your Server Screen</h3>
<ol class="tutorstep">
<li>templates/choose_page.tpl Source File
-<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>
+<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_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) of available servers.</p>
<pre class="prettyprint">
<div data-role="page" id="choose">
<!--Header section-->
</pre>
</li>
<li>
-<p>When the user taps a server name, the system starts searching for the server and attempts to connect to it. After connecting, the system displays confirmation pop-ups (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm">wearable</a> applications).</p>
+<p>When the user taps a server name, the system starts searching for the server and attempts to connect to it. After connecting, the system displays confirmation pop-ups (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">wearable</a> applications).</p>
<pre class="prettyprint">
$('#choose-content').on('tap', 'ul.ui-listview li', function()
{
<li>main_page.tpl Source File
<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>
-<p>The content section of the screen is added dynamically and displays a contact 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). The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) with a button for starting a new chat.</p>
+<p>The content section of the screen is added dynamically and displays a contact list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications). The footer section contains a tab bar with a button for starting a new chat.</p>
<pre class="prettyprint lang-html"><!--Header section-->
<div id="main-header" data-role="header" data-position="fixed">
<h1>Chatter</h1>
<h3 id="contact" name="contact">Defining the Select Contact Screen</h3>
<ol class="tutorstep">
<li>contactSelect.tpl Source File
- <p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications), a pop-up appears allowing the user to enter a phone number for a contact not on the list. The popup component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_popup.htm">wearable</a> applications) contains a form for number input.</p>
+ <p>The content section of the Select contact screen displays a contact list. If the user taps the <strong>Enter number</strong> button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_button.htm">wearable</a> applications), a pop-up appears allowing the user to enter a phone number for a contact not on the list. The popup component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Popup.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_popup.htm">wearable</a> applications) contains a form for number input.</p>
<pre class="prettyprint">
<!--Content section-->
<div data-role="content">
</pre>
</li>
<li>
-<p>If the default contact card is not defined, the content section of the screen displays a message and a button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications) allowing user to create the default card.</p>
+<p>If the default contact card is not defined, the content section of the screen displays a message and a button (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_button.htm">wearable</a> applications) allowing user to create the default card.</p>
<pre class="prettyprint">
<div class="box" id="temporaryBox">
<p class="defaultText">Default card is not defined yet!<br>Do you want to define it now?</p>
</ol>
<h3 id="selection" name="selection">Defining the Contacts List Screen</h3>
<ol class="tutorstep"><li>index.html Source File
- <p>The Contacts list screen displays an aggregated contact 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) sorted by name. The contacts are loaded from the device default address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API methods.</p>
+ <p>The Contacts list screen displays an aggregated contact list (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/
Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) sorted by name. The contacts are loaded from the device default address book using the <a href="../../../../../org.tizen.web.apireference/html/device_api/mobile/tizen/contact.html">Contact</a> API methods.</p>
<pre class="prettyprint">
<ul data-role="listview" id="list-choose">
<li class="ui-li-multiline">
<h3 id="foot" name="foot">Defining the Footer Controls</h3>
<ol class="tutorstep">
<li>main.tpl Source File
-<p>The footer 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;">footer</span>. The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) with a button for enabling the clipboard functionality in the application.</p>
+<p>The footer 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;">footer</span>. The footer section contains a tab bar with a button for enabling the clipboard functionality in the application.</p>
<p>The clipboard consists of buttons for deleting, moving, and copying folders and files, and also canceling the clipboard operation. In the clipboard mode, check boxes appear next to the folders and files list in the current directory on the main screen.</p>
<pre class="prettyprint lang-html"><div data-role="footer" data-position="fixed">
<h1>CALL LOG</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 main screen contains a list component (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) displaying the elements listed in the <span style="font-family: Courier New,Courier,monospace;">templates/callItemRow.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/dateRow.tpl</span> files. To display the search bar, the <span style="font-family: Courier New,Courier,monospace;">data-filter</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">true</span>.</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 main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/
Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the elements listed in the <span style="font-family: Courier New,Courier,monospace;">templates/callItemRow.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/dateRow.tpl</span> files. To display the search bar, the <span style="font-family: Courier New,Courier,monospace;">data-filter</span> attribute is set to <span style="font-family: Courier New,Courier,monospace;">true</span>.</p> <pre class="prettyprint lang-html"> <!--Content section-->
<div id="page-content-scroll">
<div id="page-content">
<ul data-role="listview" id="calllogList" data-filter="true"
<h1>Event manager</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 main screen contains a list component (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) displaying the elements as defined in the <span style="font-family: Courier New,Courier,monospace;">templates/event.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/all_day_event.tpl</span> files.</p>
+<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 main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the elements as defined in the <span style="font-family: Courier New,Courier,monospace;">templates/event.tpl</span> and <span style="font-family: Courier New,Courier,monospace;">templates/all_day_event.tpl</span> files.</p>
<pre class="prettyprint lang-html">
<!--Content section-->
<div data-role="content">
<ul data-role="listview" data-inset="true"></ul>
</div>
</div></pre></li>
-<li><p>The footer 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;">footer</span>. The footer section contains a tab bar (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">mobile</a> applications) with buttons for adding an event and closing the application.</p>
+<li><p>The footer 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;">footer</span>. The footer section contains a tab bar with buttons for adding an event and closing the application.</p>
<pre class="prettyprint lang-html"> <!--Footer section-->
<div data-role="footer" data-position="fixed">
<div data-role="tabbar" data-style="tabbar" >
</pre> </li></ol>
</li>
<li>templates/event.tpl Source File
-<p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/widgets/widget_button.htm">wearable</a> applications).</p>
+<p>Each event is displayed in the list showing a summary text, and a start and end date, and 2 buttons (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_button.htm">wearable</a> applications).</p>
<pre class="prettyprint lang-html">
<li class="event" data-eventid="%uid%">
<div class="ui-li-aside ui-li-desc">
</div>
</div>
</pre></li>
-<li> <p>The footer 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">footer</span>. The footer section contains a <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_TabBar.htm">tab bar</a> with buttons for switching between the animation modes of the game.</p>
+<li> <p>The footer 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">footer</span>. The footer section contains a tab bar with buttons for switching between the animation modes of the game.</p>
<pre class="prettyprint lang-html">
<!--Footer section-->
<div data-role="footer" data-position="fixed">
<h1>System information</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 main screen contains a list component (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) displaying the system properties.</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 main screen contains a list component (in <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/
Mobile_UIComponents/mobile_Listview.htm">mobile</a> or <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_list.htm">wearable</a> applications) displaying the system properties.</p> <pre class="prettyprint lang-html"> <!--Content section-->
<div data-role="content">
<ul data-role="listview">
<li id="storage-info">Storage</li>
</ul>
<p>In addition to the Tizen Web Device API tutorials above, you can implement the following features:</p>
-<ul>
- <li><a href="uifw/uifw_tutorial_w.htm">Web UI Framework (UIFW): Creating UI Components</a>
- <p>Demonstrates how you can create and manage various kinds of UI components.</p></li>
+<ul>
<li><a href="service/service_tutorial_w.htm">Service Application: Creating a Service Application</a> <span style="color: red">in wearable applications only</span> <p>Demonstrates how you can create a wearable Web service application.</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>Web UI Framework (UIFW): Creating UI Components
-</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="#intro">Creating a Simple Application</a></li>
- <li><a href="#application_visual_layout">Managing Pages</a></li>
- <li><a href="#basic_page_routing">Managing Page Routing</a></li>
- <li><a href="#introduction_to_widgets">Managing UI Components</a></li>
- <li><a href="#notes">Creating a Notepad Application</a></li>
- </ul>
- <p class="toc-title">Related Info</p>
- <ul class="toc">
- <li><a href="../../../../../org.tizen.guides/html/web/tizen/uifw/uifw_guide_w.htm">Web UI Framework (UIFW) Guide</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/index.htm">Tizen Web UI Framework API for Mobile Web</a></li>
- <li><a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/wearable/index.htm">Tizen Web UI Framework API for Wearable Web</a></li>
- </ul>
- </div></div>
-</div>
-
-<div id="container"><div id="contents"><div class="content">
-<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 href="#intro">Creating a Simple Application</a>
- <p>Create an application with a header and a footer button.</p></li>
- <li><a href="#application_visual_layout">Managing Pages</a>
- <p>Use pages to organize your application screens.</p></li>
- <li><a href="#basic_page_routing">Managing Page Routing</a>
- <p>Change between multiple application pages.</p></li>
- <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 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>
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>Some of the functionality shown in the use cases may not work properly in a desktop browser. To fully get the TAU experience, use a real Tizen device or the Emulator from the Tizen SDK.</p>
-</td>
- </tr>
- </tbody>
- </table>
-
- <h2 id="intro" name="intro">Creating a Simple Application</h2>
-
-<p>To create a simple application in a Web browser:</p>
-<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>
- <div class="ui-content">Hello world</div>
- <div class="ui-footer">
- <button id="closeBtn" class="ui-btn">Close</button>
- </div>
-
- <script>
- var closeBtn = document.getElementById("closeBtn");
- closeBtn.addEventListener("click", function ()
- {
- window.history.back();
- });
- </script>
-</div>
-</pre>
-</li>
-<li><p>To create a similar mobile application:</p>
-<pre class="prettyprint"><div data-role="page">
- <div data-role="header">MyApplication</div>
- <div data-role="content">Hello world</div>
- <div data-role="footer">
- <button data-role="button">Close</button>
- </div>
-</div>
-</pre>
-</li>
-</ul>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
- </tr>
- </tbody>
- </table>
-
-<p>For more information on the standalone Web application concept, see <a href="#application_visual_layout">Managing Pages</a>.</p>
-
- <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>
- <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>Contains the main application content. The content area has an optional scroll bar.</p></li>
- <li>Footer area
- <p>Contains a status line or buttons. The footer is optional.</p></li>
-</ul>
-<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 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>
-</pre>
-<p>TAU creates it and moves the content to it:</p>
-<pre class="prettyprint"><div class="ui-page">
- Simple page
-</div>
-</pre>
-
-<p>To create a page on your own, use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute with the <span style="font-family: Courier New,Courier,monospace">ui-page</span> value for wearable applications. TAU uses that information to properly acquire the <span style="font-family: Courier New,Courier,monospace">div</span> element and bind the DOM element to its JavaScript widget implementation.</p>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
- </tr>
- </tbody>
- </table>
-
-<p>To create a page:</p>
-<ol>
-<li><p>Create a header area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-header"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-header">This is a header</div>
-</div>
-</pre></li>
-<li><p>Create a footer area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-footer"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-footer">This is a footer</div>
-</div>
-</pre></li>
-
-<li><p>Create the main content area by using the <span style="font-family: Courier New,Courier,monospace">class="ui-content"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-header">MyApplication header</div>
- <div class="ui-content">
- Hello world!
- </div>
- <div class="ui-footer">Application status line</div>
-</div>
-</pre></li>
-<li><p>The previous example shows a full page structure. The header and footer areas can contain multiple UI components, such as buttons or images.</p>
-<p>The following example shows a title bar with a <strong>More Options</strong> button and an icon:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-header">
- <h2 class="ui-title ui-icon" style="background-image: url(image.png);">Title</h2>
- <button type="button" class="ui-more ui-icon-overflow">More Options</button>
- </div>
- <div class="ui-content">MyApplication content</div>
-</div>
-</pre>
-</li>
-<li>
-<p>You can also create a popup for your page:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-header">Popup Open Page</div>
- <div class="ui-content">
- <a href="#popup" class="ui-btn" data-rel="popup">Popup Open</a>
- </div>
-
- <div id="popup" class="ui-popup">
- <div class="ui-popup-header">Popup Page</div>
- <div class="ui-popup-content">Popup Content</div>
- </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 href="#basic_page_routing">Managing Page Routing</a>.</p>
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>Not all profiles contain same UI components, for example, the popup component is only implemented in wearable applications.</p></td>
- </tr>
- </tbody>
- </table>
- </li>
-</ol>
-
- <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>
-<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-->
-<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-->
-<div class="ui-page" id="two">
- <div class="ui-content">
- <a href="pageOne.html">Go to page one</a>
- </div>
-</div>
-</pre>
-
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
- </tr>
- </tbody>
- </table>
- </li>
-
-<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-->
-<div class="ui-page ui-page-active" id="first">
- <div class="ui-content">
- You are viewing the first page of the example.
- <button id="first-button">Click here to change to page two</button>
- </div>
- <script>
- var el1 = document.getElementById("first-button");
- el1.addEventListener("click", function ()
- {
- tau.changePage("pageTwo.html");
- });
- </script>
-</div>
-
-<!--pageTwo.html-->
-<div class="ui-page" id="second">
- <div class="ui-content">
- This is the second page of the example.
- <button id="second-button">Click here to change to page one</button>
- </div>
- <script>
- var el2 = document.getElementById("second-button");
- el2.addEventListener("click", function ()
- {
- tau.changePage("pageOne.html");
- });
- </script>
-</div>
-</pre>
-</li>
-
-<li id="external-resources">To load pages from external resources:
-<p>When an external page is supplied to the routing engine, TAU fetches that page and appends it to the current document, while changing the <span style="font-family: Courier New,Courier,monospace">base</span> element's <span style="font-family: Courier New,Courier,monospace">href</span> attribute to that page path. This ensures that all other resources, such as CSS, JS, or images, are loaded from the correct path without no real page reloads. Instead, TAU simply switches the current page to the new page.</p>
-<p>To load pages from external resources, define the proper local address in the <span style="font-family: Courier New,Courier,monospace">href</span> attribute of the link:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-content">
- <a href="external_text.html">Change to external</a>
- </div>
-</div>
-</pre>
-<p>To create an external link that is not supposed to be handled by the TAU router, use the <span style="font-family: Courier New,Courier,monospace">rel="external"</span>, <span style="font-family: Courier New,Courier,monospace">data-ajax="false"</span>, or <span style="font-family: Courier New,Courier,monospace">target="_self"</span> attribute:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div class="ui-content">
- <a href="external_text.html" target="_self">Change to external</a>
- </div>
-</div>
-</pre>
-</li>
-</ul>
-
- <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>
- <li>Is a graphical element.</li>
- <li>Displays data and modifies other elements.</li>
- <li>Allows data modification.</li>
- <li>Offers easy development.</li>
-</ul>
-
-<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>
- <li>Performance</li>
- <li>Pre-building</li>
- <li>Easy to use API</li>
- <li>Compatibility with jQuery Mobile</li>
- <li>Look and feel</li>
-</ul>
-
-<p>A basic UI component implements 5 protected methods:</p>
-<ul>
- <li><span style="font-family: Courier New,Courier,monospace">build</span> is responsible for the UI component creation.
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>The <span style="font-family: Courier New,Courier,monospace">build</span> method is not executed every time the UI component is created, and it does not run when the markup is already built.</p></td>
- </tr>
- </tbody>
- </table></li>
- <li><span style="font-family: Courier New,Courier,monospace">configure</span> is expected to configure all the options for the UI component.</li>
- <li><span style="font-family: Courier New,Courier,monospace">init</span> handles the initialization, like searching for UI component sub-elements.</li>
- <li><span style="font-family: Courier New,Courier,monospace">bindEvents</span> handles all event binding (from user interaction).</li>
- <li><span style="font-family: Courier New,Courier,monospace">destroy</span> removes all listeners, and cleans up after the UI component.</li>
-</ul>
-
-<p>The UI component is registered in the core engine by the <span style="font-family: Courier New,Courier,monospace">tau.engine.defineWidget</span> method, with its name, selector, and public methods list for jQuery Mobile compatibility (as needed).</p>
-<p>A given document element can have multiple UI components created from it, which really means that one element is 2 or more UI components at the same time. This behavior prevents much of the code duplication and can be used to create UI components which are complementary, such as input with a drop-down list.</p>
-
-<p>To create UI components:</p>
-<ol>
-<li id="basic-usage">Create a basic UI component.
-<p>A UI component can be created through multiple ways, the first and recommended one is to create a specific markup which conforms to the UI component selector. For example, to create a <span style="font-family: Courier New,Courier,monospace">Button</span> UI component:</p>
-<pre class="prettyprint"><button type="myButton" class="ui-btn">This is a button</button>
-</pre>
-<p>The above code causes TAU to create a <span style="font-family: Courier New,Courier,monospace">Button</span>, because the <span style="font-family: Courier New,Courier,monospace">ui-btn</span> class matches the UI component's selector. Some UI components have multiple selectors:</p>
-<pre class="prettyprint">><a href="#hashtag" class="ui-btn">Button</a>
-</pre>
-<p>The above code also creates a button, since the <span style="font-family: Courier New,Courier,monospace">ui-btn</span> class is matches the <span style="font-family: Courier New,Courier,monospace">Button</span> UI component selector.</p>
-
-<p>UI components can also be created on ambiguous elements, that do not match specific selectors, using JavaScript code:</p>
-<pre class="prettyprint"><div class="ui-page">
- <div id="IndexScrollbar"></div>
- <script>
- var element = document.getElementById("IndexScrollbar");
- tau.widget.IndexScrollbar(element);
- </script>
-</div>
-</pre>
-
-
-<table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note"><p>Creating UI components dynamically from JavaScript code is not recommended as this prevents pre-building the markup.</p></td>
- </tr>
- </tbody>
- </table>
-
- </li>
-
-<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><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
-<span style="font-family: Courier New,Courier,monospace">tau.widget</span> UI component method:</p>
-
-<pre class="prettyprint"><div class="ui-page">
- <div id="IndexScrollbar"></div>
- <script>
- var element = document.getElementById("IndexScrollbar");
- tau.widget.IndexScrollbar(element,
- {
- index: "A,B,C,D"
- });
- </script>
-</div>
-</pre></li></ul>
-</li>
-
-<li id="fetching-data-and-modifying-behaviour">Fetch data and modify behavior.
-<p>You want to be able to fetch and store information in a UI component, not just modify its look and feel. For this purpose, all UI components expose their API, with only one rule: protected methods (marked with <span style="font-family: Courier New,Courier,monospace">"_"</span> underscore) must not be run directly.</p>
-<p>Some methods are getters and setters, and some modify the UI component behavior. For example, the <span style="font-family: Courier New,Courier,monospace">value</span> method is a setter method:</p>
-<pre class="prettyprint"><input type="checkbox" checked />
-<script>
- document.addEventListener("pageshow", function ()
- {
- var inputElement = document.querySelector("input"),
- input = tau.engine.instanceWidget(inputElement, "Checkboxradio");
- window.setTimeout(function ()
- {
- input.value(false); /* Toggle checkbox */
- }, 2500);
- });
-</script>
-</pre>
-</li>
-</ol>
-
- <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>
-
-<p>To create a simple notepad application using the TAU library:</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 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><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>
-</li></ul>
-<p>Add also your own styles for the application:</p>
-<pre class="prettyprint"><link rel="stylesheet" type="text/css" href="css/style.css"/>
-</pre>
-
-<p>The following example shows how the section header looks after editing:</p>
-<pre class="prettyprint">
-<head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
- <meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
-
- <title>Notepad</title>
-
- <!--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 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">
- <h1>Notes</h1>
- </header>
-</div>
-</pre></li>
-<li>Add content for the main page by adding a <span style="font-family: Courier New,Courier,monospace">div</span> element with
-the <span style="font-family: Courier New,Courier,monospace">_ui-content</span> class. Add to this a <span style="font-family: Courier New,Courier,monospace">ul</span> element, which creates the list of notes.
-<p>Set the <span style="font-family: Courier New,Courier,monospace">data-scroll="y"</span> and <span style="font-family: Courier New,Courier,monospace">data-handler="true"</span> attributes.</p>
-<p>The item in the list is represented as a <span style="font-family: Courier New,Courier,monospace">li</span> element. When a note on the main page is clicked, the application triggers the <span style="font-family: Courier New,Courier,monospace">changepage</span> event to the <span style="font-family: Courier New,Courier,monospace">editor</span> page and shows the item.</p>
-<pre class="prettyprint">
-<div class="ui-content" data-scroll="y" data-handler="true">
- <ul class="ui-listview" id="notesList"></ul>
-</div>
-</pre></li>
-<li>Add a navigation button to the application to change to the editor page. The button is placed in the footer, and it is created from an <span style="font-family: Courier New,Courier,monospace">a</span> element,
-which has the <span style="font-family: Courier New,Courier,monospace">id="newBtn"</span> attribute.
-<pre class="prettyprint">
-<div class="ui-footer">
- <a href="javascript:void()" id="newBtn">New note</a>
-</div>
-</pre></li></ol>
-<p>The above examples apply to a wearable application. The following example shows the full code for the main page in a mobile application:</p>
-<pre class="prettyprint">
-<div class="ui-page" id="main">
- <div class"ui-header" data-position="fixed">
- <h1>Notes</h1>
- </div>
- <div class="ui-content" data-scroll="y" data-handler="true">
- <ul class="ui-listview" id="notesList"></ul>
- </div>
- <div class="ui-footer">
- <a href="javascript:void()" id="newBtn">New note</a>
- </div>
-</div>
-</pre>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">In mobile applications, pages are constructed using the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute, while the wearable applications use the <span style="font-family: Courier New,Courier,monospace">class</span> attribute. In addition, the value of the <span style="font-family: Courier New,Courier,monospace">data-role</span> attribute in mobile applications differs from the <span style="font-family: Courier New,Courier,monospace">class</span> attribute value in the wearable applications.</td>
- </tr>
- </tbody>
- </table>
-
-</li>
-<li>On the editing page, the header and footer are similar to main page. The only difference is that the
-action triggered after pressing the button adds an item to the items array and adds the item to the top of the visible list. The editing page is defined with a <span style="font-family: Courier New,Courier,monospace">div</span> block with
-the <span style="font-family: Courier New,Courier,monospace">id="editor"</span> and <span style="font-family: Courier New,Courier,monospace">class="ui-page"</span> attributes.
-<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-->
-<div class="ui-page" id="editor">
- <div class="ui-header">
- <h1>Editor</h1>
- </div>
- <div class="ui-content">
- <textarea id="editorField" placeholder="enter note"></textarea>
- </div>
- <div class="ui-footer">
- <a href="javascript:void()" id="saveBtn">Save</a>
- </div>
-</div>
-</pre></li></ol></li>
-
-<li>Link to the TAU library sources and add the script to the application:
-<pre class="prettyprint">
-<script src="js/jquery.js"></script>
-<script type="text/javascript" src="js/lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
-<script src="js/main.js"></script>
-</pre>
-
-<p>The <span style="font-family: Courier New,Courier,monospace">index.html</span> file is now ready.</p>
-</li>
-
-<li>Add styles for the content:
-<pre class="prettyprint">
-a
-{
- color: #FFF;
-}
-
-#notesList.ui-listview
-{
- width: 100%;
-}
-
-#notesList.ui-listview li
-{
- margin: 0;
- white-space: nowrap;
-}
-
-#notesList.ui-listview li .ui-inline
-{
- position: absolute;
- right: 5px;
- top: 5px;
-}
-
-#notesList.ui-listview li .ui-swipe-item-cover-inner
-{
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-#editor .ui-scrollview-view
-{
- height: 100%;
-}
-
-#editor textarea
-{
- height: 95%;
- width: 100%;
-}
-</pre></li>
-
-<li>Create the <span style="font-family: Courier New,Courier,monospace">main.js</span> file and create a function to close the application:
-<pre class="prettyprint">
-<script>
- (function ()
- {
- 'use strict';
-
- var newBtn = document.getElementById('newBtn'),
- saveBtn = document.getElementById('saveBtn'),
- editorField = document.getElementById('editorField'),
- notesList = document.getElementById('notesList'),
- editorPage = document.getElementById('editor'),
-
- mainPageId = '#main',
- editorPageId = '#editor',
-
- currentIndex = null,
-
- EMPTY_CONTENT = '(empty)',
- STORAGE_KEY = 'notepad';
-
- /**
- * Get data from local storage
- * @return {Array}
- */
- function getStorage(key)
- {
- return JSON.parse(window.localStorage.getItem(key)) || false;
- }
-
- /**
- * Add data to local storage
- * @param {Array} data
- */
- function addStorage(data)
- {
- window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
- }
-
- /**
- * Return current page ID
- * @returns
- */
- function getCurrentPageId()
- {
- return $('[data-role="page"]:visible')[0].id;
- }
-
- /* Refresh current page */
- function refreshCurrentPage()
- {
- $('#' + getCurrentPageId()).trigger('create');
- }
-
- /**
- * Get notes from storage
- * @return {Array}
- */
- function getNotes()
- {
- return getStorage(STORAGE_KEY) || [];
- }
-
- /* Clear list with notes */
- function clearNotesList()
- {
- notesList.innerHTML = '';
- }
-
- /* Delete note from storage */
- function deleteNote(index)
- {
- var notes = getNotes();
-
- if (notes[index] !== undefined)
- {
- notes.splice(index, 1);
- addStorage(notes);
- }
- else
- {
- console.error('deleteNote: note not found');
- }
-
- showNotes();
- refreshCurrentPage();
- event.stopPropagation();
- }
-
- /**
- * Edit note using array index
- * @param index
- */
- function editNote(index)
- {
- var notes = getNotes();
-
- if (notes[index] !== undefined)
- {
- currentIndex = index;
- editorField.value = getNotes()[index];
- tau.changePage(editorPageId);
- }
- else
- {
- console.error('editNote: note not found');
- showNotes();
- refreshCurrentPage();
- }
- }
-
- /* Show all notes extracted from local storage */
- function showNotes()
- {
- var notes = getNotes(),
- notesLen = notes.length,
- li = {},
- swipeCover = {},
- swipeItem = {},
- deleteBtn = {},
- i = 0,
- notesListInst;
-
- clearNotesList();
-
- for (i; i < notesLen; i += 1)
- {
- li = document.createElement('li');
- li.addEventListener('click', editNote.bind(this, i), false);
-
- deleteBtn = document.createElement('div');
- deleteBtn.setAttribute('data-role', 'button');
- deleteBtn.setAttribute('data-inline', 'true');
- deleteBtn.innerText = 'Delete';
-
- deleteBtn.addEventListener('click', deleteNote.bind(this, i), false);
-
- li.innerText = notes[i].replace(/\n/g, ' ') || EMPTY_CONTENT;
- li.appendChild(deleteBtn);
- notesList.appendChild(li);
- notesListInst = tau.widget.getInstance(notesList);
- tau.widget.Button(deleteBtn);
- notesListInst.refresh();
- }
- }
-
- /* Clear editor textarea */
- function clearEditor()
- {
- editorField.value = '';
- }
-
- /* Save note to storage */
- function saveNote()
- {
- var notes = getNotes();
-
- if (currentIndex !== null)
- {
- notes[currentIndex] = editorField.value;
- }
- else
- {
- notes.push(editorField.value);
- }
-
- addStorage(notes);
-
- clearEditor();
- showNotes();
- tau.changePage(mainPageId);
- }
-
- /* New note button handler */
- function newNote()
- {
- currentIndex = null;
- clearEditor();
-
- tau.changePage(editorPageId);
- }
-
- /* On editor page show handler */
- function onEditorPageShow()
- {
- editorField.focus();
- }
-
- /* Attach events */
- function events()
- {
- newBtn.addEventListener('click', newNote);
- saveBtn.addEventListener('click', saveNote);
-
- editorPage.addEventListener('pageshow', onEditorPageShow);
-
- $(window).on('tizenhwkey', function (e)
- {
- if (e.originalEvent.keyName === "back"
- && window.tizen
- && window.tizen.application)
- {
- switch (getCurrentPageId())
- {
- case 'main':
- window.tizen.application.getCurrentApplication().exit();
- break;
- default:
- window.history.back();
- break;
- }
- return false;
- }
- });
- }
-
- /* Initialize */
- function init()
- {
- showNotes();
- events();
- }
-
- init();
- }());
-</script>
-</pre>
-<p>Now the application is ready and you can deploy it to a device or Emulator.</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>
<ol class="tutorstep">
<li>index.html Source File
-<p>The main screen displays a <a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <span style="font-family: Courier New,Courier,monospace;"><input></span> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/mobile/ns_widget_mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
+<p>The main screen displays a <a href="../../../../../org.tizen.guides/html/web/w3c/graphics/canvas_w.htm">Canvas</a> element, and a description area. The description area defines a color picker and a slider as <span style="font-family: Courier New,Courier,monospace;"><input></span> elements to allow the user can select the color and line width of their strokes. A <a href="../../../../../org.tizen.web.apireference/html/ui_fw_api/Mobile_UIComponents/mobile_Button.htm">button</a> is also defined to allow the user to clear the canvas.</p>
<pre class="prettyprint lang-html">
<body>
<h2>Touch paint</h2>
</table>
<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">
+<pre class="prettyprint lang-html">
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}
</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:
-<pre class="prettyprint">.accordion > li > div
+<pre class="prettyprint lang-html">.accordion > li > div
{
padding: 0 15px;
</li>
</ul>
- <h2 id="modify" name="modify">Modifying Element Properties</h2>
+<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>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>
<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 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/bluetooth_le_tutorial_w.htm" label="Bluetooth Low Energy"></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/social/contact_tutorial_w.htm" label="Contact"></topic>
<topic href="html/web/tizen/social/data_sync_tutorial_w.htm" label="Data Synchronization"></topic>
</topic>
- <topic href="html/web/tizen/uifw/uifw_tutorial_w.htm" label="Web UIFW"></topic>
<topic href="html/web/tizen/service/service_tutorial_w.htm" label="Service Application"></topic>
</topic>
<topic href="html/web/w3c/tutorials_w3c_w.htm" label="W3C/HTML5/Supplementary Features">
</topic>
<topic href="html/native/tutorials_n.htm" label="Native Application">
+ <topic href="html/native/account/account_tutorials_n.htm" label="Account">
+ <topic href="html/native/account/oauth2_tutorial_n.htm" label="oauth2"></topic>
+ <topic href="html/native/account/sync_manager_tutorial_n.htm" label="Sync Manager"></topic>
+ </topic>
<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/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 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/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/media_vision_tutorial_n.htm" label="Media Vision"></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/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/service_adaptor_tutorial_n.htm" label="Service Adaptor"></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 href="html/native/system/sysinfo_tutorial_n.htm" label="System Information"></topic>
<topic href="html/native/system/system_setting_tutorial_n.htm" label="System Settings"></topic>
<topic href="html/native/system/storage_tutorial_n.htm" label="Storage"></topic>
+ <topic href="html/native/system/t-trace_tutorial_n.htm" label="T-trace"></topic>
</topic>
<topic href="html/native/telephony/telephony_tutorials_n.htm" label="Telephony">
+ <topic href="html/native/telephony/phonenumber_util_tutorial_n.htm" label="Phonenumber utils"></topic>
+ <topic href="html/native/telephony/telephony_info_tutorial_n.htm" label="Telephony Information"></topic>
</topic>
<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/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 href="html/native/ui/eom_tutorial_n.htm" label="External Output Manager"></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 href="html/native/uix/voicecontrol_tutorials_n.htm" label="Voice Control">
+ <topic href="html/native/uix/voicecontrol_tutorial_n.htm" label="Voice control"></topic>
+ <topic href="html/native/uix/voicecontrol_elm_tutorial_n.htm" label="Voice control elementary"></topic>
+ </topic>
+ <topic href="html/native/uix/ime_tutorial_n.htm" label="Input Method"></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 href="html/native/web/web_tutorials_n.htm" label="Web"></topic>
</topic>
</toc>
projects / sdk / online-doc.git / commitdiff
