LB reviewed and updated

Signed-off-by: Donghyun Lee <dh0922.lee@samsung.com>

diff --git a/org.tizen.devtools/html/common_tools/emulator.htm b/org.tizen.devtools/html/common_tools/emulator.htm
index 90031a1..c31125f 100644 (file)
--- a/org.tizen.devtools/html/common_tools/emulator.htm
+++ b/org.tizen.devtools/html/common_tools/emulator.htm
@@ -249,7 +249,7 @@
 \r
 <p>You can create, modify, delete, and list your VMs through the command line interface commands. The CLI binary is located in:</p>\r
        <ul>\r
-               <li>In Linux:\r
+               <li>In Ubuntu:\r
                <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/em-cli</span></p></li>\r
                <li>In Windows&reg;:\r
                <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\em-cli.bat</span></p></li>\r
@@ -272,7 +272,7 @@
 <p>To use HW virtualization, you need:</p>\r
 \r
 <ul>\r
-<li>In Linux:\r
+<li>In Ubuntu:\r
 <p>To use KVM, you need a processor that supports HW virtualization. Both Intel and AMD have developed those extensions for their processors (Intel VT-x/AMD-V). Check whether the CPU supports HW virtualization with the following command:</p> \r
 <pre class="prettyprint">\r
 $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>\r
@@ -293,7 +293,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
 <p>To install KVM or HAX:</p>\r
 \r
 <ul>\r
-<li>In Linux:\r
+<li>In Ubuntu:\r
 <p>No installation is required for KVM.</p> \r
 </li>\r
 <li>In Windows&reg; and Mac OS&reg; X:\r
@@ -317,7 +317,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
 \r
 <h3 id="run" name="run">Running the Emulator</h3>\r
 <p>To run the Emulator with HW virtualization support in the Emulator Manager, set the <strong>CPU VT</strong> field to <strong>ON</strong>. The field is disabled if your system cannot support HW virtualization.</p>\r
-<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Linux) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>\r
+<p>You can also run the Emulator with HW virtualization support from the command line, by including the <span style="font-family: Courier New,Courier,monospace">-enable-kvm</span> (in Ubuntu) or <span style="font-family: Courier New,Courier,monospace">-enable-hax</span> (in Windows&reg; and Mac OS&reg; X) option in the start-up command.</p>\r
 \r
 \r
 <h2 id="controls" name="controls">Emulator Control Keys and Menu</h2>\r
@@ -735,7 +735,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
 \r
 <p>You can control and monitor the Tizen Emulator by using ECP CLI instead of the ECP UI tool. The ECP CLI supports all the functionalities of the ECP UI. The CLI binary is located at:</p>\r
        <ul>\r
-               <li>In Linux:\r
+               <li>In Ubuntu:\r
                <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;/tools/emulator/bin/ecp-cli</span></p></li>\r
                <li>In Windows&reg;:\r
                <p><span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK&gt;\tools\emulator\bin\ecp-cli.bat</span></p></li>\r
@@ -749,7 +749,7 @@ $egrep -c &#39;(vmx|svm)&#39; /proc/cpuinfo</pre>
 <p class="figure">Figure: Session and shell modes</p> \r
 <p align="center"><img alt="Session and shell modes" src="../images/ecp_cli_modes.png" /></p>\r
 \r
-<p>In Linux, the bash-based auto-completion is used with the TAB button.</p>\r
+<p>In Ubuntu, the bash-based auto-completion is used with the TAB button.</p>\r
 \r
 <p>The following tables list the supported commands of the ECP CLI.</p>\r
 \r

diff --git a/org.tizen.devtools/html/common_tools/emulator_features.htm b/org.tizen.devtools/html/common_tools/emulator_features.htm
index 0afc6e9..8f1eee7 100644 (file)
--- a/org.tizen.devtools/html/common_tools/emulator_features.htm
+++ b/org.tizen.devtools/html/common_tools/emulator_features.htm
@@ -421,7 +421,7 @@ resolution.height=800
 
 <p>When connecting through USB, ADB is required to make a connection. If you have already installed Android SDK on the PC, ADB is located at a <span style="font-family: Courier New,Courier,monospace;">&lt;installed Android SDK&gt;/sdk/platform-tools</span> directory. Otherwise, you can download only ADB or install Android SDK.</p>
 <p>To install ADB:</p>
-       <ol><li><p>Linux/Mac OS&reg; X: Download ADB and then install it in the <span style="font-family: Courier New,Courier,monospace;">/usr/bin</span> directory.</p>
+       <ol><li><p>Ubuntu/Mac OS&reg; X: Download ADB and then install it in the <span style="font-family: Courier New,Courier,monospace;">/usr/bin</span> directory.</p>
        <p>For more information, see <a href="http://code.google.com/p/adb-fastboot-install/" target="_blank">http://code.google.com/p/adb-fastboot-install/</a>.</p></li>
        <li><p>Download ADB and install it in the <span style="font-family: Courier New,Courier,monospace;">C:\ADB</span> directory.</p>
        <p>For more information, see <a href="http://rubenalamina.mx/custom-installers/android-adb-fastboot/" target="_blank">http://rubenalamina.mx/custom-installers/android-adb-fastboot/</a>.</p></li></ol>

diff --git a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
index 789b0bd..4929e32 100644 (file)
--- a/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
+++ b/org.tizen.devtools/html/common_tools/keyboard_shortcuts.htm
@@ -45,8 +45,8 @@
 \r
 <p>The following symbols are used to define the supported operating system for each shortcut:</p> \r
 <ul>\r
-<li><p><img alt="windows" src="../images/windows.png" />: Windows&reg;</p></li>\r
 <li><p><img alt="ubuntu" src="../images/ubuntu.png" />: Ubuntu</p></li>\r
+<li><p><img alt="windows" src="../images/windows.png" />: Windows&reg;</p></li>\r
 <li><p><img alt="mac" src="../images/mac.png" />: Mac OS&reg;</p></li>\r
 </ul>\r
 \r
@@ -65,22 +65,22 @@
        </tr>\r
        <tr>\r
                <td>Delete</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Delete</td>\r
        </tr>\r
        <tr>\r
                <td>Rename</td>\r
-               <td><img alt="windows_symbol" src="../images/windows.png" /><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F2</td>\r
        </tr>\r
        <tr>\r
                <td>Refresh</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F5</td>\r
        </tr>\r
        <tr>\r
                <td>Property</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Alt+Enter</td>\r
        </tr>\r
 </tbody>\r
@@ -99,7 +99,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Build all</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+B</td>\r
        </tr>\r
        <tr>\r
@@ -108,22 +108,22 @@
        </tr>\r
        <tr>\r
                <td>Make target build</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Shift+F9</td>\r
        </tr>\r
        <tr>\r
                <td>Rebuild last target</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F9</td>\r
        </tr>\r
        <tr>\r
                <td>Build project</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F10</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Run last launched</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+F11</td>\r
        </tr>\r
        <tr>\r
@@ -146,27 +146,27 @@
        </tr>\r
        <tr>\r
                <td>Step into</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F5</td>\r
        </tr>\r
        <tr>\r
                <td>Step over</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F6</td>\r
        </tr>\r
        <tr>\r
                <td>Step return</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F7</td>\r
        </tr>\r
        <tr>\r
                <td>Resume</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F8</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Debug</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+F11</td>\r
        </tr>\r
        <tr>\r
@@ -175,12 +175,12 @@
        </tr>\r
        <tr>\r
                <td>Debug last launched</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F11</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Toggle breakpoint</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+B</td>\r
        </tr>\r
        <tr>\r
@@ -203,7 +203,7 @@
        </tr>\r
        <tr>\r
                <td>Content assist</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Ctrl+Space</td>\r
        </tr>\r
 </tbody>\r
@@ -222,7 +222,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">New project and file using the Wizard</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+N</td>\r
        </tr>\r
        <tr>\r
@@ -231,7 +231,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">New project and file</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Alt+N</td>\r
        </tr>\r
        <tr>\r
@@ -240,7 +240,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Open resource</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+R</td>\r
        </tr>\r
        <tr>\r
@@ -249,12 +249,12 @@
        </tr>\r
        <tr>\r
                <td>Properties</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Alt+Enter</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Save</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+S</td>\r
        </tr>\r
        <tr>\r
@@ -263,7 +263,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Save all</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+S</td>\r
        </tr>\r
        <tr>\r
@@ -272,7 +272,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Close</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+W</td>\r
        </tr>\r
        <tr>\r
@@ -281,7 +281,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Close all</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+W</td>\r
        </tr>\r
        <tr>\r
@@ -290,12 +290,12 @@
        </tr>\r
        <tr>\r
                <td>Refresh</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F5</td>\r
        </tr>\r
        <tr>\r
                <td>Rename</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F2</td>\r
        </tr>\r
 </tbody>\r
@@ -314,7 +314,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Find and replace</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+F</td>\r
        </tr>\r
        <tr>\r
@@ -323,7 +323,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Quick fix</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+1</td>\r
        </tr>\r
        <tr>\r
@@ -332,7 +332,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Redo</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Z</td>\r
        </tr>\r
        <tr>\r
@@ -341,7 +341,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Undo</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Z</td>\r
        </tr>\r
        <tr>\r
@@ -350,7 +350,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Go to line</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+L</td>\r
        </tr>\r
        <tr>\r
@@ -359,7 +359,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Delete line</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+D</td>\r
        </tr>\r
        <tr>\r
@@ -368,7 +368,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Go to matching bracket</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+P</td>\r
        </tr>\r
        <tr>\r
@@ -377,32 +377,32 @@
        </tr>\r
        <tr>\r
                <td>Move lines down</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Alt+<img alt="arrow_down" src="../images/arrow_down.png" /></td>\r
        </tr>\r
        <tr>\r
                <td>Move lines up</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Alt+<img alt="arrow_up" src="../images/arrow_up.png" /></td>\r
        </tr>\r
        <tr>\r
                <td>Show tooltip</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F2</td>\r
        </tr>\r
        <tr>\r
                <td>Open declaration</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F3</td>\r
        </tr>\r
        <tr>\r
                <td>Open type hierarchy</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F4</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Open type</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+T</td>\r
        </tr>\r
        <tr>\r
@@ -411,7 +411,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">To lower case</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+Y</td>\r
        </tr>\r
        <tr>\r
@@ -420,7 +420,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">To upper case</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+Z</td>\r
        </tr>\r
        <tr>\r
@@ -429,7 +429,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Correct indentation</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+I</td>\r
        </tr>\r
        <tr>\r
@@ -438,7 +438,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Format</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+F</td>\r
        </tr>\r
        <tr>\r
@@ -447,7 +447,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Add/remove comment</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+/</td>\r
        </tr>\r
        <tr>\r
@@ -456,7 +456,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Add/remove block comment</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+/</td>\r
        </tr>\r
        <tr>\r
@@ -479,7 +479,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Rename-refactoring</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+R</td>\r
        </tr>\r
        <tr>\r
@@ -488,7 +488,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Move-refactoring</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+V</td>\r
        </tr>\r
        <tr>\r
@@ -497,7 +497,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Change method signature</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+C</td>\r
        </tr>\r
        <tr>\r
@@ -506,7 +506,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Extract method</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+M</td>\r
        </tr>\r
        <tr>\r
@@ -515,7 +515,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Extract local variable</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+L</td>\r
        </tr>\r
        <tr>\r
@@ -538,7 +538,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Insert snippet</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+I</td>\r
        </tr>\r
        <tr>\r
@@ -548,7 +548,7 @@
        </tr>   \r
        <tr>\r
                <td rowspan="2">New launch configuration</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+F12</td>\r
        </tr>\r
        <tr>\r
@@ -557,7 +557,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Forward launch history</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+[</td>\r
        </tr>\r
        <tr>\r
@@ -566,7 +566,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Backward launch history</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Alt+Shift+]</td>\r
        </tr>\r
        <tr>\r
@@ -591,7 +591,7 @@
        <tr>\r
                <td rowspan="8">HTML editor</td>\r
                <td rowspan="2">Vertical layout</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+F9</td>\r
        </tr>\r
        <tr>\r
@@ -600,7 +600,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Graphical designer</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+F10</td>\r
        </tr>\r
        <tr>\r
@@ -609,7 +609,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Horizontal layout</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+F11</td>\r
        </tr>\r
        <tr>\r
@@ -618,7 +618,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Source code</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+Shift+F12</td>\r
        </tr>\r
        <tr>\r
@@ -627,7 +627,7 @@
        </tr>\r
        <tr>\r
                <td colspan="2" rowspan="2">Preview</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+4</td>\r
        </tr>\r
        <tr>\r
@@ -636,7 +636,7 @@
        </tr>\r
        <tr>\r
                <td colspan="2" rowspan="2">Code minifier</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+5</td>\r
        </tr>\r
        <tr>\r
@@ -645,7 +645,7 @@
        </tr>\r
        <tr>\r
                <td colspan="2" rowspan="2">Code beautifier</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+6</td>\r
        </tr>\r
        <tr>\r
@@ -654,7 +654,7 @@
        </tr>\r
        <tr>\r
                <td colspan="2" rowspan="2">Assignment tracing - next</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+]</td>\r
        </tr>\r
        <tr>\r
@@ -664,7 +664,7 @@
        </tr>\r
        <tr>\r
                <td colspan="2" rowspan="2">Assignment tracing - previous</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+[</td>\r
        </tr>\r
        <tr>\r
@@ -688,22 +688,22 @@
        </tr>\r
        <tr>\r
                <td>About Tizen Dynamic Analyzer</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F1</td>\r
        </tr>\r
        <tr>\r
                <td>Configuration</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F2</td>\r
        </tr>\r
        <tr>\r
                <td>Enable the source view of the toolbar</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>F3</td>\r
        </tr>\r
        <tr>\r
                <td rowspan="2">Select the Timeline tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+1</td>\r
        </tr>\r
        <tr>\r
@@ -712,7 +712,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Select the File tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+2</td>\r
        </tr>\r
        <tr>\r
@@ -721,7 +721,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Select the Thread tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+3</td>\r
        </tr>\r
        <tr>\r
@@ -730,7 +730,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Select the User Interface tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+4</td>\r
        </tr>\r
        <tr>\r
@@ -739,7 +739,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Select the Summary tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+5</td>\r
        </tr>\r
        <tr>\r
@@ -749,7 +749,7 @@
        \r
        <tr>\r
                <td rowspan="2">Select the Range tab</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+6</td>\r
        </tr>\r
        <tr>\r
@@ -758,7 +758,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Start/stop trace</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+g</td>\r
        </tr>\r
        <tr>\r
@@ -767,7 +767,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Open trace</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+o</td>\r
        </tr>\r
        <tr>\r
@@ -776,7 +776,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Save trace</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+s</td>\r
        </tr>\r
        <tr>\r
@@ -785,7 +785,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Replay</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+p</td>\r
        </tr>\r
        <tr>\r
@@ -794,7 +794,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Toggle the range information between create and remove</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+r</td>\r
        </tr>\r
        <tr>\r
@@ -803,7 +803,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Open the search dialog box</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Ctrl+f</td>\r
        </tr>\r
        <tr>\r
@@ -812,7 +812,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Delete the saved file of the open trace dialog box</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Delete</td>\r
        </tr>\r
        <tr>\r
@@ -835,7 +835,7 @@
        </tr>\r
        <tr>\r
                <td rowspan="2">Delete virtual machine</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> </td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> </td>\r
                <td>Delete</td>\r
        </tr>\r
        <tr>\r
@@ -844,12 +844,12 @@
        </tr>\r
        <tr>\r
                <td>Launch virtual machine</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Enter</td>\r
        </tr>\r
        <tr>\r
                <td>Select virtual machine</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                <td>Arrow key</td>\r
        </tr>\r
 </tbody>\r
@@ -868,82 +868,82 @@
         </tr>\r
         <tr>\r
                 <td>Always on Top</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F2</td>\r
         </tr>\r
        <tr>\r
                 <td>Close</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>F4</td>\r
         </tr>\r
        <tr>\r
                 <td>Control Panel</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F6</td>\r
         </tr>\r
        <tr>\r
                 <td>Detailed Info</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F1</td>\r
         </tr>\r
        <tr>\r
                 <td>Force Close</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F4</td>\r
         </tr>\r
        <tr>\r
                 <td>Rotate next</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+Num+9</td>\r
         </tr>\r
         <tr>\r
                 <td>Rotate prev</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+Num+7</td>\r
         </tr>\r
        <tr>\r
                 <td>Scale next</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F10</td>\r
         </tr>\r
        <tr>\r
                 <td>Scale prev</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F9</td>\r
         </tr>\r
        <tr>\r
                 <td>Screen Shot</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F7</td>\r
         </tr>\r
        <tr>\r
                 <td>Shell</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+F5</td>\r
         </tr>\r
        <tr>\r
                 <td>Home</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>F1</td>\r
         </tr>\r
        <tr>\r
                 <td>Menu</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>F2</td>\r
         </tr>\r
        <tr>\r
                 <td>Power</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>F3</td>\r
         </tr>\r
        <tr>\r
                 <td>Volume +</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+Num++</td>\r
         </tr>\r
        <tr>\r
                 <td>Volume -</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Ctrl+Num+-</td>\r
         </tr>\r
 </tbody>\r
@@ -966,57 +966,57 @@
         </tr>\r
         <tr>\r
                 <td>Device Tree</td>\r
-               <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+               <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+D</td>\r
         </tr>\r
        <tr>\r
                 <td>Network</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+N</td>\r
         </tr>\r
        <tr>\r
                 <td>Uninstaller</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+U</td>\r
         </tr>\r
        <tr>\r
                 <td>HDS (Host Directory Sharing)</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+H</td>\r
         </tr>\r
                <tr>\r
                        <td>Upper menu focus movement</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Up</td>\r
                </tr>\r
                <tr>\r
                        <td>Underneath menu focus movement</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Down</td>\r
                </tr>\r
                <tr>\r
                        <td>Collapse tree menu</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Left</td>\r
                </tr>\r
                <tr>\r
                        <td>Expand tree menu</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Right</td>\r
                </tr>\r
                <tr>\r
                        <td>Move focus to next control</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Tab</td>\r
                </tr>\r
                <tr>\r
                        <td>Move focus to previous control</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Shift + Tab</td>\r
                </tr>\r
                <tr>\r
                        <td>Menu selection</td>\r
-                       <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                       <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                        <td>Enter</td>\r
                </tr>           \r
                \r
@@ -1025,72 +1025,72 @@
         </tr>\r
        <tr>\r
                 <td>Battery</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+B</td>\r
         </tr>\r
        <tr>\r
                 <td>RSSI</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+R</td>\r
         </tr>\r
        <tr>\r
                 <td>3-Axis sensor</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+A</td>\r
         </tr>\r
        <tr>\r
                 <td>Light</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+I</td>\r
         </tr>\r
        <tr>\r
                 <td>Proximity</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+X</td>\r
         </tr>\r
        <tr>\r
                 <td>Pressure</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+E</td>\r
         </tr>\r
        <tr>\r
                 <td>Ultraviolet</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+V</td>\r
         </tr>\r
        <tr>\r
                 <td>Heart Rate Monitor</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+M</td>\r
         </tr>\r
        <tr>\r
                 <td>Ear Jack</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+K</td>\r
         </tr>\r
        <tr>\r
                 <td>USB</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+S</td>\r
         </tr>\r
        <tr>\r
                 <td>SD Card</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+D</td>\r
         </tr>\r
        <tr>\r
                 <td>Location</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+L</td>\r
         </tr>\r
        <tr>\r
                 <td>Telephony</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+T</td>\r
         </tr>\r
        <tr>\r
                 <td>Memory</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+O</td>\r
         </tr>  \r
                <tr>\r
@@ -1098,52 +1098,52 @@
         </tr>\r
        <tr>\r
                 <td>Battery</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+B</td>\r
         </tr>\r
        <tr>\r
                 <td>3-Axis sensor</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+A</td>\r
         </tr>\r
        <tr>\r
                 <td>Light</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+I</td>\r
         </tr>\r
        <tr>\r
                 <td>Proximity</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+X</td>\r
         </tr>\r
        <tr>\r
                 <td>Pressure</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+E</td>\r
         </tr>\r
        <tr>\r
                 <td>Ultraviolet</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+V</td>\r
         </tr>\r
        <tr>\r
                 <td>Heart Rate Monitor</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+M</td>\r
         </tr>\r
        <tr>\r
                 <td>Touch gesture</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+G</td>\r
         </tr>\r
        <tr>\r
                 <td>USB</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+S</td>\r
         </tr>\r
        <tr>\r
                 <td>Memory</td>\r
-                <td><img alt="windows" src="../images/windows.png" /> <img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
+                <td><img alt="ubuntu" src="../images/ubuntu.png" /> <img alt="windows" src="../images/windows.png" /> <img alt="mac" src="../images/mac.png" /></td>\r
                 <td>Alt+O</td>\r
         </tr>                  \r
 </tbody>\r

diff --git a/org.tizen.devtools/html/images/Thumbs.db b/org.tizen.devtools/html/images/Thumbs.db
deleted file mode 100644 (file)
index 02e945d..0000000
Binary files a/org.tizen.devtools/html/images/Thumbs.db and /dev/null differ

diff --git a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
index 818f26b..aeacca9 100644 (file)
--- a/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_elements_n.htm
@@ -34,6 +34,8 @@
                        </li>\r
                        <li><a href="#metadata">&lt;metadata&gt; Element</a>\r
                        </li>\r
+                       <li><a href="#bg-category">&lt;background-category&gt; Element</a>\r
+                       </li>\r
                        </ul>\r
        </div></div>\r
 </div> \r
@@ -336,6 +338,45 @@
 <pre class="prettyprint">&lt;metadata key=&quot;testkey&quot; value=&quot;testvalue&quot;/&gt;\r
 </pre>\r
 \r
+\r
+<h2 name="bg-category" id="bg-category">&lt;background-category&gt; Element</h2>\r
+<p>The <span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element represents category of the application running on the background.</p>\r
+<table border="1"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">&lt;background-category&gt;</span> element</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Category of the application that is allowed to run on the background</p> \r
+<p>For more information on the relationship between the elements, see the <a href="manifest_text_editor_n.htm#hierarchy">Element hierarchy</a>.</p> \r
+<p><strong>Occurrences:</strong> </p> \r
+               <ul>\r
+               <li>1 or more (optional)</li>\r
+               </ul>\r
+                       <p><strong>Attributes:</strong> </p>      \r
+               <ul>\r
+                       <li><a href="#background_value"><span style="font-family: Courier New,Courier,monospace">value</span></a></li></ul>\r
+       </td> \r
+   </tr>\r
+</tbody></table>\r
+<table border="1" id="background_value"><tbody>\r
+<tr>\r
+<th style="text-align:left;margin-left:auto;margin-right:auto;">\r
+<span style="font-family: Courier New,Courier,monospace">value</span> attribute</th> \r
+    </tr>\r
+<tr>\r
+<td> <p>Value of background category</p>\r
+         <p><strong>Expected value:</strong> </p>      \r
+         <ul>\r
+<li>String</li> \r
+      </ul>\r
+</td> \r
+    </tr>\r
+</tbody></table>\r
+<p><strong>For example:</strong></p><pre class="prettyprint">&lt;background-category value="download"/&gt;\r
+</pre>\r
+\r
+\r
     \r
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>\r
 <script type="text/javascript" src="../scripts/showhide.js"></script>\r

diff --git a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
index a4174bc..2774185 100644 (file)
--- a/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
+++ b/org.tizen.devtools/html/native_tools/manifest_text_editor_n.htm
@@ -175,6 +175,12 @@
 </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="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</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="#ui">&lt;ui-application&gt;</a></span>
@@ -229,6 +235,12 @@
 </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="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</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="#account">&lt;account&gt;</a></span>
@@ -618,6 +630,11 @@
 <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
      <td>1 or more (optional)</td> 
     </tr>
+<tr>
+       <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
+     <td>1 or more (optional)</td> 
+    </tr>
+
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
@@ -723,7 +740,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
+     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> 
     </tr> 
    </tbody> 
   </table>  
@@ -749,7 +766,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
+     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> 
     </tr> 
    </tbody> 
   </table>  
@@ -820,6 +837,11 @@
 <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#datacontrol">&lt;datacontrol&gt;</a></span></td> 
      <td>1 or more (optional)</td> 
     </tr>
+<tr>
+       <td><span style="font-family: Courier New,Courier,monospace"><a href="manifest_elements_n.htm#bg-category">&lt;background-category&gt;</a></span></td> 
+       <td>1 or more (optional)</td> 
+       </tr>
+
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
          <ul>
@@ -830,8 +852,6 @@
           <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_nodisplay">nodisplay</a></span></li> 
        <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_taskmanage">taskmanage</a></span></li>
        <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_type">type</a></span></li>
-          <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_auto-restart">auto-restart</a></span></li> 
-       <li><span style="font-family: Courier New,Courier,monospace"><a href="#ui_on-boot">on-boot</a></span></li> 
       </ul>
 </td> 
     </tr>
@@ -943,58 +963,6 @@
     </tr>
 </tbody></table>
 
-<table border="1" id="ui_auto-restart"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">auto-restart</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Indicates whether the application is relaunched automatically if it is terminated abnormally.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-         <p><strong>Expected value:</strong> </p>      
-        <ul>
-<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
-<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
-<table border="1" id="ui_on-boot"><tbody>
-<tr>
-<th style="text-align:left;margin-left:auto;margin-right:auto;">
-<span style="font-family: Courier New,Courier,monospace">on-boot</span> attribute</th> 
-    </tr>
-<tr>
-<td> <p>Indicates whether the application is launched automatically on device booting time or application installation time.</p>
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> 
-    </tr> 
-   </tbody> 
-  </table>  
-
-         <p><strong>Expected value:</strong> </p>      
-        <ul>
-<li><span style="font-family: Courier New,Courier,monospace">true</span></li> 
-<li><span style="font-family: Courier New,Courier,monospace">false</span></li>
-      </ul>
-</td> 
-    </tr>
-</tbody></table>
 
 
 <p><strong>For example:</strong></p>
@@ -1362,15 +1330,15 @@
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_icon">&lt;icon&gt;</a></span></td> 
-     <td>1</td> 
+     <td>1 or more (optional)</td> 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_label">&lt;label&gt;</a></span></td> 
-     <td>1</td> 
+     <td>1 or more (optional)</td> 
     </tr>
 <tr>
 <td><span style="font-family: Courier New,Courier,monospace"><a href="#widget_supportsize">&lt;support-size&gt;</a></span></td> 
-     <td>1</td> 
+     <td>1 or more</td> 
     </tr>
 </tbody></table>
 <p><strong>Attributes:</strong> </p>      
@@ -1393,7 +1361,7 @@
 <td> <p>Widget application icon image.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1</li> 
+<li>1 or more (optional)</li> 
       </ul>
 
 <p><strong>Expected value:</strong> </p>     
@@ -1412,7 +1380,7 @@
 <td> <p>Widget application text.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1</li> 
+<li>1 or more (optional)</li> 
       </ul>
 
 <p><strong>Expected value:</strong> </p>     
@@ -1431,7 +1399,7 @@
 <td> <p>Size supported by the widget application.</p> 
 <p><strong>Occurrences:</strong> </p> 
       <ul>
-<li>1</li> 
+<li>1 or more</li> 
       </ul>
 <p><strong>Attributes:</strong> </p> 
                <ul>
@@ -1503,6 +1471,7 @@
     </tr>
 <tr>
 <td><p>Indicates the update period in seconds.</p>
+<p>Multiples of 1800 only allowed.</p>
 <p><strong>Expected value:</strong> </p>
     <ul>
 <li>Time in seconds</li>

diff --git a/org.tizen.gettingstarted/html/images/mobile_api_layout.png b/org.tizen.gettingstarted/html/images/mobile_api_layout.png
deleted file mode 100755 (executable)
index afed8bd..0000000
Binary files a/org.tizen.gettingstarted/html/images/mobile_api_layout.png and /dev/null differ

diff --git a/org.tizen.gettingstarted/html/images/native_api_layout.png b/org.tizen.gettingstarted/html/images/native_api_layout.png
new file mode 100644 (file)
index 0000000..36c3254
Binary files /dev/null and b/org.tizen.gettingstarted/html/images/native_api_layout.png differ

diff --git a/org.tizen.gettingstarted/html/images/wearable_api_layout.png b/org.tizen.gettingstarted/html/images/wearable_api_layout.png
deleted file mode 100755 (executable)
index 8a2bdb5..0000000
Binary files a/org.tizen.gettingstarted/html/images/wearable_api_layout.png and /dev/null differ

diff --git a/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm b/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
index ae77fe5..d9e1b65 100644 (file)
--- a/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
+++ b/org.tizen.gettingstarted/html/native/app_model/application_model_n.htm
@@ -83,7 +83,7 @@ These devices have constraints, such as relatively small screen sizes and lack o
     <li><p>The low memory killer is terminating your application in a low memory situation.</p></li>
   </ul>
 
- <p>Because the service application has no UI, it also has no pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
+ <p>Because the service application has no UI, it neither has a pause state. Since Tizen 2.4, the service application can go into the suspended state. Basically, the service application is running on the background by its nature; so the platform does not allow the running of the service application unless it is designated as a background category application. However, when the UI application that is packaged with the service application is running in the foreground, the service application is also regarded as a foreground application and it can be run without a designated background category.</p>
   
 <p>Application state changes are managed by the underlying framework. 
        For more information about application state transitions, see <a href="../../../../org.tizen.guides/html/native/app/application_n.htm#state_trans">Managing Application States and Transitions</a>.</p>

diff --git a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
index 3eff5e9..be3d77c 100644 (file)
--- a/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/sec_privileges_n.htm
@@ -70,13 +70,25 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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> 
+<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/apphistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Reading application usage statistics</p></td>
+<td rowspan="1" colspan="1"><p>The application can read the statistics of application usage, such as which applications have been used frequently or recently.</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> 
+<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.kill.bgapp</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Closing background applications</p></td>
+<td rowspan="1" colspan="1"><p>This application can request to close applications running in the background.</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>
@@ -196,7 +208,25 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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> 
+<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/ime</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p></p>Providing input methods</td>
+<td rowspan="1" colspan="1"><p></p>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Managing input methods</p></td>
+<td rowspan="1" colspan="1"><p>This application can manage installed input methods.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</p></td>
+<td rowspan="1" colspan="1"><p>Generating touch and key events</p></td>
+<td rowspan="1" colspan="1"><p>This application can simulate keys being pressed and touch interactions with the screen.</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>
@@ -208,7 +238,9 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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> 
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p>
+<p><strong>Deprecated since 2.4.</strong></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>
@@ -228,6 +260,30 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/mapservice</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Using map services</p></td>
+<td rowspan="1" colspan="1"><p>The application can use map services such as Geocoder, Places, and Route (Direction).</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Controlling media player</p></td>
+<td rowspan="1" colspan="1"><p>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Accepting remote controls</p></td>
+<td rowspan="1" colspan="1"><p>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediahistory.read</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Reading media playback statistics</p></td>
+<td rowspan="1" colspan="1"><p>The application can read the statistics concerning the music and videos played on the device, such as the peak times for playing music or videos.</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>public</p></td>
@@ -240,6 +296,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/minicontrol.provider</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Showing toolbar</p></td>
+<td rowspan="1" colspan="1"><p>The application can show a small toolbar on the notification panel or lock screen while it is open.</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>public</p></td>
@@ -285,8 +347,14 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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>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> 
+<td rowspan="1" colspan="1"><p>Installing/and uninstalling application packages</p></td> 
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages.</p></td> 
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Clearing other applications' caches</p></td>
+<td rowspan="1" colspan="1"><p>The application can clear other applications' 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>
@@ -336,11 +404,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/systemmonitor</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Monitoring system resources</p></td>
+<td rowspan="1" colspan="1"><p>The application can read system information, including information from the CPU and RAM.</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>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. This privilege was deprecated after the Tizen version 2.3.</p></td> 
+<td rowspan="1" colspan="1"><p>The application can read and write unrestricted system settings.</p>
+<p><strong>Deprecated since 2.3.1.</strong></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>
@@ -407,7 +483,19 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <th>Level</th>
 <th>Display name</th> 
 <th>Description</th> 
-</tr> 
+</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>This 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>This 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>
@@ -426,6 +514,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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.kill.bgapp</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Closing background applications</p></td>
+<td rowspan="1" colspan="1"><p>This application can request to close applications running in the background.</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>public</p></td>
@@ -504,6 +598,24 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/ime</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p></p>Providing input methods</td>
+<td rowspan="1" colspan="1"><p></p>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/imemanager</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Managing input methods</p></td>
+<td rowspan="1" colspan="1"><p>This application can manage installed input methods.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/inputgenerator</span></p></td>
+<td rowspan="1" colspan="1"><p>platform</p></td>
+<td rowspan="1" colspan="1"><p>Generating touch and key events</p></td>
+<td rowspan="1" colspan="1"><p>This application can simulate keys being pressed and touch interactions with the screen.</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>public</p></td>
@@ -514,7 +626,8 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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> 
+<td rowspan="1" colspan="1"><p>The application can lock and unlock a password-protected storage, and manage password changes for it.</p>
+<p><strong>Deprecated since 2.4</strong></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>
@@ -534,6 +647,24 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/mapservice</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Using map services</p></td>
+<td rowspan="1" colspan="1"><p>The application can use map services such as Geocoder, Places, and Route (Direction).</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.client</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Controlling media player</p></td>
+<td rowspan="1" colspan="1"><p>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</p></td>
+</tr>
+<tr>
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/mediacontroller.server</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Accepting remote controls</p></td>
+<td rowspan="1" colspan="1"><p>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</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>public</p></td>
@@ -546,6 +677,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/minicontrol.provider</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Showing toolbar</p></td>
+<td rowspan="1" colspan="1"><p>The application can show a small toolbar on the notification panel or lock screen while it is open.</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>public</p></td>
@@ -590,9 +727,16 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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>platform</p></td>
-<td rowspan="1" colspan="1"><p>Installing/uninstalling application packages and clearing caches
+<td rowspan="1" colspan="1"><p>Installing/uninstalling application packages
+</p></td> 
+<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages.</p></td> 
+</tr>
+<tr> 
+<td rowspan="1" colspan="1"><p><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/packagemanager.clearcache</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Clearing other applications' caches
 </p></td> 
-<td rowspan="1" colspan="1"><p>The application can install and uninstall application packages, and clear application caches.</p></td> 
+<td rowspan="1" colspan="1"><p>The application can clear other applications' 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>
@@ -636,6 +780,12 @@ tr.partner-level, tr.platform-level { background-color: #cff }
 <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/systemmonitor</span></p></td>
+<td rowspan="1" colspan="1"><p>public</p></td>
+<td rowspan="1" colspan="1"><p>Monitoring system resources</p></td>
+<td rowspan="1" colspan="1"><p>The application can read system information, including information from the CPU and RAM.</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>platform</p></td>

diff --git a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
index 84c6460..926b200 100644 (file)
--- a/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
+++ b/org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm
@@ -34,10 +34,22 @@
 
 <p>There are 2 types of submodules - Tizen native modules and open source modules. The integration of open source modules in the native API structure allows you to add additional features by using well-known open source libraries. This is particularly advantageous for developers who are familiar with certain libraries because they can quickly add features and use previously written code in certain cases.</p>
 
-<p>The following figure and table define the mobile native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+<p>The following figure and tables define the Tizen native API layout. The tables describe the API modules and the functionality of all their submodule APIs within that module. The tables also act as reference sources for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+
+<p class="figure" id="layout">Figure: Native API layout</p> 
+<p align="center"><img alt="Native API layout" src="../../images/native_api_layout.png" /></p>
+
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">Except as noted, the mobile native APIs are available since Tizen 2.3.</td>
+    </tr>
+   </tbody>
+  </table>
 
-<p class="figure" id="layout">Figure: Mobile native API layout</p> 
-<p align="center"><img alt="Mobile native API layout" src="../../images/mobile_api_layout.png" /></p>
 
 <table border="1" style="width: 100%"> 
          <caption>Table: Mobile native API modules</caption>
@@ -48,6 +60,28 @@
                        <th>API submodule</th> 
                        <th>Functionality</th> 
                </tr>   
+       <tr>
+               <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
+                <td rowspan="3">The Account API module features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.
+               <p>Documentation:</p>
+               <ul>
+               <li>Guides: <a href="../../../../org.tizen.guides/html/native/account/account_guide_n.htm">Account</a></li>
+               <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/account/account_tutorials_n.htm">Account</a></li></ul>
+               </td>
+               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
+                       <td>The Account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.</td>
+        </tr>
+       <tr>
+               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a>
+                          <p><strong>(since 2.4)</strong></p></td>
+               <td>The OAuth 2.0 APIs provide an easy way to gain an access token between server and client.</td>
+        </tr>
+        <tr>
+               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a>
+                          <p><strong>(since 2.4)</strong></p></td>
+               <td>The Sync Manager API helps applications in scheduling their data sync operations.</td>
+        </tr>
+
                <tr>
                        <td rowspan="11"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
@@ -95,15 +129,15 @@
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__SHORTCUT__MODULE.html">Shortcut</a></td>
                        <td>Adds application shortcuts to the device home screen, which is the main landing screen of the device.
-</td>
+                       </td>
         </tr> 
         <tr>
-            <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a></td>
+            <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WIDGET__FRAMEWORK.html">Widget</a><p><strong>(since 2.3.1)</strong></p></td>
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
         </tr>          
                <tr>
-                       <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
-                       <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+                       <td rowspan="9"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+                       <td rowspan="9">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
@@ -112,8 +146,13 @@
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__STL__GCC__FRAMEWORK.html">C++ Standard Library</a></td>
                        <td>Standard C++ library.</td>
         </tr>
+       <tr>
+         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__ZLIB__FRAMEWORK.html">zlib</a><p><strong>(since 2.4)</strong></p></td>
+         <td>zlib is used for in-memory compression and decompression.</td>
+       </tr>
+
                <tr>
-       <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__EGLIBC__FRAMEWORK.html">EGlibc</a></td>
+       <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__GLIBC__FRAMEWORK.html">Glibc</a></td>
                        <td>Standard C library.</td>
         </tr>     
                <tr>
@@ -124,25 +163,25 @@
                  <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
                        <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
                </tr>
-    <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
                        <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
         </tr> 
-    <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
                        <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
         </tr> 
-     <tr>
+               <tr>
        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
                        <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
         </tr> 
-     <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
         </tr> 
                <tr>
-                       <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
-                       <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+                       <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+                       <td rowspan="4">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
@@ -157,10 +196,14 @@
         <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
-        </tr>                  
+        </tr>     
                <tr>
-                       <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
-                       <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
+            <td><a href="../../../../org.tizen.native.mobile.apireference/group__SERVICE__ADAPTOR__MODULE.html">Service Adaptor</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Service Adaptor API provides developer with common interfaces like using local service for various service infra.</td>
+        </tr>
+               <tr>
+                       <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
+                       <td rowspan="4">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/context/context_guide_n.htm">Context</a></li>
@@ -169,12 +212,20 @@
                        <td>Detects user activities, such as walking, running, and being in a moving vehicle with a device.</td>
         </tr>
                <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__GESTURE__MODULE.html">Gesture Recognition</a></td>
                        <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
                </tr>
+        <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__HISTORY__MODULE.html">Contextual History</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Allows you to query statistics and patterns derived from contextual history data.</td>
+               </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__CONTEXT__TRIGGER__MODULE.html">Contextual Trigger</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Contextual Trigger API provides a way to define rules, each of which can trigger a specified action when the rule is satisfied.</td>
+               </tr>
                <tr>
-                       <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
-                       <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+                       <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+                       <td rowspan="3">The Location API module allows the geographical position of a device to be determined for use with location-based services.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
@@ -183,14 +234,22 @@
                        <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
         </tr>
                <tr>
+            <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__GEOFENCE__MANAGER__MODULE.html">Geofence Manager</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>This Geofence Manager API provides service related to geofence(geo-fence).</td>
+               </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Maps API provides a developer with a set of functions, helping to create Maps aware applications.</td>
+               </tr>
+
+               <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
                 <td rowspan="3">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
                <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
-
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MESSAGING__EMAIL__MODULE.html">Email</a></td>
          <td>Allows composing, sending, and receiving of email messages.</td>
         </tr>
@@ -204,9 +263,9 @@
         </tr>
                                
                                <tr>
-         <td rowspan="15"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
-                <td rowspan="15">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
-<p>Documentation:</p>
+         <td rowspan="20"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+                <td rowspan="20">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+               <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
@@ -221,7 +280,7 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
          <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
         </tr>
-     <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
                        <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
         </tr> 
@@ -230,6 +289,10 @@
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
                <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Media Controller API provides functions for communication between the media controller server and the media controller client.</td>
+               </tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
          <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
         </tr>
@@ -237,6 +300,14 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
         </tr>
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Metadata Editor API provides functions for editing the metadata of several popular audio format.</td>
+               </tr>
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Media Vision library provides functionality for barcodes detection and generation.</td>
+               </tr>   
                <tr>            
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Efficiently renders multichannel 3D audio.</td>
@@ -252,11 +323,19 @@
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__RECORDER__MODULE.html">Recorder</a></td>
          <td>Controls the recording of multimedia content. Recording process attributes, such as setting the recording filename and file format, can also be configured with this API submodule.</td>
-        </tr>        
+        </tr>     
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SCREEN__MIRRORING__MODULE.html">Screen Mirroring</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Screen Mirroring API provides functions for screen mirroring as sink.</td>
+               </tr>
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
         </tr>
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Thumbnail Util API provides functions for creating the thumbnail from an input media file.</td>
+               </tr>  
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
@@ -277,7 +356,7 @@
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
          <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
         </tr>
@@ -285,11 +364,11 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
          <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
         </tr>
- <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
          <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
         </tr> 
-      <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
          <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
         </tr> 
@@ -297,12 +376,13 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__MODULE.html">Wi-Fi</a></td>
          <td>Manages Wi-Fi connections and monitors the state of Wi-Fi connections.</td>
         </tr>   
- <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__WIFI__DIRECT__MODULE.html">Wi-Fi Direct</a></td>
          <td>Manages the settings of Wi-Fi Direct&trade;. This submodule API also provides functions to connect and disconnect remote devices that use Wi-Fi Direct&trade;.</td>
         </tr>  
                <tr>
-               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a></td>
+               <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__NETWORK__SMARTCARD__MODULE.html">Smartcard</a>
+               <p><strong>(since 2.3.1)</strong></p></td>
                <td>Provides application communication to the SE applet methods.</td>
                </tr>         
         <tr>
@@ -323,7 +403,7 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
          <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
         </tr>
-                               <tr>
+               <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
                 <td rowspan="3">The Social API module contains submodule APIs to manage personal data, such as contacts and calendars on a device.
                 <p>Documentation:</p>
@@ -342,17 +422,22 @@
          <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
         </tr>
                                <tr>
-         <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
-                <td rowspan="8">The System API module contains submodule APIs for system management.
+         <td rowspan="10"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+                <td rowspan="10">The System API module contains submodule APIs for system management.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li>      </ul>
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
          <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
         </tr>
-<tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Feedback API provides functions to play sound or vibration associated with properties.</td>
+               </tr>
+
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
          <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
         </tr>
@@ -375,15 +460,20 @@
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
          <td>Manages system settings, such as the lock screen settings.</td>
-        </tr>                                       
+        </tr>         
+        <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The T-trace API provides functions for writing trace message to the system trace buffer.</td>
+               </tr>
+               
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
         </tr>
 
         <tr>
-         <td rowspan="1"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
-                <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+         <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+                <td rowspan="2">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
@@ -391,41 +481,53 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
          <td>Obtains call, network, and SIM information.</td>
         </tr>   
-<tr>
-         <td rowspan="6"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
-                <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber Utils</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The phonenumber utils API provides methods for parsing and formatting phone numbers.</td>
+               </tr>
+
+               <tr>
+         <td rowspan="8"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+                <td rowspan="8">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
                 <p>Documentation:</p>
                        <ul>
                        <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a></li>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
-         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
+         <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. Cairo EvasGL APIs have been newly added since 2.3.1.</td>
         </tr>
-<tr>
-<td><a href="../../../../org.tizen.native.mobile.apireference/group__EFL.html">EFL</a></td>
+               <tr>
+               <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>
         <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
          <td>Gets and sets the priority order of notification windows.</td>
         </tr>
-<tr>
+        <tr>
+         <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">EFL Extension</a><p><strong>(since 2.3.1)</strong></p></td>
+         <td>Enhances the EFL libraries and includes device-specific features (such as support for the hardware <strong>Back</strong> key).</td>
+        </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The External Output Manager provides APIs for external outputs.</td>
+               </tr>        
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
         </tr>
-       <tr>
-         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
-         <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
-        </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Provides functions for creating EFL socket window and displaying EFL socket window.</td>
+               </tr>            
                <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
         </tr>
-
         <tr>
-         <td rowspan="2"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
-                <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+         <td rowspan="4"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+                <td rowspan="4">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
@@ -437,7 +539,15 @@
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
          <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </tr>
-                               <tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.</td>
+               </tr>        
+               <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Voice control API provides functions for registering command and getting notification when registered command is recognized.</td>
+               </tr>                                                    
+               <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
                 <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
                 <p>Documentation:</p>
@@ -447,32 +557,29 @@
         <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__JSONGLIB__FRAMEWORK.html">Json-Glib</a></td>
          <td>This library allows reading and parsing of JavaScript Object Notation (JSON) documents.</td>
         </tr>
-                                <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
          <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
         </tr>
-<tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.mobile.apireference/group__WEBVIEW.html">WebView</a></td>
          <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
-</tr>
+               </tr>
                    </tbody> 
                  </table>
 
-<p>The following figure and table define the wearable native API layout. The table describes the API modules and the functionality of all their submodule APIs within that module. The table also acts as a reference source for when you are planning a new feature for your application and need a way to efficiently compare different API modules to decide which APIs to use.</p>
+<p>The following table describes the API modules in the wearable profile and the functionality of all their submodule APIs.</p>
 
-  <table class="note"> 
-   <tbody> 
-    <tr> 
-     <th class="note">Note</th> 
-    </tr> 
-    <tr> 
-     <td class="note">The wearable native profile is available since Tizen 2.3.1.</td> 
-    </tr> 
-   </tbody> 
-  </table> 
-
-<p class="figure" id="layout_w">Figure: Wearable native API layout</p> 
-<p align="center"><img alt="Wearable native API layout" src="../../images/wearable_api_layout.png" /></p>
+  <table class="note">
+   <tbody>
+    <tr>
+     <th class="note">Note</th>
+    </tr>
+    <tr>
+     <td class="note">The wearable native profile is available since Tizen 2.3.1.</td>
+    </tr>
+   </tbody>
+  </table>
          
 <table border="1" style="width: 100%"> 
          <caption>Table: Wearable native API modules</caption>
@@ -484,6 +591,25 @@
                        <th>Functionality</th> 
                </tr>   
                <tr>
+                       <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__FRAMEWORK.html">Account</a></td>
+                       <td rowspan="3">The Account API module features include managing various account information, such as receiving sync operation notifications, and obtaining an access token by using the oauth2 authorization.
+                               <p>Documentation:</p>
+                               <ul>
+                               <li>Guides: <a href="../../../../org.tizen.guides/html/native/account/account_guide_n.htm">Account</a></li>
+                               <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/account/account_tutorials_n.htm">Account</a></li></ul>
+                       </td>
+            <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__ACCOUNT__MANAGER__MODULE.html">Account Manager</a></td>
+                       <td>The Account APIs provide CRUD (Create, Read, Update, Delete) account management functionality.</td>
+               </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__OAUTH2__MODULE.html">OAuth 2.0</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The OAuth 2.0 APIs provide easy way to gain access token between server and client.</td>
+               </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">Sync Manager</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Sync Manager API helps applications in scheduling their data sync operations.</td>
+               </tr>                
+               <tr>
                        <td rowspan="11"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APPLICATION__FRAMEWORK.html">Application Framework</a></td>
                        <td rowspan="11">The Application Framework API contains submodule APIs for application development. The submodule APIs enable application life-cycle management, usage of functionality that is exported by other applications, and access to a user&#39;s application preferences.
                        <p>Documentation:</p>
@@ -537,8 +663,8 @@
             <td>Handles Tizen widget application state changes and system events. It is also used to start and exit the main event loop of widget applications.</td>
         </tr>          
                <tr>
-                       <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
-                       <td rowspan="8">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
+                       <td rowspan="9"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__FRAMEWORK.html">Base</a></td>
+                       <td rowspan="9">The Base API contains submodule APIs for internationalization support and contains various open source libraries.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/base/base_guide_n.htm">Base</a></li>
@@ -548,7 +674,11 @@
                        <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 href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__ZLIB__FRAMEWORK.html">zlib</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>zlib is used for in-memory compression and decompression.</td>
+               </tr>        
+               <tr>
+       <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__GLIBC__FRAMEWORK.html">Glibc</a></td>
                        <td>Standard C library.</td>
         </tr>     
                <tr>
@@ -559,25 +689,25 @@
                  <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__BASE__UTILS__I18N__MODULE.html">i18n</a></td>
                        <td> Provides internationalization (i18n) support, such as flexibly generating date formats and numbers, depending on the locale setting of the device.</td>
                </tr>
-    <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBXML__FRAMEWORK.html">LibXML</a></td>
                        <td>This library can be used to parse XML documents such as the <a href="../app_model/application_model_n.htm#appmanifest">Application Manifest</a>.</td>
         </tr> 
-    <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__MINIZIP__FRAMEWORK.html">Minizip</a></td>
                        <td>Provides a library to process files in the <span style="font-family: Courier New,Courier,monospace">.zip</span> format. It can be used to zip, unzip and compress files.</td>
         </tr> 
-     <tr>
+               <tr>
        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENMP__FRAMEWORK.html">OpenMP</a></td>
                        <td>Supports shared memory multiprocessing. This can be used for complex tasks on multicore processors. </td>
         </tr> 
-     <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__SQLITE__FRAMEWORK.html">Sqlite</a></td>
                        <td>Implements a lightweight SQL relational database. This is widely used for embedded client or local storage.</td>
         </tr> 
                <tr>
-                       <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
-                       <td rowspan="2">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, download content from servers through an HTTP connection, and access the EXIF information of an image file.
+                       <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTENT__FRAMEWORK.html">Content</a></td>
+                       <td rowspan="3">The Content API module contains submodule APIs for managing the most common device media data types, such as image, audio, and video files. It provides operations to search for content, search for content information stored on the device, create playlists, and access the EXIF information of an image file.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/content/content_guide_n.htm">Content</a></li>
@@ -588,7 +718,11 @@
         <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__CONTENT__MODULE.html">Media Content</a></td>
                        <td>Connects and disconnects from the media content service. This connection is required to insert, update and remove media file information in the media content database. Common media data types, such as image, audio, and video can be managed through the database. Other queries, such as searching for content and content information and accessing EXIF information from image files, are also possible.</td>
-        </tr>                  
+        </tr>      
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">Download</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Creates and manages one or more download requests. Content is downloaded from servers through an HTTP connection.</td>
+               </tr>           
                <tr>
                        <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__CONTEXT__FRAMEWORK.html">Context</a></td>
                        <td rowspan="2">The Context API module contains submodule APIs to detect user information such as when a user is running with a device and device information such as gestures when a device is tilted. 
@@ -604,8 +738,8 @@
                        <td>Detects user gestures on devices, such as tilt, snap, and double-tap.</td>
                </tr>
                <tr>
-                       <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
-                       <td rowspan="1">The Location API module allows the geographical position of a device to be determined for use with location-based services.
+                       <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__LOCATION__FRAMEWORK.html">Location</a></td>
+                       <td rowspan="2">The Location API module allows the geographical position of a device to be determined for use with location-based services.
                        <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/location/location_guide_n.htm">Location</a></li>
@@ -614,14 +748,17 @@
                        <td>Acquires information about the geographical location of the device. It also allows the receiving of notifications about position changes, velocity changes, and when a given geographical area is left.</td>
         </tr>
                <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MAPS__SERVICE__MODULE.html">Maps Service</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Maps API provides a developer with a set of functions, helping to create Maps aware applications.</td>
+               </tr>        
+               <tr>
          <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__FRAMEWORK.html">Messaging</a></td>
-                <td rowspan="2">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS, MMS and email, of the device.
+                <td rowspan="2">The Messaging API module contains submodule APIs which grant access to the messaging capabilities, such as SMS and MMS, of the device.
                <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/messaging/messaging_guide_n.htm">Messaging</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/messaging/messaging_tutorials_n.htm">Messaging</a></li></ul>
-
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MESSAGING__MESSAGES__MODULE.html">Messages</a></td>
          <td>Allows composing, sending, and receiving of SMS, MMS, and WAP push messages.</td>
         </tr>            
@@ -631,9 +768,9 @@
         </tr>
                                
                                <tr>
-         <td rowspan="14"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
-                <td rowspan="14">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
-<p>Documentation:</p>
+         <td rowspan="18"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__FRAMEWORK.html">Multimedia</a></td>
+                <td rowspan="18">The Multimedia API module contains submodule APIs for easily integrating an application with audio, image, and video files. It can also be used for image editing.
+               <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/multimedia/multimedia_guide_n.htm">Multimedia</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/multimedia/multimedia_tutorials_n.htm">Multimedia</a></li></ul></td>
@@ -648,7 +785,7 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__IMAGE__UTIL__MODULE.html">Image Util</a></td>
          <td>Encodes and decodes JPEG images. It also provides tools, such as crop, resize, and rotate, to transform images.</td>
         </tr>
-     <tr>
+               <tr>
                        <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIBEXIF__FRAMEWORK.html">libEXIF</a></td>
                        <td>EXIF is an image file format that extends existing formats, such as JPEG and TIFF. Many Tizen devices have a camera and use this format, and libEXIF can be used to read and write EXIF metainformation to and from image files.</td>
         </tr> 
@@ -657,6 +794,10 @@
          <td>Provides interfaces for encoding and decoding audio and video data, such as AAC audio or MPEG-4 AVC video.</td>
         </tr>
                <tr>
+                       <td><a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__MEDIA__CONTROLLER__MODULE.html">Media Controller</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Media Controller API provides functions for communication between the media controller server and the media controller client.</td>
+               </tr>        
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TOOL__MODULE.html">Media Tool</a></td>
          <td>Handles audio and video packet buffers. These buffers are utilized by the other Multimedia submodule APIs.</td>
         </tr>
@@ -664,6 +805,14 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__METADATA__EXTRACTOR__MODULE.html">Metadata Extractor</a></td>
          <td>Extracts metadata information from an input media file.</td>
         </tr>
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__METADATA__EDITOR__MODULE.html">Metadata Editor</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Metadata Editor API provides functions for editing the metadata of several popular audio format.</td>
+               </tr>        
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__VISION__MODULE.html">Media Vision</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Media Vision library provides functionality for barcodes detection and generation.</td>
+               </tr>   
                <tr>            
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENAL__FRAMEWORK.html">OpenAL</a></td>
          <td>Efficiently renders multichannel 3D audio.</td>
@@ -684,6 +833,10 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__SOUND__MANAGER__MODULE.html">Sound Manager</a></td>
          <td>Provides functions to get and set sound parameters, such as output sound volume. Session policy, such as the handling of sound session interrupts, can also be configured with this API submodule.</td>
         </tr>
+               <tr>    
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__THUMBNAIL__UTIL__MODULE.html">Thumbnail Util</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Thumbnail Util API provides functions for creating the thumbnail from an input media file.</td>
+               </tr>         
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__MEDIA__TONE__PLAYER__MODULE.html">Tone Player</a></td>
          <td>Plays and stops tones.</td>
@@ -700,7 +853,7 @@
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/network/network_guide_n.htm">Network</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/network/network_tutorials_n.htm">Network</a></li></ul>
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__BLUETOOTH__MODULE.html">Bluetooth</a></td>
          <td>Manages Bluetooth devices. This involves launching the Bluetooth adapter and discovering, connecting, and bonding with other Bluetooth devices. </td>
         </tr>
@@ -708,11 +861,11 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__CONNECTION__MODULE.html">Connection</a></td>
          <td>Gets network connection information, such as IP address, proxy information, gateway information, connection state, and data transfer statistics.</td>
         </tr>
- <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">Curl</a></td>
          <td>A client-side URL data transfer library supporting http, https, ftp, file URIs, and many other protocols. Allows applications to perform URL-related activities without a Web browser.</td>
         </tr> 
-      <tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__NETWORK__NFC__MODULE.html">NFC</a></td>
          <td>Allows management, such as registering and deregistering event listeners, of short-range wireless near field communication (NFC). This submodule API must also be used to read, write, receive, and send NFC messages.</td>
         </tr> 
@@ -742,18 +895,32 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SECURITY__FRAMEWORK__PRIVILEGE__INFO__MODULE.html">Privilege Info</a></td>
          <td>Retrieves and displays privilege information. This can be used to show a user the privileges that an application contains when they are downloading it onto their device. This is so that they are aware of the resources which the application may access. </td>
         </tr>
-                               <tr>
-         <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
-                <td rowspan="8">The System API module contains submodule APIs for system management.
+               <tr>
+         <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__FRAMEWORK.html">Social</a></td>
+                <td rowspan="1">The Social API module contains submodule APIs to manage personal data, such as contacts on a device.
+                <p>Documentation:</p>
+                      <ul>
+                       <li>Guides: <a href="../../../../org.tizen.guides/html/native/social/contact_n.htm">Contact</a></li>
+                       <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/social/contact_tutorial_n.htm">Contact</a></li></ul></td>
+         <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SOCIAL__CONTACTS__SVC__MODULE.html">Contacts</a><p><strong>(since 2.4)</strong></p></td>
+         <td>Manages phone contact information, such as address books, persons, and phone logs.</td>
+        </tr>        
+               <tr>
+         <td rowspan="10"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FRAMEWORK.html">System</a></td>
+         <td rowspan="10">The System API module contains submodule APIs for system management.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/system/system_guide_n.htm">System</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/system/system_tutorials_n.htm">System</a></li>      </ul>
-</td>
+               </td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DEVICE__MODULE.html">Device</a></td>
          <td>Controls devices and monitors their status. For example, this submodule API can be used to control and monitor the device battery, display, and LED.</td>
         </tr>
-<tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__FEEDBACK__MODULE.html">Feedback</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Feedback API provides functions to play sound or vibration associated with properties.</td>
+               </tr>         
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__MEDIA__KEY__MODULE.html">Media key</a></td>
          <td>Provides methods to handle media keys from external devices that are connected to the Tizen device, such as the volume control buttons on a headset.</td>
         </tr>
@@ -776,57 +943,74 @@
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__SYSTEM__SETTINGS__MODULE.html">System Settings</a></td>
          <td>Manages system settings, such as the lock screen settings.</td>
-        </tr>                                       
+        </tr>   
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__TRACE__MODULE.html">T-trace</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The T-trace API provides functions for writing trace message to the system trace buffer.</td>
+               </tr>                               
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__SYSTEM__DLOG.html">dlog</a></td>
          <td>Sends log output and filters log messages from the dlog logging service.</td>
         </tr>
 
         <tr>
-         <td rowspan="1"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
-                <td rowspan="1">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
+         <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__FRAMEWORK.html">Telephony</a></td>
+                <td rowspan="2">The Telephony API module contains a submodule API to enable an application to access the telephony capabilities of the device, such as the call facility (call information and status), the network query services, and the SIM module.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/telephony/telephony_guide_n.htm">Telephony</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/telephony/telephony_tutorials_n.htm">Telephony</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__INFORMATION.html">Telephony Information</a></td>
          <td>Obtains call, network, and SIM information.</td>
-        </tr>   
-<tr>
-         <td rowspan="6"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
-                <td rowspan="6">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
+        </tr> 
+        <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__TELEPHONY__PHONE__NUMBER__UTILS__MODULE.html">Phonenumber Utils</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The phonenumber utils API provides methods for parsing and formatting phone numbers.</td>
+        </tr>        
+               
+               <tr>
+         <td rowspan="8"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__FRAMEWORK.html">UI Framework</a></td>
+                <td rowspan="8">The UI Framework API module contains submodule APIs and open source libraries for 2D and 3D graphics and text.
                 <p>Documentation:</p>
                        <ul>
                        <li>UI Guides: <a href="../../../../org.tizen.ui.guides/html/native/efl/guides_efl_n.htm">EFL</a></li>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/graphics/graphics_guide_n.htm">Graphics</a> and <a href="../../../../org.tizen.guides/html/native/ui/ui_guide_n.htm">UI Framework</a></li>
                        <li>Tutorials: <a href="../../../../org.tizen.tutorials/html/native/graphics/graphics_tutorials_n.htm">Graphics</a> and <a href="../../../../org.tizen.tutorials/html/native/ui/ui_tutorials_n.htm">UI Framework</a></li></ul></td>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CAIRO__FRAMEWORK.html">Cairo</a></td>
-         <td>A library for 2D vector graphics drawing. Vector graphics are advantageous because they have small file sizes and can be scaled to any size without any loss of image quality.</td>
+         <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. This module also includes Cairo EvasGL APIs which have been designed to support hardware-accelerated rendering.</td>
         </tr>
-<tr>
-<td><a href="../../../../org.tizen.native.wearable.apireference/group__EFL.html">EFL</a></td>
+               <tr>
+               <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>
         <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__MODULE.html">EFL UTIL</a></td>
          <td>Gets and sets the priority order of notification windows.</td>
         </tr>
-<tr>
+        <tr>
+         <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__EXTENSION__MODULE.html">EFL Extension</a></td>
+         <td>Enhances the EFL libraries and includes device-specific features (such as support for rotary events).</td>
+        </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__EOM__MODULE.html">External Output Manager</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The External Output Manager provides APIs for external outputs.</td>
+               </tr>          
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FONTCONFIG__FRAMEWORK.html">Fontconfig</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__FREETYPE__FRAMEWORK.html">Freetype</a></td>
          <td>A text rendering library and font-handling library to let applications find a font or closely matching font.</td>
         </tr>
-       <tr>
-         <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES 1.1 and 2.0</a></td>
-         <td>Library for rendering 3D and 2D graphics in embedded systems.</td>
-        </tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__MINICONTROL__LIBRARY.html">Minicontrol</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>Provides functions for creating EFL socket window and displaying EFL socket window.</td>
+               </tr>  
                <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UI__TBM__SURFACE__MODULE.html">TBM Surface</a></td>
          <td>The Tizen Buffer Manager (TBM) surface provides functions for the graphics buffer.</td>
         </tr>
 
         <tr>
-         <td rowspan="2"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
-                <td rowspan="2">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
+         <td rowspan="4"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__FRAMEWORK.html">UIX</a></td>
+                <td rowspan="4">The UIX API module contains submodule APIs for managing sound data, such as voice commands.
                 <p>Documentation:</p>
                        <ul>
                        <li>Guides: <a href="../../../../org.tizen.guides/html/native/uix/uix_guide_n.htm">UIX</a></li>
@@ -838,7 +1022,16 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__TTS__MODULE.html">TTS</a></td>
          <td>This API submodule provides functions for synthesizing voice from text and playing synthesized sound data.</td>
         </tr>
-                               <tr>
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__INPUTMETHOD__MODULE.html">Input Method</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Input Method API provides the functions for starting IME application lifecycle, methods to interact with current UI state of IME, and getting attributes/events.</td>
+               </tr>    
+               <tr>
+                       <td><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__UIX__VOICE__CONTROL__MODULE.html">Voice control</a><p><strong>(since 2.4)</strong></p></td>
+                       <td>The Voice control API provides functions for registering command and getting notification when registered command is recognized.</td>
+               </tr>                 
+
+               <tr>
          <td rowspan="3"><a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__FRAMEWORK.html">Web</a></td>
                 <td rowspan="3">The Web API module contains submodule APIs for browsing the Internet, tracking browsing history, downloading Web content, and manipulating JavaScript Object Notation (JSON) documents.
                 <p>Documentation:</p>
@@ -852,10 +1045,10 @@
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__LIB__OAUTH__FRAMEK.html">libOAuth</a></td>
          <td>Library for using an open standard for secure authorization. This library enables users to securely log into an account on an application by using their logon credentials from another secondary account that they may have with another account provider or application. </td>
         </tr>
-<tr>
+               <tr>
          <td><a href="../../../../org.tizen.native.wearable.apireference/group__WEBVIEW.html">WebView</a></td>
          <td>Displays and controls Web pages. This submodule API contains interfaces for browsing, tracking browsing history, and downloading Web content.</td>
-</tr>
+               </tr>
                    </tbody> 
                  </table>                
     

diff --git a/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm
index 603b4f7..1a7971e 100644 (file)
--- a/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/debugging_app_n.htm
@@ -101,11 +101,12 @@
   <h3 id="attach" name="attach">Attached Debugging</h3> 
   <p>The attached debugging method is effective for debugging Tizen applications that have no external interaction with the UI, such as middle-ware and libraries. This method attaches the &quot;gdb&quot; debugger to an application which is running in a target.</p> 
   <p>If the IDE workspace has a project that contains the source code of the application currently running on the target, you can apply &quot;attach debugging&quot; at a source level.</p> 
-  <p>To debug an application that is already running on the emulator or a device</p>
+  <p>To debug an application that is already running on the emulator or a device:</p>
   <ul>
-   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen native Application - Attach</strong>.</p></li>
-   <li><p><p>Note that the source code of the project should be related to the application that is running on the target.</p> </li>
+   <li><p>In the <strong>Project Explorer</strong> view, right-click the project and select <strong>Debug As &gt; Tizen native Application - Attach</strong>.</p>
+   <p>Note that the source code of the project must be related to the application that is running on the target.</p> </li>
    </ul>
+
  <h2 name="remote" id="remote">Remote Debugging</h2> 
   <p>The Tizen SDK supports remote debugging. Remote debugging is used to debug the OS Kernel or a system which cannot support local debugging. Remote debugging requires a &quot;GDB client&quot; on the host side and a &quot;GDB server&quot; on the target side. Both sides must be connected by serial or TCP/IP communication.</p> 
   <p class="figure">Figure: Remote debugging</p> 
@@ -321,7 +322,7 @@ collections
 }
 </pre>
 
-<p>Part1 is calculated by part2 and part1 is of the minimum size, (100, 100). But the size of part2 is no bigger than 50. So edje has no idea how to calculate part1. Use <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1;</span> on part1 for the correct calculation to fix the problem:</p>
+<p>Part1 is calculated by part2 and part1 is of the minimum size, (100, 100). But the size of part2 is no bigger than 50. So Edje has no idea how to calculate part1. Use <span style="font-family: Courier New,Courier,monospace;">fixed: 1 1;</span> on part1 for the correct calculation to fix the problem:</p>
 
 <pre class="prettyprint">ERR&lt;4357&gt;:edje lib/edje/edje_util.c:3069 _edje_object_size_min_restricted_calc() file, group fixed has a non-fixed part 'part1'. Adding 'fixed: 1 1;' to source EDC may help. Continuing discarding faulty part.
 </pre></li></ul>
@@ -439,4 +440,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

diff --git a/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
index cf36ba0..ddbb33c 100644 (file)
--- a/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
+++ b/org.tizen.gettingstarted/html/native/process/setting_properties_n.htm
@@ -200,7 +200,7 @@
      <th class="note">Note</th> 
     </tr> 
     <tr> 
-     <td class="note">The auto-restart and on-boot attributes are not supported in Tizen wearable devices.</td> 
+     <td class="note">The auto-restart and on-boot attributes are not supported in Tizen wearable devices. Since Tizen 2.4, both attributes are not supported in all Tizen devices.</td> 
     </tr> 
    </tbody> 
   </table>     

diff --git a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
index f800843..35263ff 100644 (file)
--- a/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
+++ b/org.tizen.gettingstarted/html/web/details/sec_privileges_w.htm
@@ -223,10 +223,22 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
-       <td class="key">http://tizen.org/privilege/internet</td>
+       <td class="key">http://tizen.org/privilege/ime</td>
+       <td>public</td>
+       <td>Providing input methods</td>
+       <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
+</tr>
+<tr>
+    <td class="key">http://tizen.org/privilege/keymanager</td>
+       <td>public</td>
+       <td>Using secure repository</td>
+       <td>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/led</td>
        <td>public</td>
-       <td>Accessing Internet</td>
-       <td>The application can access the Internet.This can result in additional charges depending on the user&#39;s payment plan.</td>
+       <td>Managing LEDs</td>
+       <td>The application can turn LEDs on or off, such as the LED on the front of the device and the camera flash.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/location</td>
@@ -235,6 +247,18 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can read the user&#39;s location information.</td>
 </tr>
 <tr>
+       <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
+       <td>public</td>
+       <td>Controlling media player</td>
+       <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/mediacontroller.server</td>
+       <td>public</td>
+       <td>Accepting remote controls</td>
+       <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
+</tr>
+<tr>
        <td class="key">http://tizen.org/privilege/messaging.read</td>
        <td>public</td>
        <td>Accessing messages</td>
@@ -334,7 +358,13 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td class="key">http://tizen.org/privilege/systemmanager</td>
        <td>partner</td>
        <td>Reading secure system information</td>
-       <td>The application can read secure system information.</td>
+       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/telephony</span> instead.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/telephony</td>
+       <td>public</td>
+       <td>Accessing telephony information</td>
+       <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/volume.set</td>
@@ -346,7 +376,7 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td class="key">http://tizen.org/privilege/websetting</td>
        <td>public</td>
        <td>Managing web application settings</td>
-       <td>The application can change its Web application settings, including deleting cookies.</td>
+       <td>The application can change its Web application settings, including deleting cookies. <strong>Deprecated since 2.4.</strong></td>
 </tr>
 </tbody>
 </table>
@@ -457,6 +487,66 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can close other applications.</td>
 </tr>
 <tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
+       <td>public</td>
+       <td>Managing Bluetooth general settings</td>
+       <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
+       <td>public</td>
+       <td>Using Bluetooth GAP</td>
+       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.health</td>
+       <td>public</td>
+       <td>Using Bluetooth HDP</td>
+       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
+       <td>public</td>
+       <td>Using Bluetooth SPP</td>
+       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
+       <td>platform</td>
+       <td>Managing Bluetooth system settings</td>
+       <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.admin</td>
+       <td>public</td>
+       <td>Managing Bluetooth general settings</td>
+       <td>The application can change Bluetooth settings, such as turning Bluetooth on or off and setting the device name.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.gap</td>
+       <td>public</td>
+       <td>Using Bluetooth GAP</td>
+       <td>The application can use the Bluetooth Generic Access Profile (GAP) to, for example, scan for and pair with devices.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.health</td>
+       <td>public</td>
+       <td>Using Bluetooth HDP</td>
+       <td>The application can use the Bluetooth Health Device Profile (HDP) to, for example, send health information.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/bluetooth.spp</td>
+       <td>public</td>
+       <td>Using Bluetooth SPP</td>
+       <td>The application can use the Bluetooth Serial Port Profile (SPP) to, for example, send serial data.</td>
+</tr>
+<tr class="platform-level">
+       <td class="key">http://tizen.org/privilege/bluetoothmanager</td>
+       <td>platform</td>
+       <td>Managing Bluetooth system settings</td>
+       <td>The application can change Bluetooth system settings related to privacy and security, such as the visibility mode.</td>
+</tr>
+<tr>
        <td class="key">http://tizen.org/privilege/call</td>
        <td>public</td>
        <td>Making phone calls</td>
@@ -499,12 +589,36 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td>The application can read the user&#39;s health information gathered by device sensors, such as pedometer or heart rate monitor.</td>
 </tr>
 <tr>
+       <td class="key">http://tizen.org/privilege/ime</td>
+       <td>public</td>
+       <td>Providing input methods</td>
+       <td>The application can provide users with a way to enter characters and symbols into an associated text field.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/keymanager</td>
+       <td>public</td>
+       <td>Using secure repository</td>
+       <td>The application can save keys, certificates, and data to, and retrieve and delete them from password-protected storage.</td>
+</tr>
+<tr>
        <td class="key">http://tizen.org/privilege/location</td>
        <td>public</td>
        <td>Using user location</td>
        <td>The application can read the user&#39;s location information.</td>
 </tr>
 <tr>
+       <td class="key">http://tizen.org/privilege/mediacontroller.client</td>
+       <td>public</td>
+       <td>Controlling media player</td>
+       <td>The application can receive information about currently playing media from applications that are allowed to send it, and can control those applications remotely.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/mediacontroller.server</td>
+       <td>public</td>
+       <td>Accepting remote controls</td>
+       <td>The application can send information about currently playing media to applications that are allowed to receive it, and can be controlled remotely by those applications.</td>
+</tr>
+<tr>
        <td class="key">http://tizen.org/privilege/nfc.admin</td>
        <td>public</td>
        <td>Managing NFC general settings</td>
@@ -586,7 +700,13 @@ tr.partner-level, tr.platform-level { background-color: #cff }
        <td class="key">http://tizen.org/privilege/systemmanager</td>
        <td>partner</td>
        <td>Reading secure system information</td>
-       <td>The application can read secure system information.</td>
+       <td>The application can read secure system information. <strong>Deprecated since 2.3.1</strong>. Use <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/telephony</span> instead.</td>
+</tr>
+<tr>
+       <td class="key">http://tizen.org/privilege/telephony</td>
+       <td>public</td>
+               <td>Accessing telephony information</td>
+               <td>The application can retrieve telephony information, such as the network and SIM card used, the IMEI, and the statuses of calls.</td>
 </tr>
 <tr>
        <td class="key">http://tizen.org/privilege/volume.set</td>

diff --git a/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
index f5e4302..619a90a 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/creating_app_project_w.htm
@@ -93,10 +93,9 @@
   
   <p>The <span style="font-family: Courier New,Courier,monospace">&lt;TIZEN_SDK_DATA&gt;</span> directory is different for different platforms:</p> 
   <ul> 
+   <li>In Ubuntu: <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> 
    <li>In Windows&reg; 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&reg; 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> 
-
   </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> 

diff --git a/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
index f8e4acf..fc77dd6 100644 (file)
--- a/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
+++ b/org.tizen.gettingstarted/html/web/process/run_debug_app_w.htm
@@ -57,7 +57,7 @@
   <ul> 
    <li>Use the <a href="../../../../org.tizen.devtools/html/common_tools/emulator.htm#manager">Emulator Manager</a>: 
     <ol> 
-     <li>Start the Emulator Manager using the Desktop (in Linux) or Start menu (in Windows&reg;), or using the command line.</li> 
+     <li>Start the Emulator Manager using the Desktop (in Ubuntu) or Start menu (in Windows&reg;), or using the command line.</li> 
      <li>In the <strong>Emulator Manager</strong> window, select the Emulator image in the <strong>Name</strong> column. <p>If you are using the Emulator Manager for the first time, you must create an Emulator image. To create an Emulator image, click <strong>Create New</strong>, set the image details, and click <strong>Save</strong>.</p></li> 
      <li>Click <strong>Launch</strong>.</li> 
     </ol> </li> 

diff --git a/org.tizen.guides/html/native/app/application_n.htm b/org.tizen.guides/html/native/app/application_n.htm
index 24d76bb..654f1b5 100644 (file)
--- a/org.tizen.guides/html/native/app/application_n.htm
+++ b/org.tizen.guides/html/native/app/application_n.htm
@@ -643,13 +643,13 @@ static void app_control(app_control_h app_control, void *user_data)
      <tr> \r
      <td>Download</td> \r
      <td>Downloading data with the Tizen Download-manager API</td>\r
-<td>Download-manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">wearable</a> applications)</td>\r
+<td>Download API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__WEB__DOWNLOAD__MODULE.html">wearable</a> applications)</td>\r
 <td><span style="font-family: Courier New,Courier,monospace">download</span></td> \r
     </tr> \r
     <tr> \r
      <td>Background network</td> \r
      <td>Processing general network operations on the background (such as sync-manager, IM, and VOIP)</td>\r
-<td>Sync-manager (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>\r
+<td>Sync Manager API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__SYNC__MANAGER__MODULE.html">mobile</a> applications), Socket, and Curl API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__CURL__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__CURL__FRAMEWORK.html">wearable</a> applications)</td>\r
 <td><span style="font-family: Courier New,Courier,monospace">background-network</span></td> \r
     </tr>\r
 <tr> \r

diff --git a/org.tizen.guides/html/native/app/notification_n.htm b/org.tizen.guides/html/native/app/notification_n.htm
index 416a5ec..223c61d 100644 (file)
--- a/org.tizen.guides/html/native/app/notification_n.htm
+++ b/org.tizen.guides/html/native/app/notification_n.htm
@@ -20,7 +20,11 @@
        </div>
        
        <div id="toc_border"><div id="toc">
-
+       <p class="toc-title">Content</p>
+               <ul class="toc">
+                               <li><a href="#type">Notification Types</a></li>
+                               <li><a href="#layout">Notification Layouts</a></li>
+               </ul>
                <p class="toc-title">Related Info</p>
                <ul class="toc">
                        <li><a href="../../../../org.tizen.tutorials/html/native/app_framework/notification_tutorial_n.htm">Notification Tutorial</a></li>
@@ -69,17 +73,17 @@
    <p align="center"><img alt="Active notification" src="../../images/active_notification.png" /></p>
 
 <h2 id="layout" name="layout">Notification Layouts</h2>
-<p>5 types of layouts are provided. The notifications layout can be one of the following:</p>
-<ul><li>NOTIFICATION_LY_NOTI_EVENT_SINGLE 
-<p>Layout for notification. Used to inform single event.</p></li>
-<li>NOTIFICATION_LY_NOTI_EVENT_MULTIPLE 
-<p>Layout for notification. Used to inform multiple event.</p></li>
-<li>NOTIFICATION_LY_NOTI_THUMBNAIL 
-<p>Layout for notification. Used to display images.</p></li>
-<li>NOTIFICATION_LY_ONGOING_EVENT 
-<p>Layout for ongoing notification. Used to display text message.</p></li>
-<li>NOTIFICATION_LY_ONGOING_PROGRESS 
-<p>Layout for ongoing notification. Used to display progress.</p></li></ul>
+<p>The following notification layouts are provided:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_SINGLE</span> 
+<p>Layout for a single event notification.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_EVENT_MULTIPLE</span> 
+<p>Layout for a multiple event notification.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_NOTI_THUMBNAIL</span> 
+<p>Layout for a notification displaying images.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_EVENT</span> 
+<p>Layout for an ongoing notification displaying a text message.</p></li>
+<li><span style="font-family: Courier New,Courier,monospace">NOTIFICATION_LY_ONGOING_PROGRESS</span> 
+<p>Layout for an ongoing notification displaying progress.</p></li></ul>
 
    <p class="figure">Figure: Notification layouts</p> 
    <p align="center"><img alt="Notification layouts" src="../../images/notification_layout_desc.png" /></p>

diff --git a/org.tizen.guides/html/native/app/service_app_n.htm b/org.tizen.guides/html/native/app/service_app_n.htm
index 6e2f5aa..aaa60db 100644 (file)
--- a/org.tizen.guides/html/native/app/service_app_n.htm
+++ b/org.tizen.guides/html/native/app/service_app_n.htm
@@ -139,7 +139,7 @@
       <label>Message</label>\r
    </service-application>\r
    <!--Consumer-->\r
-   <service-application component-type="svcapp" auto-restart="true" on-boot="true"\r
+   <service-application component-type="svcapp"\r
                    appid="org.tizen.message.consumer"\r
                    exec="/usr/apps/org.tizen.message/bin/msg-consumer-service"\r
                    nodisplay="true"  multiple="false" type="capp" taskmanage="false">\r
@@ -159,7 +159,7 @@
      <th class="note">Note</th> \r
     </tr> \r
     <tr> \r
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> \r
+     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> \r
     </tr> \r
    </tbody> \r
   </table>  </li>\r
@@ -171,7 +171,7 @@
      <th class="note">Note</th> \r
     </tr> \r
     <tr> \r
-     <td class="note">This attribute is not supported in Tizen wearable devices.</td> \r
+     <td class="note">This attribute is not supported in Tizen wearable devices. Since Tizen 2.4, this attribute is not supported in all Tizen devices.</td> \r
     </tr> \r
    </tbody> \r
   </table>  </li></ul>\r

diff --git a/org.tizen.guides/html/native/context/history_n.htm b/org.tizen.guides/html/native/context/history_n.htm
index abb4866..4c17180 100644 (file)
--- a/org.tizen.guides/html/native/context/history_n.htm
+++ b/org.tizen.guides/html/native/context/history_n.htm
@@ -50,7 +50,7 @@
    </tbody> 
   </table>
 
-<p>The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application must set filters (mandatory and optional) to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.</p>
+<p>The Contextual History API provides history data about application usage, media playback, communications, and device settings. When an application reads each type of history data, the application can set filters to specify the necessary statistics. The following example shows how to get information about the 5 most frequently used applications from the last 30 days.</p>
 <pre class="prettyprint">
 // Setting filter key and values
 context_history_filter_set_int(filter, CONTEXT_HISTORY_FILTER_RESULT_SIZE, 5);
@@ -65,7 +65,7 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
 
 <h2 id="datatypes" name="datatypes">History Data Types</h2>
 
-<p>Through contextual history, you can mainly retrieve statistics for 3 types of usages logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.</p>
+<p>Through contextual history, you can mainly retrieve statistics for 3 categories of usage logs, including application usage, media playback, and communications. The following table summarizes the available history data types and required privileges.</p>
 
 <table>
        <caption>Table: History data types and required privileges</caption>
@@ -154,7 +154,7 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        <th>Description</th>
                </tr>
                <tr>
-                       <td rowspan="3">
+                       <td rowspan="2">
                                All types
                        </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_TIME_SPAN</span></td>
@@ -174,6 +174,13 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        </td>
                </tr>
                <tr>
+                       <td>
+                   All types, <strong>except</strong>:
+                <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
+                <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
+                <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+                       </td>
+
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_RESULT_SIZE</span></td>
                        <td>Integer</td>
                        <td>
@@ -201,36 +208,28 @@ Once the <span style="font-family: Courier New, Courier, monospace">context_hist
                        </td>
                </tr>
                <tr>
-                       <td rowspan="2">
+                       <td>
                                <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span></p>
                        </td>
                        <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_APP_ID</span></td>
                        <td>String</td>
                        <td>
-                               Use the <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span> filter to compute the peak time for a specific application. Without this filter, the peak time is computed from the usage history of all applications.
-                               <p>In case of the peak time for music or video playbacks, these filters can be used to restrict the application that is used to play the media contents. Without this filter, playback logs from all applications are used to get the statistics.</p>
+                               Use this filter to compute the peak time (or the common settings) for a specific application. Without this filter, the peak time (or the common setting) is computed from the usage history of all applications.
                                <p>For more information on the application IDs, see the <a href="../app/app_guide_n.htm">Application Framework</a> guide.</p>
                        </td>
                </tr>
                <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK</span></td>
-                       <td>Integer</td>
                        <td>
-                               Use this filter to get application usage patterns on weekdays or weekends. The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</span>. By default, data from both weekdays and weekends are used if this filter is not set.
-                       </td>
-               </tr>
-               <tr>
-                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_APP</span>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_MUSIC</span></p>
-                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_COMMON_SETTING_FOR_VIDEO</span></p>
+                               <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_APP</span>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_MUSIC</span></p>
+                               <p><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_PEAK_TIME_FOR_VIDEO</span></p>
                        </td>
-                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_APP_ID</span></td>
-                       <td>String</td>
+                       <td><span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK</span></td>
+                       <td>Integer</td>
+
                        <td>
-                               Use this filter to retrieve the most common setting values for a specific application.
-                               <p>In case of music or video playback history, this filter can be used to get the common setting values when listening to music or watching videos using a specific application.</p>
+                               Use this filter to get usage patterns on weekdays or weekends. The filter value can be either <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKDAYS</span>, <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_WEEKENDS</span>, or <span style="font-family: Courier New,Courier,monospace">CONTEXT_HISTORY_FILTER_DAY_OF_WEEK_ALL</span>. Without this filter, data from both weekdays and weekends are used.
                        </td>
                </tr>
                <tr>

diff --git a/org.tizen.guides/html/native/graphics/opengles_n.htm b/org.tizen.guides/html/native/graphics/opengles_n.htm
index 60060f7..218b477 100644 (file)
--- a/org.tizen.guides/html/native/graphics/opengles_n.htm
+++ b/org.tizen.guides/html/native/graphics/opengles_n.htm
@@ -29,8 +29,6 @@
         <p class="toc-title">Related Info</p>\r
         <ul class="toc">\r
             <li><a href="../../../../org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm">OpenGL ES Tutorial</a></li>\r
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>\r
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>\r
             </ul>\r
     </div></div>\r
 </div>\r
@@ -41,7 +39,7 @@
  \r
 <p>The OpenGL ES overview shows the interaction among Graphics subsystems, OpenGL ES, and EGL defined by the <a href="http://www.khronos.org" target="_blank">Khronos Group</a>.</p>\r
 \r
-<p>OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API (in <a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">wearable</a> applications) for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>\r
+<p>OpenGL ES is a standard specification defining a cross-language, cross-platform OpenGL ES API for writing applications that produce 2D and 3D computer graphics. OpenGL ES 1.1 and 2.0 are supported in Tizen 2.3. (OpenGL ES 3.0 will be supported in the next Tizen version.)</p>\r
 \r
 <p>EGL is an adhesive layer between OpenGL ES and the underlying native platform window system. EGL communicates with the Window system to get information on the application window, creates the drawing surface, and manages rendering context and resources.</p>\r
 \r

diff --git a/org.tizen.guides/html/native/social/service_adaptor_n.htm b/org.tizen.guides/html/native/social/service_adaptor_n.htm
index 7f2236f..450521d 100644 (file)
--- a/org.tizen.guides/html/native/social/service_adaptor_n.htm
+++ b/org.tizen.guides/html/native/social/service_adaptor_n.htm
@@ -38,7 +38,7 @@
 <div id="container"><div id="contents"><div class="content">
 <h1>Service Adaptor</h1>
 
-<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, Googledrive, Onedrive, and Sugarsync.</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, Google Drive, 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.png"/></p>

diff --git a/org.tizen.guides/html/native/system/sysinfo_n.htm b/org.tizen.guides/html/native/system/sysinfo_n.htm
index f476908..2addb7f 100644 (file)
--- a/org.tizen.guides/html/native/system/sysinfo_n.htm
+++ b/org.tizen.guides/html/native/system/sysinfo_n.htm
@@ -807,6 +807,21 @@ the Tizen reference implementation.</td>
         <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the heart rate monitor.</td>
     </tr>
        <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_green</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the green LED sensor of the heart rate monitor.</td>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_ir</span></td>
+     <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the infrared LED sensor of the heart rate monitor.</td>
+    </tr>
+    <tr>
+       <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.heart_rate_monitor.led_red</span></td>
+               <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
+        <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the red LED sensor of the heart rate monitor.</td>
+    </tr>
+       <tr>
        <td><span style="font-family: Courier New,Courier,monospace">http://tizen.org/feature/sensor.humidity</span></td>
      <td><span style="font-family: Courier New,Courier,monospace">bool</span></td>
         <td>The platform returns <span style="font-family: Courier New,Courier,monospace">true</span> for this key, if the device supports the humidity sensor.</td>

diff --git a/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm b/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
index e75ac8b..d63d03f 100644 (file)
--- a/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
+++ b/org.tizen.guides/html/native/uix/voicecontrol_guide_n.htm
@@ -23,8 +23,8 @@
                <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>
+                       <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> 

diff --git a/org.tizen.sampledescriptions/html/images/application_control_0.png b/org.tizen.sampledescriptions/html/images/application_control_0.png
new file mode 100644 (file)
index 0000000..bb234ac
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/application_control_0.png differ

diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png
new file mode 100644 (file)
index 0000000..14cabdf
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn1.png differ

diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png
new file mode 100644 (file)
index 0000000..9581113
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn2.png differ

diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png
new file mode 100644 (file)
index 0000000..c70a20b
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn3.png differ

diff --git a/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png
new file mode 100644 (file)
index 0000000..e7bc1ac
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/bluetoothchat_mn4.png differ

diff --git a/org.tizen.sampledescriptions/html/images/notification_manager_wn.png b/org.tizen.sampledescriptions/html/images/notification_manager_wn.png
new file mode 100644 (file)
index 0000000..4e45076
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/notification_manager_wn.png differ

diff --git a/org.tizen.sampledescriptions/html/images/puzzle.png b/org.tizen.sampledescriptions/html/images/puzzle.png
new file mode 100644 (file)
index 0000000..f42967f
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle.png differ

diff --git a/org.tizen.sampledescriptions/html/images/puzzle_main.png b/org.tizen.sampledescriptions/html/images/puzzle_main.png
new file mode 100644 (file)
index 0000000..3080518
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/puzzle_main.png differ

diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_0.png b/org.tizen.sampledescriptions/html/images/quickpanel_0.png
new file mode 100644 (file)
index 0000000..22f29e3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_0.png differ

diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_1.png b/org.tizen.sampledescriptions/html/images/quickpanel_1.png
new file mode 100644 (file)
index 0000000..c92dfef
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_1.png differ

diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_2.png b/org.tizen.sampledescriptions/html/images/quickpanel_2.png
new file mode 100644 (file)
index 0000000..e5542b8
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_2.png differ

diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_3.png b/org.tizen.sampledescriptions/html/images/quickpanel_3.png
new file mode 100644 (file)
index 0000000..5db6695
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_3.png differ

diff --git a/org.tizen.sampledescriptions/html/images/quickpanel_4.png b/org.tizen.sampledescriptions/html/images/quickpanel_4.png
new file mode 100644 (file)
index 0000000..3304bd1
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/quickpanel_4.png differ

diff --git a/org.tizen.sampledescriptions/html/images/rotary_timer.png b/org.tizen.sampledescriptions/html/images/rotary_timer.png
new file mode 100644 (file)
index 0000000..9c8d76e
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/rotary_timer.png differ

diff --git a/org.tizen.sampledescriptions/html/images/rotary_timer_set.png b/org.tizen.sampledescriptions/html/images/rotary_timer_set.png
new file mode 100644 (file)
index 0000000..340a82a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/rotary_timer_set.png differ

diff --git a/org.tizen.sampledescriptions/html/images/sketch1.png b/org.tizen.sampledescriptions/html/images/sketch1.png
new file mode 100644 (file)
index 0000000..7ea8a88
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch1.png differ

diff --git a/org.tizen.sampledescriptions/html/images/sketch2.png b/org.tizen.sampledescriptions/html/images/sketch2.png
new file mode 100644 (file)
index 0000000..dfaf71a
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch2.png differ

diff --git a/org.tizen.sampledescriptions/html/images/sketch3.png b/org.tizen.sampledescriptions/html/images/sketch3.png
new file mode 100644 (file)
index 0000000..20c1d99
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch3.png differ

diff --git a/org.tizen.sampledescriptions/html/images/sketch4.png b/org.tizen.sampledescriptions/html/images/sketch4.png
new file mode 100644 (file)
index 0000000..5bccfeb
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch4.png differ

diff --git a/org.tizen.sampledescriptions/html/images/sketch5.png b/org.tizen.sampledescriptions/html/images/sketch5.png
new file mode 100644 (file)
index 0000000..2db8899
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/sketch5.png differ

diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png b/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png
new file mode 100644 (file)
index 0000000..e8a3b0c
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_screenshot.png differ

diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure.png
new file mode 100644 (file)
index 0000000..1b5d313
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure.png differ

diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png
new file mode 100644 (file)
index 0000000..7b9cc63
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure2.png differ

diff --git a/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png b/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png
new file mode 100644 (file)
index 0000000..4014ab3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/stopwatch_structure4.png differ

diff --git a/org.tizen.sampledescriptions/html/images/system_info_1.png b/org.tizen.sampledescriptions/html/images/system_info_1.png
new file mode 100644 (file)
index 0000000..eee77e0
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_1.png differ

diff --git a/org.tizen.sampledescriptions/html/images/system_info_2.png b/org.tizen.sampledescriptions/html/images/system_info_2.png
new file mode 100644 (file)
index 0000000..bea3ab3
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_2.png differ

diff --git a/org.tizen.sampledescriptions/html/images/system_info_3.png b/org.tizen.sampledescriptions/html/images/system_info_3.png
new file mode 100644 (file)
index 0000000..b7ed9ec
Binary files /dev/null and b/org.tizen.sampledescriptions/html/images/system_info_3.png differ

diff --git a/org.tizen.sampledescriptions/html/index.htm b/org.tizen.sampledescriptions/html/index.htm
index 75a457d..6bf6ea0 100644 (file)
--- a/org.tizen.sampledescriptions/html/index.htm
+++ b/org.tizen.sampledescriptions/html/index.htm
@@ -87,6 +87,8 @@
        <ul>
                <li><a href="mobile_n/sd_mn.htm">Mobile Native</a>
                <ul>
+                       <li><a href="mobile_n/application_control_sd_mn.htm">Application Control</a></li>
+                       <li><a href="mobile_n/bluetoothchat_sd_mn.htm">Bluetooth Chat</a></li>
                        <li><a href="mobile_n/bundle_sd_mn.htm">Bundle</a></li>
                        <li><a href="mobile_n/cairo_basic_sd_mn.htm">Cairo Basic</a></li>
                        <li><a href="mobile_n/cairo_evasgl_sd_mn.htm">Cairo EvasGL</a></li>
@@ -107,11 +109,16 @@
                        <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/puzzle_sd_mn.htm">Puzzle</a></li>
+                       <li><a href="mobile_n/quickpanel_sd_mn.htm">Quickpanel</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/sketch_sd_mn.htm">Sketch</a></li>
+                       <li><a href="mobile_n/stopwatch_sd_mn.htm">Stopwatch</a></li>
+                       <li><a href="mobile_n/systeminfo_sd_mn.htm">System Info</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/volume_sd_mn.htm">Volume</a></li>                 
@@ -164,9 +171,11 @@
                        <li><a href="wearable_n/cairo_basic_sd_wn.htm">(Circle) Cairo Basic</a></li>
                        <li><a href="wearable_n/cairo_evasgl_sd_wn.htm">(Circle) Cairo EvasGL</a></li>
                        <li><a href="wearable_n/circleemail_sd_wn.htm">(Circle) Email</a></li>
+                       <li><a href="wearable_n/circlerotarytimer_sd_wn.htm">(Circle) Rotary Timer</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/rectnotificationmanager_sd_wn.htm">(Rectangle) NotificationManager</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>
                        <li><a href="wearable_n/analog_watch_sd_wn.htm">Analog Watch</a></li>

diff --git a/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
new file mode 100644 (file)
index 0000000..55c5e32
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/application_control_sd_mn.htm
@@ -0,0 +1,196 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+       <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+       <meta http-equiv="X-UA-Compatible" content="IE=9" />
+       <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+       <link rel="stylesheet" type="text/css" href="../css/snippet.css" />
+       <script type="text/javascript" src="../scripts/snippet.js"></script>    
+       <script type="text/javascript" src="../scripts/jquery.util.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/common.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/core.js" charset="utf-8"></script>
+       <script type="text/javascript" src="../scripts/search.js" charset="utf-8"></script>
+       <title>Application Control 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>Application Control Sample Overview</h1>
+<p>The Application Control sample application uses the App Control API to search for applications supporting specific operations. The following operations have been selected in this application:</p>
+<ul>
+       <li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span>: enables data display</li>
+       <li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_PICK</span>: picks an item from the data</li>
+       <li><span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_COMPOSE</span>: composes (for example a message)</li>
+</ul>
+<p>The figure below illustrates the application view.</p>
+       <p class="figure">Figure: Application control view</p>
+       <p align="center"><img alt="Application control view" src="../images/application_control_0.png" />
+</p>
+
+<p>In the main window the application launch panel enables the user to choose one of the available operations, and search, run, and stop found applications. The message composing area enables the user to compose a message, set the destination address, and send it using the default email application.</p>
+
+<h2>Prerequisites</h2>
+<p>To ensure proper application execution, the following privileges must be set:</p>
+ <ul>
+  <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>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/email</span></li>
+  <li><span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/datasharing</span></li>
+ </ul>
+
+<h2>Implementation</h2>
+<h3>Application Launch Panel</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace">controller_search_app()</span> function is invoked on a search button click event.</p>
+
+<pre class="prettyprint">
+void controller_search_app(int selected_operation_id)
+{
+&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
+
+&nbsp;&nbsp;&nbsp;model_free_app_control_selection();
+
+&nbsp;&nbsp;&nbsp;const char *operation = model_get_operation_name(selected_operation_id);
+&nbsp;&nbsp;&nbsp;if (!operation)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+
+&nbsp;&nbsp;&nbsp;int ret = app_control_create(&amp;app_control);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, operation);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_foreach_app_matched(app_control, app_control_application_matched_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(app_control);
+}
+</pre>
+
+<p>After the call to the <span style="font-family: Courier New,Courier,monospace">app_control_foreach_app_matched()</span> function, the <span style="font-family: Courier New,Courier,monospace">app_control_application_matched_cb()</span> function is called for each installed application that meets the criteria specified by the operation type. On each call to this function, one radio button is added to the popup window.</p>
+<pre class="prettyprint">
+static bool app_control_application_matched_cb(app_control_h app_control, const char *appid, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;bool new_radio_group = false;
+
+&nbsp;&nbsp;&nbsp;if (!view_is_shown_popup_window()) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_radio_group = true;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (view_add_popup_window_radio_button(appid, new_radio_group))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;model_add_application_id(appid);
+
+&nbsp;&nbsp;&nbsp;view_disable_button(controller_data.viewdata, BUTTON_EXECUTE, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>Once the user has chosen an application from the popup window, the <strong>Execute</strong> button becomes available. The following code is invoked upon the click event.</p>
+<p>The following code launches the selected application using <span style="font-family: Courier New,Courier,monospace">app_control_send_launch_request()</span> API function. Note that it also sets some additional operation data using the <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data()</span> function. This way, if the application supports these data keys, its behaviour is altered. For instance, the email application is started in the message creation mode. All the necessary message fields are filled with the defined extra data and the message is ready to be sent.</p>
+<pre class="prettyprint">
+void controller_execute(void)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;if (!model_get_app_control_selection(&amp;operation, &amp;appid)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;int ret = app_control_set_operation(controller_data.launch_app_control, operation);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id(controller_data.launch_app_control, appid);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_TO, COMPOSE_OP_RECIPIENT);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_CC, COMPOSE_OP_RECIPIENT_CC);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_BCC, COMPOSE_OP_RECIPIENT_BCC);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_SUBJECT, COMPOSE_OP_SUBJECT);
+&nbsp;&nbsp;&nbsp;if (ret == APP_CONTROL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(controller_data.launch_app_control, APP_CONTROL_DATA_TEXT, COMPOSE_OP_MESSAGE);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(controller_data.launch_app_control, __app_control_launch_reply_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;view_disable_button(controller_data.viewdata, BUTTON_KILL, EINA_FALSE);
+}
+</pre>
+
+
+<h3>Message Composing Area</h3>
+
+<p>This sample application also gives the user the possibility to compose a message and launch the default email application for the message to be sent. When <strong>Send message</strong> button is clicked, the following code is executed:</p>
+
+<pre class="prettyprint">
+void controller_send_message(const char *email_address, const char *email_body)
+{
+&nbsp;&nbsp;&nbsp;app_control_h app_control = NULL;
+
+&nbsp;&nbsp;&nbsp;int ret = app_control_create(&amp;app_control);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_set_launch_mode(app_control, APP_CONTROL_LAUNCH_MODE_GROUP);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_set_operation(app_control, APP_CONTROL_OPERATION_COMPOSE);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_set_app_id(app_control, EMAIL_APP_ID);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_TO, email_address);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_SUBJECT, EMAIL_DEFAULT_MESSAGE_SUBJECT);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_add_extra_data(app_control, APP_CONTROL_DATA_TEXT, email_body);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(app_control, __app_control_launch_reply_cb, NULL);
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(app_control);
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
new file mode 100644 (file)
index 0000000..1598d1c
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/bluetoothchat_sd_mn.htm
@@ -0,0 +1,607 @@
+<!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 Chat 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>Bluetooth Chat Sample Overview</h1>
+
+<p>The Bluetooth Chat sample application demonstrates how you can send and receive data between two devices.</p>
+
+<p>The following figure illustrates the screens of the sample application.</p>
+
+<p class="figure">Figure: Bluetooth Chat screens</p>
+<p align="center"><img alt="Bluetooth screens" src="../images/bluetoothchat_mn1.png" /> <img alt="Bluetooth screens" src="../images/bluetoothchat_mn2.png" /></p>
+
+<p>The main screen has 2 buttons for finding devices and creating a server. The chat room screen is created with the <a href="../mobile_n/ui_message_bubble_sd_mn.htm">[UI Sample] MessageBubble</a> sample application.</p> 
+
+<h2 id="implementation" name="implementation">Implementation</h2>
+
+<p>By clicking the buttons, the application calls the <span style="font-family: Courier New,Courier,monospace">bt_mgr_initialize()</span> function, and checks whether the Bluetooth is on or off. If Bluetooth is off, the application calls the Bluetooth ON/OFF application to turn on Bluetooth.</p>
+<p class="figure">Figure: Bluetooth ON/OFF application</p>
+
+<p align="center"><img alt="Bluetooth ON/OFF application" src="../images/bluetoothchat_mn3.png" /> <img alt="Bluetooth ON/OFF application" src="../images/bluetoothchat_mn4.png" /></p>
+
+<p>If the <span style="font-family: Courier New,Courier,monospace">bt_mgr_initialize()</span> function is called and Bluetooth is on, it draws proper layouts according to the roles of the application, as a client or a server.</p>
+<pre class="prettyprint">
+void bt_mgr_initialize(void *data, bt_mgr_type type)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;bt_adapter_state_e bt_ad_state = BT_ADAPTER_DISABLED;
+&nbsp;&nbsp;&nbsp;bt_adapter_visibility_mode_e bt_ad_visibility = BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;int duration = 1;
+
+&nbsp;&nbsp;&nbsp;ad = (appdata_s *)data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;ret = bt_initialize();
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ret = bt_adapter_get_state(&amp;bt_ad_state);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;if (bt_ad_state == BT_ADAPTER_DISABLED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_onoff_operation();
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(type) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_MGR_SEARCH:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_search_layout_create(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_MGR_WAIT:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_get_visibility(&amp;bt_ad_visibility, &amp;duration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to get the adapter visibility&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (bt_ad_visibility != BT_ADAPTER_VISIBILITY_MODE_NON_DISCOVERABLE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_server_layout_create(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_visibility_operation_set();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+}
+static void _onoff_operation(void)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;ret_if(!service);
+
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, &quot;http://tizen.org/appcontrol/operation/edit&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(service, &quot;application/x-bluetooth-on-off&quot;);
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to relaunch Bluetooth On/off app&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+}
+</pre>
+
+<h3 id="client" name="client">Client</h3>
+
+<p>A client is an application which is started by clicking the button, <strong>Search Friends</strong>. It draws its own layout by the <span style="font-family: Courier New,Courier,monospace">_search_layout_create()</span> function, which is called by the <span style="font-family: Courier New,Courier,monospace">bt_mgr_initialize()</span> function. The layout is a list of the found devices.</p>
+<pre class="prettyprint">
+static void _search_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;navi);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;role = BT_SOCKET_CLIENT;
+
+&nbsp;&nbsp;&nbsp;s_info.list = elm_list_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;ret_if(!s_info.list);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.list, EVAS_CALLBACK_DEL, _on_search_del_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_list_go(s_info.list);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;navi, &quot;Search Friends&quot;, NULL, NULL, s_info.list, NULL);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;_discovery_start(ad);
+}
+</pre>
+
+<p>While drawing the list, the application starts finding devices by the <span style="font-family: Courier New,Courier,monospace">_discovery_start()</span> function. Set the device discovery state changed callback, and update the list whenever new device is found.</p>
+<pre class="prettyprint">
+static void _discovery_start(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;bt_error_e ret = BT_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(ad-&gt;bt);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;bt = TRUE;
+
+&nbsp;&nbsp;&nbsp;ret = bt_adapter_set_device_discovery_state_changed_cb(_adapter_discovery_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ret = bt_adapter_start_device_discovery();
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+}
+
+static void _adapter_discovery_state_changed_cb(int result, bt_adapter_device_discovery_state_e discovery_state, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s *discovery_info, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;bt_adapter_device_discovery_info_s *new_device_info = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ad = (appdata_s *)user_data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;ret_if(!s_info.list);
+&nbsp;&nbsp;&nbsp;ret_if(result != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;switch (discovery_state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_STARTED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;BT_ADAPTER_DEVICE_DISCOVERY_STARTED&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FINISHED:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;BT_ADAPTER_DEVICE_DISCOVERY_FINISHED&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_adapter_unset_device_discovery_state_changed_cb();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[BT_ADAPTER_DEVICE_DISCOVERY_FINISHED] Failed to unset the state discovery cb&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;bt = FALSE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case BT_ADAPTER_DEVICE_DISCOVERY_FOUND:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;BT_ADAPTER_DEVICE_DISCOVERY_FOUND&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (discovery_info != NULL &amp;&amp; s_info.list != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info = malloc(sizeof(bt_adapter_device_discovery_info_s));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (new_device_info != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;Device Name is: %s&quot;, discovery_info-&gt;remote_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;memcpy(new_device_info, discovery_info, sizeof(bt_adapter_device_discovery_info_s));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_address = strdup(discovery_info-&gt;remote_address);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new_device_info-&gt;remote_name = strdup(discovery_info-&gt;remote_name);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_list_item_append(s_info.list, new_device_info-&gt;remote_name, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NULL, _click_friend_item_cb, new_device_info);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_list_go(s_info.list);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>If an item on the list is clicked, the application starts to bond with the target device, and requests to connect to the target server.</p>
+<pre class="prettyprint">
+static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_s *connection, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)user_data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;ret_if(result != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_CONNECTED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (connection != NULL) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;Connected %d %d&quot;, ad-&gt;socket_fd, connection-&gt;socket_fd);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;role = connection-&gt;local_role;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = connection-&gt;socket_fd;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_naviframe_item_pop(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_chat_room_layout_create(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.noti);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;No connection data&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;Disconnected&quot;);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void _device_bond_created_cb(int result, bt_device_info_s *device_info, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;if (result != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed result: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (device_info != NULL &amp;&amp;
+&nbsp;&nbsp;&nbsp;!strncmp(device_info-&gt;remote_address, s_info.info-&gt;remote_address, strlen(device_info-&gt;remote_address))) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = bt_socket_connect_rfcomm(s_info.info-&gt;remote_address, BT_MGR_UUID);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != BT_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[bt_socket_listen_and_accept_rfcomm] Failed&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_D(&quot;[bond create cb] Bonded with another device&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;goto DEL_NOTI;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+
+DEL_NOTI:
+
+&nbsp;&nbsp;&nbsp;if (s_info.noti) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.noti);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.noti = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+<p>If successfully connected with the target, the <span style="font-family: Courier New,Courier,monospace">_socket_conn_state_changed_cb()</span> function is called and the application moves to the chat room layout by calling the <span style="font-family: Courier New,Courier,monospace">_bt_chat_room_layout_create()</span> function.</p>
+
+
+<h3 id="server" name="server">Server</h3>
+
+<p>A server is an application which is started by clicking <strong>Wait a friend</strong>. The role of this application  is making a server for chatting, and waiting for a client. Before drawing the proper layout, the application checks whether the device is discoverable or not by the <span style="font-family: Courier New,Courier,monospace">_search_layout_create()</span> function. If the device is not discoverable, the application calls the Bluetooth Visibility Application.</p>
+<pre class="prettyprint">
+static void _visibility_operation_set(void)
+{
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;ret_if(!service);
+
+&nbsp;&nbsp;&nbsp;app_control_set_operation(service, &quot;http://tizen.org/appcontrol/operation/edit&quot;);
+&nbsp;&nbsp;&nbsp;app_control_set_mime(service, &quot;application/x-bluetooth-visibility&quot;);
+&nbsp;&nbsp;&nbsp;ret = app_control_send_launch_request(service, NULL, NULL);
+&nbsp;&nbsp;&nbsp;if (ret != APP_CONTROL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to relaunch Bluetooth Visibility app&quot;);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;app_control_destroy(service);
+}
+</pre>
+
+<p>A server application also registers the callback for detecting the state of the socket connection. The callback function is same as that of client. The application creates a server, and when the socket connection state changes to <span style="font-family: Courier New,Courier,monospace">BT_SOCKET_CONNECTED</span>, it moves to the chat room layout.</p>
+<pre class="prettyprint">
+static void _server_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *progress = NULL;
+&nbsp;&nbsp;&nbsp;char edj_path[PATH_MAX] = { 0, };
+
+&nbsp;&nbsp;&nbsp;ad-&gt;role = BT_SOCKET_SERVER;
+
+&nbsp;&nbsp;&nbsp;app_resource_get(CREATE_SERVER, edj_path, (int)PATH_MAX);
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, edj_path, &quot;create_server&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;progress = elm_progressbar_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!progress, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(progress, &quot;process_large&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(progress, 100, 100);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(progress, 0.5, 0.5);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(progress, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_progressbar_pulse(progress, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;progress&quot;, progress);
+
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;navi, &quot;Wait a Friend&quot;, NULL, NULL, layout, NULL);
+
+&nbsp;&nbsp;&nbsp;_server_create(ad);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;if (layout) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;layout = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (progress) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(progress);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;progress = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+
+
+<h3 id="chatroom" name="chatroom">Chat Room</h3>
+<p>To implement the chat room layout and send a message:</p>
+<ol>
+
+<li>Draw the layout:
+<pre class="prettyprint">
+static Evas_Object *_main_view_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *main_scroller = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *input_field_table = NULL;
+
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;main_scroller = elm_scroller_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;goto_if(!main_scroller, ERROR);
+&nbsp;&nbsp;&nbsp;elm_scroller_bounce_set(main_scroller, EINA_FALSE, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(main_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(main_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_show(main_scroller);
+
+&nbsp;&nbsp;&nbsp;s_info.main_box = elm_box_add(main_scroller);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.main_box, ERROR);
+&nbsp;&nbsp;&nbsp;elm_box_align_set(s_info.main_box, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.main_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.main_box);
+
+&nbsp;&nbsp;&nbsp;s_info.bubble_scroller = elm_scroller_add(s_info.main_box);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.bubble_scroller, ERROR);
+&nbsp;&nbsp;&nbsp;elm_scroller_bounce_set(s_info.bubble_scroller, EINA_FALSE, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.bubble_scroller, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(s_info.bubble_scroller, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;s_info.bubble_box = elm_box_add(s_info.bubble_scroller);
+&nbsp;&nbsp;&nbsp;goto_if(!s_info.bubble_box, ERROR);
+&nbsp;&nbsp;&nbsp;elm_box_align_set(s_info.bubble_box, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(s_info.bubble_box, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.bubble_box);
+&nbsp;&nbsp;&nbsp;elm_box_padding_set(s_info.bubble_box, ELM_SCALE_SIZE(10), ELM_SCALE_SIZE(15));
+
+&nbsp;&nbsp;&nbsp;elm_object_content_set(s_info.bubble_scroller, s_info.bubble_box);
+&nbsp;&nbsp;&nbsp;evas_object_show(s_info.bubble_scroller);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.main_box, s_info.bubble_scroller);
+
+&nbsp;&nbsp;&nbsp;input_field_table = _input_field_table_create(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!input_field_table, ERROR);
+&nbsp;&nbsp;&nbsp;evas_object_show(input_field_table);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.main_box, input_field_table);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(main_scroller, s_info.main_box);
+
+&nbsp;&nbsp;&nbsp;return main_scroller;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;if (main_scroller) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(main_scroller);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_scroller = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (input_field_table) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(input_field_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;input_field_table = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+
+static void _on_main_scroller_del_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;if (s_info.main_box) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.main_box);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.main_box = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.bubble_scroller) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.bubble_scroller);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.bubble_scroller = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.bubble_box) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.bubble_box);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.bubble_box = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (s_info.input_field_entry) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(s_info.input_field_entry);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s_info.input_field_entry = NULL;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Manage the connection state changes: 
+<pre class="prettyprint">
+static void _socket_conn_state_changed_cb(int result, bt_socket_connection_state_e connection_state, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bt_socket_connection_s *connection, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = (appdata_s *)user_data;
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(result != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;_D(&quot;[_socket_conn_state_changed_cb] Changed&quot;);
+&nbsp;&nbsp;&nbsp;if (connection_state == BT_SOCKET_DISCONNECTED) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_I(&quot;[_socket_conn_state_changed_cb] Disconnected&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;socket_fd = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti = bt_noti_popup_create(ad-&gt;navi, &quot;Disconnected with the Friend&quot;, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>Receive the data:
+<pre class="prettyprint">
+static void _socket_data_received_cb(bt_socket_received_data_s *data, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;char *message = NULL;
+
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;message = strndup(data-&gt;data, data-&gt;data_size);
+&nbsp;&nbsp;&nbsp;goto_if(!message, ERROR);
+
+&nbsp;&nbsp;&nbsp;bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_RECEIVE, message, _current_time_get());
+&nbsp;&nbsp;&nbsp;goto_if(!bubble_table, ERROR);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(bubble_table);
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.bubble_box, bubble_table);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, _bubble_box_resize_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;free(message);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;if (bubble_table) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (message) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(message);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message = NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+
+<p>The chat room is created by calling the <span style="font-family: Courier New,Courier,monospace">bt_chat_room_layout_create()</span> function. The function draws the layout for chatting, and unsets the callback of connection state change and reregisters it. It also registers the data received callback. When the message is received from the target, the application makes a message bubble for a new message.</p>
+<pre class="prettyprint">
+void bt_chat_room_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *main_scroller = NULL;
+&nbsp;&nbsp;&nbsp;int ret = -1;
+
+&nbsp;&nbsp;&nbsp;bt_socket_set_data_received_cb(_socket_data_received_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_unset_connection_state_changed_cb();
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_set_connection_state_changed_cb(_socket_conn_state_changed_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(ret != BT_ERROR_NONE);
+
+&nbsp;&nbsp;&nbsp;main_scroller = _main_view_create(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!main_scroller);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(main_scroller, EVAS_CALLBACK_DEL, _on_main_scroller_del_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;navi, &quot;Chatting&quot;, NULL, NULL, main_scroller, NULL);
+}
+</pre>
+</li>
+
+<li>Send a message:
+<pre class="prettyprint">
+static void _message_send(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bubble_table = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *noti = NULL;
+&nbsp;&nbsp;&nbsp;const char *main_text = NULL;
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+&nbsp;&nbsp;&nbsp;ret_if(!s_info.input_field_entry);
+
+&nbsp;&nbsp;&nbsp;main_text = elm_entry_entry_get(s_info.input_field_entry);
+&nbsp;&nbsp;&nbsp;ret_if(!main_text || (strlen(main_text) == 0));
+
+&nbsp;&nbsp;&nbsp;ret = bt_socket_send_data(ad-&gt;socket_fd, main_text, strlen(main_text)+1);
+&nbsp;&nbsp;&nbsp;if (ret == -1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;[bt_socket_send_data] send to fail : %s&quot;, main_text);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti = bt_noti_popup_create(ad-&gt;navi, &quot;Send Failed&quot;, EINA_FALSE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(noti);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bubble_table = _bubble_table_create(s_info.bubble_box, MESSAGE_BUBBLE_SENT, elm_entry_entry_get(s_info.input_field_entry), _current_time_get());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret_if(!bubble_table);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_box_pack_end(s_info.bubble_box, bubble_table);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_entry_entry_set(s_info.input_field_entry, &quot;&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(s_info.bubble_box, EVAS_CALLBACK_RESIZE, _bubble_box_resize_cb, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+<p>When the user clicks <strong>SEND</strong>, the message on the input area is sent to the target device. If sending is successful, the application makes a message bubble for the sent message.</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
new file mode 100644 (file)
index 0000000..0977978
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/puzzle_sd_mn.htm
@@ -0,0 +1,259 @@
+<!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>Puzzle 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>Puzzle Sample Overview</h1>
+
+<p>The Puzzle sample application demonstrates how to implement a complex view using recursive composition of the standard EFL components.</p>
+
+<p>The following figure illustrates the main view of the Puzzle application in its normal state.</p>
+
+<p class="figure">Figure: Puzzle main view</p>
+<p align="center"><img src="../images/puzzle_main.png" alt="Puzzle main view" /></p>
+
+<h2 id="implementation" name="implementation">Implementation</h2>
+
+<p>To create the Puzzle:</p>
+<ol>
+<li>Add the required privileges.
+<p>To use the Puzzle, 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 systemsettings privilege (<span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/systemsettings</span>) is added to allow getting the system setting value.</p>
+</li>
+<li>Create the layout for the Puzzle preview. 
+<p>The <span style="font-family: Courier New,Courier,monospace">puzzle_create()</span> function creates the main layout of the Puzzle application.</p>
+<pre class="prettyprint">
+void puzzle_create(appdata_s *data)
+{
+&nbsp;&nbsp;&nbsp;_D(&quot;Puzzle_create&quot;);
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+&nbsp;&nbsp;&nbsp;// Make a 6X6 image object
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; 37; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;piece[i] = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;piece_pos[i] = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(ad-&gt;piece[i], ad-&gt;smile_img_path, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = evas_object_image_load_error_get(ad-&gt;piece[i]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EVAS_LOAD_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Failed to load image&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;piece[i], &quot;position&quot;, (void *)i);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_image_size_get(ad-&gt;piece[36], &amp;ad-&gt;origin_image_width, &amp;ad-&gt;origin_image_height);
+&nbsp;&nbsp;&nbsp;_D(&quot;The original image width: %d, height: %d&quot;, ad-&gt;origin_image_width, ad-&gt;origin_image_height);
+
+&nbsp;&nbsp;&nbsp;// Divide the size of a real image into a puzzle
+&nbsp;&nbsp;&nbsp;extract_region_width = ad-&gt;origin_image_width/PIECE;
+&nbsp;&nbsp;&nbsp;extract_region_height = ad-&gt;origin_image_height/PIECE;
+
+&nbsp;&nbsp;&nbsp;// Divide the size of the puzzle of the screen into a PIECE
+&nbsp;&nbsp;&nbsp;puzzle_width = ad-&gt;full_image_width/PIECE;
+&nbsp;&nbsp;&nbsp;puzzle_height = ad-&gt;full_image_height/PIECE;
+
+&nbsp;&nbsp;&nbsp;for (y = 0; y &lt; PIECE; y++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (x = 0; x &lt; PIECE; x++)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_move(ad-&gt;piece[y*PIECE + x], ad-&gt;puzzle_start_x + x*(2+puzzle_width),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;puzzle_start_y + y*(2+puzzle_height));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_load_region_set(ad-&gt;piece[y*PIECE + x], x*extract_region_width, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;y*extract_region_height, extract_region_width, extract_region_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_resize(ad-&gt;piece[y*PIECE + x], puzzle_width, puzzle_height);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;piece[y*PIECE + x], EVAS_CALLBACK_MOUSE_DOWN, mouse_down_cb, ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;piece[y*PIECE + x], EVAS_CALLBACK_MOUSE_UP, mouse_up_cb, ad);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (y == 3 &amp;&amp; x == 3) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_get(ad-&gt;piece[y*PIECE + x], &amp;ad-&gt;r, &amp;ad-&gt;g, &amp;ad-&gt;b, &amp;ad-&gt;a);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;piece[y*PIECE + x], ad-&gt;r, ad-&gt;g, ad-&gt;b, 0);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;white_piece = y*PIECE + x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;piece[y*PIECE + x]);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ad-&gt;size = PIECE;
+&nbsp;&nbsp;&nbsp;ad-&gt;start = 0;
+}
+</pre>
+</li>
+<li>Move the piece and match the picture.
+<p>The <span style="font-family: Courier New,Courier,monospace">move_***_cb()</span> function move the piece to ***. When moving the piece to ***, if there is a piece already, this function returns with no action.</p>
+<pre class="prettyprint">
+int move_puzzle_to_right(void *data)
+{
+&nbsp;&nbsp;&nbsp;retv_if(!data, 0); 
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;int x1, y1, w1, h1; 
+&nbsp;&nbsp;&nbsp;int x2, y2, w2, h2; 
+&nbsp;&nbsp;&nbsp;int white_piece = ad-&gt;white_piece;
+&nbsp;&nbsp;&nbsp;int size = ad-&gt;size;
+&nbsp;&nbsp;&nbsp;int temp;
+&nbsp;&nbsp;&nbsp;// There is a puzzle
+&nbsp;&nbsp;&nbsp;if (!(white_piece%size)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return SAMPLE_APP_ERROR_OK;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_image_load_region_get(ad-&gt;piece[white_piece -1], &amp;x1, &amp;y1, &amp;w1, &amp;h1);
+&nbsp;&nbsp;&nbsp;evas_object_image_load_region_get(ad-&gt;piece[white_piece], &amp;x2, &amp;y2, &amp;w2, &amp;h2);
+&nbsp;&nbsp;&nbsp;// Exchange the position
+&nbsp;&nbsp;&nbsp;evas_object_image_load_region_set(ad-&gt;piece[white_piece - 1], x2, y2, w2, h2);
+&nbsp;&nbsp;&nbsp;evas_object_image_load_region_set(ad-&gt;piece[white_piece], x1, y1, w1, h1);
+
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;piece[white_piece], ad-&gt;r, ad-&gt;g, ad-&gt;b, ad-&gt;a);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(ad-&gt;piece[white_piece - 1], ad-&gt;r, ad-&gt;g, ad-&gt;b, 0); 
+
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;piece[white_piece]);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;piece[white_piece - 1]);
+
+&nbsp;&nbsp;&nbsp;temp = ad-&gt;piece_pos[white_piece];
+&nbsp;&nbsp;&nbsp;ad-&gt;piece_pos[white_piece] = ad-&gt;piece_pos[white_piece - 1]; 
+&nbsp;&nbsp;&nbsp;ad-&gt;piece_pos[white_piece - 1] = temp;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;white_piece = white_piece - 1;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;piece_pos[ad-&gt;white_piece] == size*size-1 &amp;&amp; ad-&gt;start == 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;puzzle_correct_cb(ad);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return 1;
+}
+</pre>
+</li>
+<li>Complete the puzzle. 
+<p>If the image object is located in its original position, the <span style="font-family: Courier New,Courier,monospace">puzzle_correct_cb()</span> function is called to show the original picture of the puzzle.</p>
+<pre class="prettyprint">
+void puzzle_correct_cb(appdata_s *data)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;for (i = 0; i &lt; ad-&gt;size * ad-&gt;size; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;piece_pos[i]!=i) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Make a popup for congraturations
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(win);
+&nbsp;&nbsp;&nbsp;elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Correct!!&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(popup);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ad-&gt;puzzle_edj_path, &quot;popup_image_list_layout&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, 0, 0);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, 0, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, layout);
+
+&nbsp;&nbsp;&nbsp;// Show the original picture of the puzzle
+&nbsp;&nbsp;&nbsp;img = elm_image_add(layout);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(img, ad-&gt;correct_img_path, NULL);
+&nbsp;&nbsp;&nbsp;elm_image_aspect_fixed_set(img, EINA_FALSE);
+
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_min_set(img, 400, 400);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_max_set(img, 400, 400);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;elm.swallow.content&quot;, img);
+
+&nbsp;&nbsp;&nbsp;// Make a popup delete button
+&nbsp;&nbsp;&nbsp;btn = elm_button_add(popup);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(btn, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(btn, &quot;OK&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(popup, &quot;button1&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, con_button_clicked_cb, popup);
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;start = 0;
+}
+</pre>
+</li>
+<li>Select the level of the puzzle. 
+
+<p class="figure">Figure: Puzzle levels</p>
+<p align="center"><img src="../images/puzzle.png" alt="Puzzle levels" /></p>
+
+<p>The user can select the level of the puzzle. Select a 4X4 puzzle or a 5X5 puzzle. To change the number of pieces, the <span style="font-family: Courier New,Courier,monospace">puzzle_change()</span> function is called. It works in the same way as the <span style="font-family: Courier New,Courier,monospace">puzzle_create()</span> function, but the value of <span style="font-family: Courier New,Courier,monospace">PIECE</span> is different.</p>
+<pre class="prettyprint">
+void _level_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+
+&nbsp;&nbsp;&nbsp;popup = evas_object_data_get(ad-&gt;win, &quot;popup&quot;);
+
+&nbsp;&nbsp;&nbsp;if (elm_check_state_get(ad-&gt;check1) == 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!puzzle_change(ad, 4))
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;Fail puzzle change&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}   
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (elm_check_state_get(ad-&gt;check2) == 1) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!puzzle_change(ad, 5)) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGE(&quot;Fail puzzle change&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_del(popup);
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm
new file mode 100644 (file)
index 0000000..cff1496
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/quickpanel_sd_mn.htm
@@ -0,0 +1,612 @@
+<!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>Quickpanel 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>Quickpanel Sample Overview</h1>
+<p>The Quickpanel sample application demonstrates how to create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.</p>
+<p>The following figure illustrates the application screens.</p>
+
+<p class="figure">Figure: Quickpanel screens</p>
+<p align="center">
+ <img alt="Quickpanel screens" src="../images/quickpanel_1.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_2.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_3.png"/> <img alt="Quickpanel screens" src="../images/quickpanel_4.png"/>
+</p>
+
+<p>To make a quickpanel window visible, the user has to drag it from the upper section of the device's screen to the bottom. Three buttons appear at the top of the screen. With the buttons, the user can control the following device functionalities:</p>
+<ul>
+ <li>Light: allows to control device's LED settings,</li>
+ <li>Wi-Fi: allows to activate and deactivate Wi-Fi internal circuit,</li>
+ <li>Sound: allows to switch the device into silent mode.</li>
+</ul>
+<p>Tap the icon to switch the setting on or off.</p>
+<p>In the middle of the screen there is a list of currently pending notifications. Tap any of them to dismiss the notification and launch the application to see its details.</p>
+
+<p>The following figure illustrates the quickpanel layout structure.</p>
+
+<p class="figure">Figure: Quickpanel layout structure</p>
+<p align="center">
+ <img alt="Quickpanel layout structure" src="../images/quickpanel_0.png"/>
+</p>
+
+<h2>Prerequisites</h2>
+<p>This application requires the following privileges to be set:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.get</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/volume.set</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/network.set</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/bluetooth</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/led</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/privilege/notification</span></li>
+</ul>
+<p>You are able to run the application only on devices supporting the following features:</p>
+
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/network.wifi</span></li>
+ <li><span style="font-family: Courier New,Courier,monospace;">http://tizen.org/feature/led</span></li>
+</ul>
+
+<h2>Implementation</h2>
+
+<p>The Quickpanel application follows the MVC pattern. Aside from standard native application module with the <span style="font-family: Courier New,Courier,monospace">main()</span> function, it consists of:</p>
+<ul>
+ <li><span style="font-family: Courier New,Courier,monospace;">controler.c</span> module</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">light.c</span>, <span style="font-family: Courier New,Courier,monospace;">notifications.c</span>, <span style="font-family: Courier New,Courier,monospace;">sound.c</span>, and <span style="font-family: Courier New,Courier,monospace;">wifi.c</span> modules serving as the model</li>
+ <li><span style="font-family: Courier New,Courier,monospace;">main_view.c</span>, <span style="font-family: Courier New,Courier,monospace;">control_panel.c</span>, and <span style="font-family: Courier New,Courier,monospace;">noti_list.c</span> modules serving as the view</li>
+</ul>
+
+
+<h3>Controller</h3>
+
+<p>The application is initialized with the <span style="font-family: Courier New,Courier,monospace">controler_init()</span> function. This function creates the main view and initializes the rest of the modules. It also adds callbacks to the main view for control panel item click and notification list item click. This is how information about user interactions is delivered to the controller module.</p>
+<pre class="prettyprint">
+Eina_Bool
+controler_init(void)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_DEVICE_NAME, &amp;device_name);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = system_settings_get_value_string(SYSTEM_SETTINGS_KEY_WALLPAPER_LOCK_SCREEN, &amp;wallpaper);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;result = main_view_create_base_gui(device_name);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;main_view_add_callbacks(__ui_state_changed_cb, __noti_clicked_cb);
+
+&nbsp;&nbsp;&nbsp;__init_modules();
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">__init_modules()</span> function initializes Wi-Fi, light, sound and notification modules. It also checks states of the modules and updates the main view to reflect them.</p>
+<p>Each module initialization procedure takes one or more callbacks as parameters. These callbacks are used to inform the controller module about the changes in respective modules. This is essential because these settings can also be changed from outside of the Quickpanel application and the view has to be updated accordingly.</p>
+<pre class="prettyprint">
+static void
+__init_modules(void)
+{
+&nbsp;&nbsp;&nbsp;bool result = false;
+
+&nbsp;&nbsp;&nbsp;result = wifi_init(__wifi_activated_cb, __wifi_deactivated_cb, __wifi_device_state_changed_cb);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (wifi_is_active())
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_view_update(ICON_TYPE_WIFI, ICON_ACTION_ACTIVATION);
+
+&nbsp;&nbsp;&nbsp;result = light_init(__light_state_change_cb);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (light_is_active())
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_view_update(ICON_TYPE_LIGHT, ICON_ACTION_ACTIVATION);
+
+&nbsp;&nbsp;&nbsp;result = sound_init(__sound_state_change_cb);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if (sound_is_active())
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;main_view_update(ICON_TYPE_SOUND, ICON_ACTION_ACTIVATION);
+
+&nbsp;&nbsp;&nbsp;result = notifications_init(__noti_list_update_cb);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+}
+</pre>
+
+<h3>Model</h3>
+
+<ul>
+<li>Light:
+<p>Currently the LED API does not deliver any interface to receive information about the light state change, so the light module is implemented using a polling timer callback to deliver this information to the controller module.</p>
+<pre class="prettyprint">
+bool
+light_init(light_state_change_cb state_change_cb)
+
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;light_data.change_cb = state_change_cb;
+
+&nbsp;&nbsp;&nbsp;if(light_data.change_cb) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;light_data.poll_timer = ecore_timer_add(LIGHT_POLL_INTERVAL_SEC, __light_poll_timeout_cb, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(!light_data.poll_timer) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;light_data.change_cb = false;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static Eina_Bool
+__light_poll_timeout_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;if (light_is_active()) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;light_data.change_cb(true);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;light_data.change_cb(false);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+</pre>
+</li>
+<li>Sound:
+<p>In case of the Volume API, use the <span style="font-family: Courier New,Courier,monospace">sound_manager_set_volume_changed_cb()</span> function. The sound module uses this interface to communicate changes to the controller.</p>
+<p>The Quickpanel sample application takes into account changes in three sound types (as it serves as mute/unmute application):</p>
+<ul>
+ <li>System: volume level of system sounds such as key taps</li>
+ <li>Notification: volume level of notification sounds (such as incoming SMS or email)</li>
+ <li>Ringtone: volume level of an incoming call</li>
+</ul>
+<p>When the user wants to mute the phone, the application stores the initial volumes of these types and sets the current values to 0. The preserved volume values are restored when the user unmutes the phone.</p>
+
+<pre class="prettyprint">
+bool
+sound_init(sound_state_change_cb change_cb)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;result = sound_manager_set_volume_changed_cb(__volume_changed_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;sound_data.change_cb = change_cb;
+
+&nbsp;&nbsp;&nbsp;sound_data.system_sound_level = __get_sound_level(SOUND_TYPE_SYSTEM);
+&nbsp;&nbsp;&nbsp;sound_data.notification_sound_level = __get_sound_level(SOUND_TYPE_NOTIFICATION);
+&nbsp;&nbsp;&nbsp;sound_data.ringtone_sound_level = __get_sound_level(SOUND_TYPE_RINGTONE);
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+
+static void
+__volume_changed_cb(sound_type_e type, unsigned int volume, void *user_data)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;if (sound_data.muting_progress &gt; MUTING_PROGRESS_NONE &amp;&amp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.muting_progress &lt; MUTING_PROGRESS_MUTING_COMPLETE &amp;&amp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;volume == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.muting_progress++;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (sound_data.muting_progress >= MUTING_PROGRESS_MUTING_COMPLETE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.muting_progress = MUTING_PROGRESS_NONE;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (sound_data.change_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.change_cb(sound_is_active());
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;switch (type) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case SOUND_TYPE_SYSTEM:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.system_sound_level = (int)volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case SOUND_TYPE_NOTIFICATION:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.notification_sound_level = (int)volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case SOUND_TYPE_RINGTONE:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.ringtone_sound_level = (int)volume;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default:
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;if (sound_data.change_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sound_data.change_cb(sound_is_active());
+}
+</pre>
+</li>
+
+<li>Wi-Fi:
+<p>To use the Wi-Fi API functions, call the <span style="font-family: Courier New,Courier,monospace">wifi_initialize()</span> function first. A callback is registered for Wi-Fi state changes using the <span style="font-family: Courier New,Courier,monospace">wifi_set_device_state_changed_cb()</span> function. The registered callback function informs the controller module about Wi-Fi circuit state changes.</p>
+<pre class="prettyprint">
+bool
+wifi_init(wifi_activated_cb act_cb, wifi_deactivated_cb deact_cb, wifi_device_state_changed_cb dev_state_change)
+{
+&nbsp;&nbsp;&nbsp;int ret = WIFI_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;ret = wifi_initialize();
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ret = wifi_set_device_state_changed_cb(dev_state_change, NULL);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if(act_cb &amp;&amp; !wifi_data.act_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_data.act_cb = act_cb;
+
+&nbsp;&nbsp;&nbsp;if(deact_cb &amp;&amp; !wifi_data.deact_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_data.deact_cb = deact_cb;
+
+&nbsp;&nbsp;&nbsp;return true;
+}
+</pre>
+
+<p>Switching the Wi-Fi circuit on or off is an asynchronous operation, so the <span style="font-family: Courier New,Courier,monospace">act_cb()</span> and <span style="font-family: Courier New,Courier,monospace">deact_cb()</span> functions have to be used to inform the controller module if the operation was successful.</p>
+<pre class="prettyprint">
+void
+wifi_set_on(void)
+{
+&nbsp;&nbsp;&nbsp;int res = WIFI_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;if (!wifi_is_active()) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res = wifi_activate(wifi_data.act_cb, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (wifi_data.act_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_data.act_cb(WIFI_ERROR_NONE, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+
+void
+wifi_set_off(void)
+{
+&nbsp;&nbsp;&nbsp;int res = WIFI_ERROR_NONE;
+
+&nbsp;&nbsp;&nbsp;if (wifi_is_active()) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res = wifi_deactivate(wifi_data.deact_cb, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (wifi_data.deact_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;wifi_data.deact_cb(WIFI_ERROR_NONE, NULL);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+
+<li>Notifications:
+<p>Notifications module implementation is timer based. The code periodically checks whether any system notifications exist, and if so, puts them into the notifications list.</p>
+<p>Notifications initialization code takes a single parameter, the controller callback function, to communicate when the notifications list needs to be updated.</p>
+<pre class="prettyprint">
+bool
+notifications_init(noti_list_update_cb update_cb)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+&nbsp;&nbsp;&nbsp;noti_data.notifications = eina_inarray_new(sizeof(notification_item_t), NOTI_ARRAY_STEP);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;noti_data.change_cb = update_cb;
+
+&nbsp;&nbsp;&nbsp;if (noti_data.change_cb) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti_data.poll_timer = ecore_timer_add(NOTI_POLL_INTERVAL_SEC, __noti_poll_timeout_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+
+<p>The polling uses the <span style="font-family: Courier New,Courier,monospace">notification_get_list()</span> function to retrieve all notifications. It then saves this information in an array of <span style="font-family: Courier New,Courier,monospace">notification_item_t</span> objects.</p>
+<p>There are two notificaton types, <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_NOTI</span> and <span style="font-family: Courier New,Courier,monospace">NOTIFICATION_TYPE_ONGOING</span>. Each time new lists are retrieved, the old ones are freed and all notification handles are invalidated. The controller module is informed about a new notification using the <span style="font-family: Courier New,Courier,monospace">noti_data.change_cb()</span>function.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+__noti_poll_timeout_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;__free_array_elements();
+&nbsp;&nbsp;&nbsp;__free_temporary_lists();
+
+&nbsp;&nbsp;&nbsp;ret = notification_get_list(NOTIFICATION_TYPE_NOTI, -1, &amp;list);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;noti_data.noti_list_h = list;
+&nbsp;&nbsp;&nbsp;__process_list(list);
+
+&nbsp;&nbsp;&nbsp;ret = notification_get_list(NOTIFICATION_TYPE_ONGOING, -1, &amp;list);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;noti_data.ongoing_list_h = list;
+&nbsp;&nbsp;&nbsp;__process_list(list);
+
+&nbsp;&nbsp;&nbsp;if (noti_data.change_cb)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;noti_data.change_cb(noti_data.notifications);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}
+</pre>
+</li>
+</ul>
+
+<h3>View</h3>
+
+<p>Main view initialization part takes place with the <span style="font-family: Courier New,Courier,monospace">main_view_create_base_gui()</span> function. It creates the three view elements: a quickpanel window, the notifications list, and the control panel.</p>
+<pre class="prettyprint">
+Eina_Bool
+main_view_create_base_gui(char *device_name)
+{
+&nbsp;&nbsp;&nbsp;vds.win = create_win();
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;if(!__quickpanel_setup())
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return EINA_FALSE;
+
+&nbsp;&nbsp;&nbsp;vds.layout = create_layout(device_name);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;vds.noti_list = noti_list_create(vds.layout);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_layout_content_set(vds.layout, PART_CONTENT, vds.noti_list);
+
+&nbsp;&nbsp;&nbsp;vds.toolbar = control_panel_create(vds.layout, __light_click_cb, __wifi_click_cb, __sound_click_cb);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>The quickpanel window type is at first created as a standard window.</p>
+<pre class="prettyprint">
+static Evas_Object *
+create_win(void)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bg = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;bg = elm_bg_add(win);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(win, bg);
+&nbsp;&nbsp;&nbsp;evas_object_color_set(bg, QP_BG_COLOR_R, QP_BG_COLOR_G, QP_BG_COLOR_B, 255);
+&nbsp;&nbsp;&nbsp;evas_object_show(bg);
+
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(win, ELM_WIN_INDICATOR_HIDE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_alpha_set(win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;// Window rotation support code
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(win, EEXT_CALLBACK_BACK, win_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(win, &quot;rotation,changed&quot;, __ui_rotation_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(win);
+
+&nbsp;&nbsp;&nbsp;return win;
+}
+</pre>
+
+<p>Next, the window is given special properties and class with the <span style="font-family: Courier New,Courier,monospace">__quickpanel_setup()</span> function.</p>
+
+<pre class="prettyprint">
+static Eina_Bool
+__quickpanel_setup(void)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;Ecore_X_Window xwin = 0;
+&nbsp;&nbsp;&nbsp;elm_win_quickpanel_set(vds.win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_quickpanel_priority_major_set(vds.win, 300);
+
+&nbsp;&nbsp;&nbsp;xwin = elm_win_xwindow_get(vds.win);
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;ecore_x_icccm_name_class_set(xwin, &quot;QUICKPANEL&quot;, &quot;QUICKPANEL&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_win_screen_size_get(vds.win, NULL, NULL, &amp;w, &amp;h);
+
+&nbsp;&nbsp;&nbsp;vds.win_height = h;
+&nbsp;&nbsp;&nbsp;vds.win_width = w;
+
+&nbsp;&nbsp;&nbsp;set_ui_geometry_info();
+&nbsp;&nbsp;&nbsp;set_ui_handler_info();
+&nbsp;&nbsp;&nbsp;ecore_idler_add(ui_refresh_idler_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;return EINA_TRUE;
+}
+</pre>
+
+<p>Window geometry is constantly monitored with the <span style="font-family: Courier New,Courier,monospace">ui_refresh_idler_cb()</span> and <span style="font-family: Courier New,Courier,monospace">__ui_rotation_cb()</span> callback functions. This information is acquired and passed to the underlying X Window System using the <span style="font-family: Courier New,Courier,monospace">set_ui_geometry_info()</span> and <span style="font-family: Courier New,Courier,monospace">set_ui_handler_info()</span> helper functions.</p>
+<pre class="prettyprint">
+static void
+set_ui_geometry_info(void)
+{
+&nbsp;&nbsp;&nbsp;int max_height_window = 0;
+&nbsp;&nbsp;&nbsp;Evas_Coord win_y = 0;
+
+&nbsp;&nbsp;&nbsp;if (vds.angle == 90 || vds.angle == 270) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_height_window = vds.win_width;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max_height_window = vds.win_height;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(vds.win, NULL, &amp;win_y, NULL, NULL);
+
+&nbsp;&nbsp;&nbsp;vds.gl_distance_from_top = win_y - ELM_SCALE_SIZE(QP_HANDLE_H);
+&nbsp;&nbsp;&nbsp;vds.gl_distance_to_bottom = ELM_SCALE_SIZE(QP_HANDLE_H);
+&nbsp;&nbsp;&nbsp;vds.gl_limit_height = max_height_window - vds.gl_distance_from_top - vds.gl_distance_to_bottom;
+}
+ 
+static void
+set_ui_handler_info(void)
+{
+&nbsp;&nbsp;&nbsp;int contents_height = 0;
+
+&nbsp;&nbsp;&nbsp;contents_height = vds.gl_distance_from_top + vds.gl_limit_height;
+
+&nbsp;&nbsp;&nbsp;set_ui_handler_input_region(contents_height);
+&nbsp;&nbsp;&nbsp;set_ui_handler_content_region(contents_height);
+}
+ 
+static void
+set_ui_handler_input_region(int contents_height)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;xwin = elm_win_xwindow_get(vds.win);
+
+&nbsp;&nbsp;&nbsp;switch (vds.angle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_input_region = set_window_region(0, contents_height,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 90:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_input_region = set_window_region(contents_height, 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 180:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_input_region = set_window_region(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, vds.win_height - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vds.win_width, ELM_SCALE_SIZE(QP_HANDLE_H));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 270:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_input_region = set_window_region(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vds.win_width - contents_height - ELM_SCALE_SIZE(QP_HANDLE_H),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, ELM_SCALE_SIZE(QP_HANDLE_H), vds.win_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;atom_window_input_region = ecore_x_atom_get(STR_ATOM_WINDOW_INPUT_REGION);
+&nbsp;&nbsp;&nbsp;ecore_x_window_prop_card32_set(xwin, atom_window_input_region, window_input_region, 4);
+
+&nbsp;&nbsp;&nbsp;free(window_input_region);
+}
+ 
+static void
+set_ui_handler_content_region(int contents_height)
+{
+&nbsp;&nbsp;&nbsp;// Declare the variables
+
+&nbsp;&nbsp;&nbsp;xwin = elm_win_xwindow_get(vds.win);
+
+&nbsp;&nbsp;&nbsp;switch (vds.angle) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 0:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_contents_region = set_window_region(0, 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vds.win_width, contents_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 90:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_contents_region = set_window_region(0, 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contents_height, vds.win_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 180:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_contents_region = set_window_region(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0, vds.win_height - contents_height, vds.win_width, contents_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case 270:
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window_contents_region = set_window_region(
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vds.win_width - contents_height, 0,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contents_height, vds.win_height);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Error handling
+
+&nbsp;&nbsp;&nbsp;atom_window_contents_region = ecore_x_atom_get(STR_ATOM_WINDOW_CONTENTS_REGION);
+&nbsp;&nbsp;&nbsp;ecore_x_window_prop_card32_set(xwin, atom_window_contents_region, window_contents_region, 4);
+
+&nbsp;&nbsp;&nbsp;free(window_contents_region);
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
index c56a082..5045557 100644 (file)
--- a/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
+++ b/org.tizen.sampledescriptions/html/mobile_n/sd_mn.htm
@@ -42,6 +42,14 @@
      <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="application_control_sd_mn.htm">Application Control</a></td>
+     <td>Demonstrates how you can search for applications supporting specific classes of operations and run them using the operation contexts.</td>
+       </tr>
+       <tr>
+     <td><a href="bluetoothchat_sd_mn.htm">Bluetooth Chat</a></td>
+     <td>Demonstrates how you can send and receive data between 2 devices.</td>
+       </tr>
     <tr>
      <td><a href="bundle_sd_mn.htm">Bundle</a></td>
      <td>Demonstrates how you can manipulate bundle objects.</td>
@@ -122,6 +130,14 @@
      <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="puzzle_sd_mn.htm">Puzzle</a></td>
+     <td>Demonstrates how you can implement a complex view using recursive composition of the standard EFL components.</td>
+    </tr>
+       <tr>
+     <td><a href="quickpanel_sd_mn.htm">Quickpanel</a></td>
+    <td>Demonstrates how you can create a custom quickpanel window and use volume, LED, and Wi-Fi APIs to acquire and set related device settings.</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>
@@ -144,6 +160,18 @@
      <td>Demonstrates how you can implement a simple Homescreen-like application.</td>
     </tr>
        <tr>
+     <td><a href="sketch_sd_mn.htm">Sketch</a></td>
+     <td>Demonstrates how you can implement an image view and change the color using raw image data of the standard EFL components.</td>
+    </tr>
+       <tr>
+     <td><a href="stopwatch_sd_mn.htm">Stopwatch</a></td>
+     <td>Demonstrates how you can implement a complex view using recursive composition of the standard EFL UI components and containers in a component hierarchy.</td>
+    </tr>
+       <tr>
+     <td><a href="systeminfo_sd_mn.htm">System Info</a></td>
+     <td>Demonstrates how you how to get system information.</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>

diff --git a/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
new file mode 100644 (file)
index 0000000..b067472
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/sketch_sd_mn.htm
@@ -0,0 +1,754 @@
+<!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>Sketch 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>Sketch Sample Overview</h1>
+
+<p>The Sketch application demonstrates how to implement an image view and change the color using raw image data of the standard EFL components.</p>
+<p>The following figure illustrates the main screen of the Sketch.</p>
+
+<p class="figure">Figure: Sketch main screen</p>
+<p align="center"><img src="../images/sketch1.png" alt="Sketch main screen" /></p>
+
+
+<p>This sample consist of implementing the layout, creating an image, adding the palette, pen, and eraser, saving the image, and using popup menus.</p>
+
+<h2 id="implementation" name="implementation">Implementation</h2>
+
+<h3>Layout</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace;">layout_create()</span> function makes the application frame, move buttons, icons, and some icons linked to each callback function. This function creates a popup component using the <span style="font-family: Courier New,Courier,monospace;">elm_ popup_add()</span> function.</p>
+<pre class="prettyprint">
+static int _layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;// Image
+&nbsp;&nbsp;&nbsp;img = image_create(ad);
+&nbsp;&nbsp;&nbsp;retv_if(!img, TIZEN_ERROR_OUT_OF_MEMORY);
+
+&nbsp;&nbsp;&nbsp;// Clear button
+&nbsp;&nbsp;&nbsp;btn = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(btn, IMG_DIR&quot;clear.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;clear&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, eraser_clear_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Palette
+&nbsp;&nbsp;&nbsp;for(i =0; i&lt;4; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;temp_color[i] = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;save_color[i] = 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ad-&gt;color_pos = 13;
+&nbsp;&nbsp;&nbsp;btn = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;palette&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(btn, IMG_DIR&quot;color.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, palette_select_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Eraser
+&nbsp;&nbsp;&nbsp;ad-&gt;eraser = 0;
+&nbsp;&nbsp;&nbsp;ad-&gt;eraser_size = 5;
+&nbsp;&nbsp;&nbsp;btn = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(btn, IMG_DIR&quot;eraser.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;eraser&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, eraser_select_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Pen
+&nbsp;&nbsp;&nbsp;ad-&gt;pen_size = 5;
+&nbsp;&nbsp;&nbsp;ad-&gt;a = 255;
+&nbsp;&nbsp;&nbsp;ad-&gt;r = 0;
+&nbsp;&nbsp;&nbsp;ad-&gt;g = 0;
+&nbsp;&nbsp;&nbsp;ad-&gt;b = 0;
+&nbsp;&nbsp;&nbsp;btn = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(btn, IMG_DIR&quot;pen.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;pen&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, pen_select_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Save
+&nbsp;&nbsp;&nbsp;btn = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;retv_if(!btn, TIZEN_ERROR_OUT_OF_MEMORY);
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(btn, IMG_DIR&quot;save.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;save&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(btn, EVAS_CALLBACK_MOUSE_UP, save_select_cb, ad);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;layout);
+
+&nbsp;&nbsp;&nbsp;return TIZEN_ERROR_NONE;
+}
+</pre>
+
+<h3>Image</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">image_create()</span> function creates the white background image which consists of the arrays that each mean raw pixel data. To use the raw data as an <span style="font-family: Courier New,Courier,monospace;">evas_object_image</span>, the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_data_set()</span> function is used.</p>
+<pre class="prettyprint">
+Evas_Object *image_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *img = NULL;
+&nbsp;&nbsp;&nbsp;int pixel;
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;// image
+&nbsp;&nbsp;&nbsp;ad-&gt;canvas = malloc(4*(ad-&gt;img_w)*(ad-&gt;img_h));
+&nbsp;&nbsp;&nbsp;pixel = 255&lt;&lt;24 | 255&lt;&lt;16 | 255&lt;&lt;8 | 255;
+&nbsp;&nbsp;&nbsp;memset(ad-&gt;canvas, pixel, 4*(ad-&gt;img_w)*(ad-&gt;img_h));
+
+&nbsp;&nbsp;&nbsp;img = evas_object_image_filled_add(ad-&gt;e);
+&nbsp;&nbsp;&nbsp;if (!img) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;Fail to filled image&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;free(ad-&gt;canvas);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_image_size_set(img, ad-&gt;img_w, ad-&gt;img_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_alpha_set(img, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_image_fill_set(img, 0, 0, ad-&gt;img_w, ad-&gt;img_h);
+&nbsp;&nbsp;&nbsp;evas_object_image_data_set(img, ad-&gt;canvas);
+
+&nbsp;&nbsp;&nbsp;evas_object_move(img, 5, (ad-&gt;img_h*0.3));
+&nbsp;&nbsp;&nbsp;evas_object_resize(img, ad-&gt;img_w, ad-&gt;img_h);
+
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(img, EVAS_CALLBACK_MOUSE_DOWN, _move_start_cb, ad);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(img, EVAS_CALLBACK_MOUSE_UP, _move_end_cb, ad);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+&nbsp;&nbsp;&nbsp;ad-&gt;img = img;
+
+&nbsp;&nbsp;&nbsp;return img;
+}
+</pre>
+
+<p>When the move event callback in image object is called, the color of the moved pixel is changed by the <span style="font-family: Courier New,Courier,monospace;">_draw_cb()</span> and <span style="font-family: Courier New,Courier,monospace;">_move_cb()</span> functions.</p>
+<ul>
+
+<li> The <span style="font-family: Courier New,Courier,monospace;">_draw_cb()</span> function changes the color in the raw image data:
+<pre class="prettyprint">
+static void _draw_cb(int x, int y, void *data, Evas_Object* obj)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object* img = NULL;
+&nbsp;&nbsp;&nbsp;unsigned int pixel;
+&nbsp;&nbsp;&nbsp;int i, j, draw_size;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+&nbsp;&nbsp;&nbsp;img = obj;
+&nbsp;&nbsp;&nbsp;pixel =  ad-&gt;a&lt;&lt;24 | ad-&gt;r&lt;&lt;16 | ad-&gt;g&lt;&lt;8 | ad-&gt;b;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;eraser) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_size = ad-&gt;eraser_size;
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;draw_size = ad-&gt;pen_size;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;for (i=draw_size*-1;i&lt;draw_size+1;i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (j=draw_size*-1;j&lt;draw_size+1;j++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (x - (ad-&gt;canvas_x) + i &gt;= ad-&gt;img_w || x - (ad-&gt;canvas_x) + i &lt;= 0 || y - (ad-&gt;canvas_y) + j &gt;= ad-&gt;img_h || y - (ad-&gt;canvas_y) + j &lt;=0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;canvas[ad-&gt;img_w * (y - (ad-&gt;canvas_y) + j) + (x - ad-&gt;canvas_x) + i] = pixel;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(img, 0, 0, ad-&gt;img_w, ad-&gt;img_h);
+&nbsp;&nbsp;&nbsp;evas_object_show(img);
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">_move_cb()</span> function draws the line using Bresenham algorithms:
+<pre class="prettyprint">
+static void _move_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+&nbsp;&nbsp;&nbsp;ret_if(!obj);
+
+&nbsp;&nbsp;&nbsp;appdata_s* ad = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *img = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Event_Mouse_Move *mouse = NULL;
+
+&nbsp;&nbsp;&nbsp;// Draw
+&nbsp;&nbsp;&nbsp;int dx, dy;
+&nbsp;&nbsp;&nbsp;int p_value;
+&nbsp;&nbsp;&nbsp;int inc_2dy, inc_2dydx;
+&nbsp;&nbsp;&nbsp;int inc_value;
+&nbsp;&nbsp;&nbsp;int ndx;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+&nbsp;&nbsp;&nbsp;img = obj;
+&nbsp;&nbsp;&nbsp;mouse = event_info;
+
+&nbsp;&nbsp;&nbsp;evas_object_geometry_get(img, &amp;ad-&gt;canvas_x, &amp;ad-&gt;canvas_y, NULL, NULL);
+
+
+&nbsp;&nbsp;&nbsp;if (0 == ad-&gt;prev_x) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x = mouse-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y = mouse-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ad-&gt;prev_x, ad-&gt;prev_y, ad, img);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_x = mouse-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_y = mouse-&gt;cur.canvas.y;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = abs(ad-&gt;cur_x - ad-&gt;prev_x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = abs(ad-&gt;cur_y - ad-&gt;prev_y);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 == ad-&gt;prev_x) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x = mouse-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y = mouse-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ad-&gt;prev_x, ad-&gt;prev_y, ad, img);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_x = mouse-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_y = mouse-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx = abs(ad-&gt;cur_x - ad-&gt;prev_x);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dy = abs(ad-&gt;cur_y - ad-&gt;prev_y);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (dy &lt;= dx) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_2dy = 2*dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_2dydx = 2 *(dy - dx);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;cur_x &lt; ad-&gt;prev_x) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ndx = ad-&gt;prev_x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x = ad-&gt;cur_x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_x = ndx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ndx = ad-&gt;prev_y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y = ad-&gt;cur_y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_y = ndx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;prev_y &lt; ad-&gt;cur_y) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_value = 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_value = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ad-&gt;prev_x, ad-&gt;prev_y, ad, img);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value = 2 * dy - dx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (ndx = ad-&gt;prev_x; ndx&lt; ad-&gt;cur_x; ndx++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 &gt; p_value) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value += inc_2dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value += inc_2dydx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y += inc_value;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ndx, ad-&gt;prev_y, ad, img);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_2dy = 2*dx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_2dydx = 2* (dx-dy);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;cur_y &lt; ad-&gt;prev_y) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ndx = ad-&gt;prev_y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y = ad-&gt;cur_y;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_y = ndx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ndx = ad-&gt;prev_x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x = ad-&gt;cur_x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;cur_x = ndx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;prev_x &lt; ad-&gt;cur_x) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_value = 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inc_value = -1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ad-&gt;prev_x, ad-&gt;prev_y, ad, img);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value = 2 * dx -dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (ndx = ad-&gt;prev_y; ndx &lt; ad-&gt;cur_y; ndx++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (0 &gt; p_value) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value += inc_2dy;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p_value += inc_2dydx;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x += inc_value;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_draw_cb(ad-&gt;prev_x, ndx, ad, img);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_x = mouse-&gt;cur.canvas.x;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;prev_y = mouse-&gt;cur.canvas.y;
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+</li>
+</ul>
+
+<h3>Palette</h3>
+
+<p class="figure">Figure: Palette screen</p>
+<p align="center"><img src="../images/sketch2.png" alt="Palette screen" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">create_colorselector()</span> function is called when the palette icon is clicked. This function controls the pen's and background's color using the colorselector component that is created with the <span style="font-family: Courier New,Courier,monospace;">elm_colorselector_add()</span> function.</p>
+<pre class="prettyprint">
+static Evas_Object *_create_colorselector(Evas_Object *parent, appdata_s *data)
+{
+&nbsp;&nbsp;&nbsp;retv_if(!data, NULL);
+
+&nbsp;&nbsp;&nbsp;// Add a color palette component
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *colorselector = NULL;
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *it = NULL;
+&nbsp;&nbsp;&nbsp;Eina_List *color_list = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;colorselector = elm_colorselector_add(parent);
+&nbsp;&nbsp;&nbsp;retv_if(!colorselector, NULL);
+&nbsp;&nbsp;&nbsp;elm_colorselector_mode_set(colorselector, ELM_COLORSELECTOR_PALETTE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_fill_set(colorselector, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(colorselector, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;color_list = elm_colorselector_palette_items_get(colorselector);
+&nbsp;&nbsp;&nbsp;it = eina_list_nth(color_list, ad-&gt;color_pos);
+
+&nbsp;&nbsp;&nbsp;elm_object_item_signal_emit(it, &quot;elm,state,selected&quot;, &quot;elm&quot;);
+
+&nbsp;&nbsp;&nbsp;return colorselector;
+}
+
+static Evas_Object *_create_colorselector_layout(Evas_Object *parent, appdata_s *data)
+{
+&nbsp;&nbsp;&nbsp;retv_if(!parent, NULL);
+&nbsp;&nbsp;&nbsp;retv_if(!data, NULL);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *colorselector = NULL;
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(parent);
+&nbsp;&nbsp;&nbsp;retv_if(!layout, NULL);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ELM_DEMO_EDJ, &quot;colorselector_popup_layout&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(layout, 0, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(parent, layout);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+
+&nbsp;&nbsp;&nbsp;colorselector = _create_colorselector(layout, data);
+&nbsp;&nbsp;&nbsp;if (!colorselector) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;fail to create colorselector&quot;);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;colorpalette&quot;, colorselector);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(colorselector, &quot;color,item,selected&quot;, _item_clicked_cb, data);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}
+</pre>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">_palette_button_cb()</span> function is called when <strong>OK</strong> button is clicked. This function changes the color. If the pen checkbox is checked, the pen&#39;s color changes to the clicked color.</p>
+<pre class="prettyprint">
+static void _palette_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+
+&nbsp;&nbsp;&nbsp;int pixel;
+&nbsp;&nbsp;&nbsp;int w, h;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;if (1 == elm_check_state_get(ad-&gt;check1)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pixel = 255&lt;&lt;24 | ad-&gt;temp_color[1]&lt;&lt;16 | ad-&gt;temp_color[2]&lt;&lt;8 | ad-&gt;temp_color[3];
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (h = 0; h&lt; ad-&gt;img_h; h ++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (w = 0; w&lt;ad-&gt;img_w; w++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;canvas[ad-&gt;img_w*h + w] = pixel;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_data_update_add(ad-&gt;img, 0, 0, ad-&gt;img_w, ad-&gt;img_h);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;img);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (1 == elm_check_state_get(ad-&gt;check2)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ad-&gt;eraser) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;save_color[1] = ad-&gt;temp_color[1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;save_color[2] = ad-&gt;temp_color[2];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;save_color[3] = ad-&gt;temp_color[3];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;r = ad-&gt;temp_color[1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;g = ad-&gt;temp_color[2];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;b = ad-&gt;temp_color[3];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;popup = evas_object_data_del(ad-&gt;win,&quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;if (popup) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_del(popup);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre> 
+
+<h3>Pen</h3>
+
+<p class="figure">Figure: Pen screen</p>
+<p align="center"><img alt="Pen screen" src="../images/sketch3.png" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">pen_cb()</span> function is called when the pen icon is clicked. This function controls the pen size from 1 to 10 using the <span style="font-family: Courier New,Courier,monospace;">elm_slider_add()</span> function.</p> 
+<pre class="prettyprint">
+void pen_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;// Popup
+&nbsp;&nbsp;&nbsp;popup = popup_create(ad, &quot;Pen&quot;, _pen_button_cb);
+&nbsp;&nbsp;&nbsp;ret_if(!popup);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(popup);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ELM_DEMO_EDJ, &quot;popup_text_slider_view_layout&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, layout);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = elm_slider_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!slider, ERROR);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(slider, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(slider, &quot;%1.0f&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 1, 10);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, ad-&gt;pen_size);
+
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;slider&quot;, slider);
+&nbsp;&nbsp;&nbsp;ad-&gt;pen_size= elm_slider_value_get(slider);
+
+&nbsp;&nbsp;&nbsp;evas_object_data_set(popup, &quot;slider&quot;, slider);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;win, &quot;popup&quot;, popup);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;evas_object_del(slider);
+&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;popup_destroy(popup);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+<p>Clicking <strong>OK</strong> button calls the <span style="font-family: Courier New,Courier,monospace;">pen_clicked_cb()</span> function and saves the selected value in the slider.</p>
+<pre class="prettyprint">
+static void _pen_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;popup = evas_object_data_del(ad-&gt;win, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;slider = evas_object_data_del(popup, &quot;slider&quot;);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;pen_size= elm_slider_value_get(slider);
+&nbsp;&nbsp;&nbsp;evas_object_del(popup);
+}
+</pre>
+
+
+<h3>Eraser</h3>
+
+<p class="figure">Figure: Eraser screens</p>
+<p align="center"><img src="../images/sketch4.png" alt="Eraser screens" /> <img src="../images/sketch5.png" alt="Eraser screens" /></p>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">eraser_cb()</span> function is called when the eraser icon is clicked. This function controls the eraser size from 1 to 10 using a slider component. The eraser functionality is maintained until the eraser icon is clicked again.</p>
+<pre class="prettyprint">
+static void _eraser_button_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *eraser = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;popup = evas_object_data_del(ad-&gt;win, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;slider = evas_object_data_del(popup, &quot;slider&quot;);
+&nbsp;&nbsp;&nbsp;eraser = evas_object_data_del(slider, &quot;eraser&quot;);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;eraser_size= elm_slider_value_get(slider);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;save_color[1] = ad-&gt;r;
+&nbsp;&nbsp;&nbsp;ad-&gt;save_color[2] = ad-&gt;g;
+&nbsp;&nbsp;&nbsp;ad-&gt;save_color[3] = ad-&gt;b;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;r = 255;
+&nbsp;&nbsp;&nbsp;ad-&gt;g = 255;
+&nbsp;&nbsp;&nbsp;ad-&gt;b = 255;
+&nbsp;&nbsp;&nbsp;ad-&gt;a = 255;
+
+&nbsp;&nbsp;&nbsp;evas_object_image_file_set(eraser, IMG_DIR&quot;eraser2.png&quot;,NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;eraser&quot;, eraser);
+&nbsp;&nbsp;&nbsp;evas_object_show(eraser);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;eraser = 1;
+
+&nbsp;&nbsp;&nbsp;evas_object_del(popup);
+}
+
+void eraser_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *slider = NULL;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;if (ad-&gt;eraser) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;r = ad-&gt;save_color[1];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;g = ad-&gt;save_color[2];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;b = ad-&gt;save_color[3];
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_image_file_set(obj, IMG_DIR&quot;eraser.png&quot;, NULL);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;eraser&quot;, obj);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;evas_object_show(obj);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ad-&gt;eraser = 0;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Popup
+&nbsp;&nbsp;&nbsp;popup = popup_create(ad, &quot;Eraser&quot;, _eraser_button_cb);
+&nbsp;&nbsp;&nbsp;ret_if(!popup);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(popup);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ELM_DEMO_EDJ, &quot;popup_text_slider_view_layout&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(layout, &quot;elm.text.description&quot;, &quot;Size&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, layout);
+
+&nbsp;&nbsp;&nbsp;// Slider
+&nbsp;&nbsp;&nbsp;slider = elm_slider_add(layout);
+&nbsp;&nbsp;&nbsp;goto_if(!slider, ERROR);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_show_set(slider, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(slider, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(slider, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_slider_indicator_format_set(slider, &quot;%1.0f&quot;);
+&nbsp;&nbsp;&nbsp;elm_slider_min_max_set(slider, 1, 10);
+&nbsp;&nbsp;&nbsp;elm_slider_value_set(slider, ad-&gt;eraser_size);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(layout, &quot;slider&quot;, slider);
+&nbsp;&nbsp;&nbsp;ad-&gt;eraser_size= elm_slider_value_get(slider);
+
+&nbsp;&nbsp;&nbsp;evas_object_data_set(slider, &quot;eraser&quot;, obj);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(popup, &quot;slider&quot;, slider);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;win, &quot;popup&quot;, popup);
+
+&nbsp;&nbsp;&nbsp;return;
+
+ERROR:
+&nbsp;&nbsp;&nbsp;evas_object_del(slider);
+&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;popup_destroy(popup);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre> 
+
+<h3>Save</h3>
+
+<p>The <span style="font-family: Courier New,Courier,monospace;">save()</span> function is called when the save icon is clicked. This function saves the image in the <span style="font-family: Courier New,Courier,monospace;">/opt/usr/media/Images/sketch/</span> directory using the <span style="font-family: Courier New,Courier,monospace;">evas_object_image_save()</span> function. If a sketch directory does not exist, it is created by the <span style="font-family: Courier New,Courier,monospace;">mkdir()</span> function.</p>
+<pre class="prettyprint">
+void save_select_cb(void *data, Evas *e, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *btn = NULL;
+
+&nbsp;&nbsp;&nbsp;char *buf = NULL;
+&nbsp;&nbsp;&nbsp;char dir[256] = {0, };
+&nbsp;&nbsp;&nbsp;int i=0;
+
+&nbsp;&nbsp;&nbsp;ad = data;
+
+&nbsp;&nbsp;&nbsp;// Popup
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!popup);
+&nbsp;&nbsp;&nbsp;elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, eext_popup_back_cb, NULL);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, &quot;Save&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(popup);
+&nbsp;&nbsp;&nbsp;goto_if(!layout, ERROR);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ELM_DEMO_EDJ, &quot;popup_text_view_layout&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(popup, layout);
+
+&nbsp;&nbsp;&nbsp;// OK button
+&nbsp;&nbsp;&nbsp;btn = elm_button_add(popup);
+&nbsp;&nbsp;&nbsp;goto_if(!btn, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(btn, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(btn, &quot;OK&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(popup, &quot;button1&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _cancel_clicked_cb, popup);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+
+&nbsp;&nbsp;&nbsp;storage_get_directory(i, STORAGE_DIRECTORY_IMAGES, &amp;buf);
+&nbsp;&nbsp;&nbsp;snprintf(dir, sizeof(dir), &quot;%s%s&quot;, buf, &quot;/sketch&quot;);
+
+&nbsp;&nbsp;&nbsp;if (mkdir(dir, DIR_MODE) &gt; 0)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LOGD(&quot;folder &#39;sketch&#39; is already exists&quot;);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;evas_object_image_save(ad-&gt;img,&quot;/opt/usr/media/Images/sketch/save.jpg&quot;,NULL,&quot;quality=100 compress=0&quot;);
+
+&nbsp;&nbsp;&nbsp;return;
+ERROR:
+&nbsp;&nbsp;&nbsp;evas_object_del(btn);
+&nbsp;&nbsp;&nbsp;evas_object_del(layout);
+&nbsp;&nbsp;&nbsp;popup_destroy(popup);
+}
+</pre>
+
+<h3>Popup</h3> 
+
+<p>All menus in the Sketch application use the popup component.</p>
+<pre class="prettyprint">
+Evas_Object *popup_create(void *data, char *title, void (*_func_cb)(void *, Evas_Object *, void *))
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = data;
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;Evas_Object *popup = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *btn = NULL;
+
+&nbsp;&nbsp;&nbsp;popup = elm_popup_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;retv_if(!popup, NULL);
+
+&nbsp;&nbsp;&nbsp;elm_popup_align_set(popup, ELM_NOTIFY_ALIGN_FILL, 1.0);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(popup, EEXT_CALLBACK_BACK, _popup_destroy, popup);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(popup, &quot;title,text&quot;, title);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(popup, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+
+&nbsp;&nbsp;&nbsp;// OK button
+&nbsp;&nbsp;&nbsp;btn = elm_button_add(popup);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(btn, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(btn, &quot;OK&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(popup, &quot;button1&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _func_cb, ad);
+
+
+&nbsp;&nbsp;&nbsp;// Cancel button
+&nbsp;&nbsp;&nbsp;btn = elm_button_add(popup);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(btn, &quot;popup&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(btn, &quot;Cancel&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(popup, &quot;button&quot;, btn);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(btn, &quot;clicked&quot;, _popup_destroy, popup);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(popup);
+
+&nbsp;&nbsp;&nbsp;return popup;
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
new file mode 100644 (file)
index 0000000..cb0086e
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/stopwatch_sd_mn.htm
@@ -0,0 +1,256 @@
+<!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 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>Stopwatch Sample Overview</h1>
+
+<p>The Stopwatch sample demonstrates how to implement a complex view using recursive composition of the standard EFL UI components and containers in a component hierarchy. It aims to explain how to use Ecore.</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_layout</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_box</span>) for component management inside the view, 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>, <span style="font-family: Courier New,Courier,monospace;">elm_list</span>, and <span style="font-family: Courier New,Courier,monospace;">elm_label</span>) for the content inside the view and Ecore (such as <span style="font-family: Courier New,Courier,monospace;">ecore_thread</span>) for the operating main loop.</p>
+
+<p>The following figure illustrates the main screen of the Stopwatch, the wireframe structure, and the component tree.</p>
+
+  <p class="figure">Figure: Stopwatch screen and structure</p>
+  <p align="center">
+    <img alt="Stopwatch screen" src="../images/stopwatch_screenshot.png" /></p>
+       <p align="center">
+       <img alt="Stopwatch structure" src="../images/stopwatch_structure.png" /> <img alt="Stopwatch component tree" src="../images/stopwatch_structure2.png" />
+  </p>
+  
+<h2 id="implementation" name="implementation">Implementation</h2>
+
+<p>To create the stopwatch:</p>
+<ol>
+<li>Initialize the user interface with the <span style="font-family: Courier New,Courier,monospace;">_create_stopwatch()</span> callback function:
+<pre class="prettyprint">
+static void _create_stopwatch(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Elm_Object_Item *nf_it = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *box1 = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *box2 = NULL;
+
+&nbsp;&nbsp;&nbsp;ret_if(!ad);
+
+&nbsp;&nbsp;&nbsp;_D(&quot;Create stopwatch&quot;);
+
+&nbsp;&nbsp;&nbsp;// Window
+&nbsp;&nbsp;&nbsp;ad-&gt;win = _create_win(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = _create_conform(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;conform, ERROR);
+
+&nbsp;&nbsp;&nbsp;// Indicator BG
+&nbsp;&nbsp;&nbsp;_set_indicator_bg(ad);
+
+&nbsp;&nbsp;&nbsp;// Naviframe 
+&nbsp;&nbsp;&nbsp;ad-&gt;nf = _create_navi(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;nf, ERROR);
+
+&nbsp;&nbsp;&nbsp;// Layout
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = _create_layout(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;layout, ERROR);
+
+&nbsp;&nbsp;&nbsp;// Three parts in the layout
+&nbsp;&nbsp;&nbsp;box1 = view_create_stopwatch_display(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!box1, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;part_one&quot;, box1);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;layout, PRIVATE_DATA_KEY_STOPWATCH_BOX1, box1);
+
+&nbsp;&nbsp;&nbsp;box2 = view_create_stopwatch_button(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!box2, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;part_two&quot;, box2);
+&nbsp;&nbsp;&nbsp;evas_object_data_set(ad-&gt;layout, PRIVATE_DATA_KEY_STOPWATCH_BOX2, box2);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;list = view_create_stopwatch_list(ad);
+&nbsp;&nbsp;&nbsp;goto_if(!ad-&gt;list, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;part_three&quot;, ad-&gt;list);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;layout);
+
+&nbsp;&nbsp;&nbsp;// Insert the layout to naviframe 
+&nbsp;&nbsp;&nbsp;nf_it = elm_naviframe_item_push(ad-&gt;nf, &quot;STOPWATCH&quot;, NULL, NULL, ad-&gt;layout, NULL);
+&nbsp;&nbsp;&nbsp;goto_if(!nf_it, ERROR);
+
+&nbsp;&nbsp;&nbsp;// Show window after base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+
+&nbsp;&nbsp;&nbsp;return;
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">view_create_stopwatch_display()</span>, <span style="font-family: Courier New,Courier,monospace;">view_create_stopwatch_button()</span>, and <span style="font-family: Courier New,Courier,monospace;">view_create_stopwatch_list()</span> functions create all the components and set them to the layout. To handle the button events, a smart clicked callback is registered with the <span style="font-family: Courier New,Courier,monospace;">evas_object_smart_callback_add()</span> function.
+<p class="figure">Figure: Stopwatch main view layout</p>
+    <p align="center">
+    <img alt="Stopwatch main view layout" src="../images/stopwatch_structure4.png" />
+  </p>
+
+<pre class="prettyprint">
+extern Evas_Object *view_create_stopwatch_display(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *box = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *grid = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *label = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *bg = NULL;
+&nbsp;&nbsp;&nbsp;viewdata_s *vd = NULL;
+
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;box = _create_box(ad-&gt;layout);
+&nbsp;&nbsp;&nbsp;retv_if(!box, NULL);
+&nbsp;&nbsp;&nbsp;grid = _create_grid(box);
+&nbsp;&nbsp;&nbsp;goto_if(!grid, ERROR);
+&nbsp;&nbsp;&nbsp;bg = _create_bg(grid, 1);
+&nbsp;&nbsp;&nbsp;goto_if(!bg, ERROR);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, bg, 0, 0, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Memory allocate
+&nbsp;&nbsp;&nbsp;vd = calloc(1, sizeof(viewdata_s));
+&nbsp;&nbsp;&nbsp;goto_if(!vd, ERROR);
+&nbsp;&nbsp;&nbsp;ad-&gt;vd = vd;
+
+&nbsp;&nbsp;&nbsp;// Set the label
+&nbsp;&nbsp;&nbsp;vd-&gt;time = elm_label_add(grid);
+&nbsp;&nbsp;&nbsp;goto_if(!vd-&gt;time, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(vd-&gt;time, &quot;&lt;font_size=105&gt;&lt;color=#ffffff&gt;00:00:00&lt;/color&gt;&lt;/font_size&gt;&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(vd-&gt;time);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, vd-&gt;time, 2, 10, 100, 100);
+
+&nbsp;&nbsp;&nbsp;vd-&gt;msec = elm_label_add(grid);
+&nbsp;&nbsp;&nbsp;goto_if(!vd-&gt;msec, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(vd-&gt;msec, &quot;&lt;font_size=50&gt;&lt;color=#ffffff&gt;.00&lt;/color&gt;&lt;/font_size&gt;&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(vd-&gt;msec);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, vd-&gt;msec, 85, 38, 100, 100);
+
+&nbsp;&nbsp;&nbsp;// Stop the flag
+&nbsp;&nbsp;&nbsp;vd-&gt;stopped = EINA_FALSE;
+
+&nbsp;&nbsp;&nbsp;label = elm_label_add(grid);
+&nbsp;&nbsp;&nbsp;goto_if(!label, ERROR);
+&nbsp;&nbsp;&nbsp;elm_object_text_set(label, &quot;&lt;b&gt;&lt;font_size=22&gt;&lt;color=#a6a6a6&gt;Hour&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;
+                                                               &quot;&nbsp; &nbsp; Min&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sec&lt;/color&gt;&lt;/font_size&gt;&lt;/b&gt;&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(label);
+&nbsp;&nbsp;&nbsp;elm_grid_pack(grid, label, 10, 70, 100, 100);
+
+&nbsp;&nbsp;&nbsp;elm_box_pack_end(box, grid);
+
+&nbsp;&nbsp;&nbsp;return box;
+} 
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">stopwatch_button_clicked()</span> function checks the text on the button and calls the following functions:
+<ul>
+<li><span style="font-family: Courier New,Courier,monospace;">_stopwatch_start_cb()</span> function starts changing the dipslay using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">_stopwatch_stop_cb()</span> function stops changing the display using the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_cancel()</span> and <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> functions.</li> 
+<li><span style="font-family: Courier New,Courier,monospace;">_stopwatch_lap_cb()</span> function appends a lap time to an <span style="font-family: Courier New,Courier,monospace;">elm_list</span> using the <span style="font-family: Courier New,Courier,monospace;">elm_list_item_append()</span> function.</li>
+<li><span style="font-family: Courier New,Courier,monospace;">_stopwatch_reset_cb()</span> function resets the main view to the initial state.</li>
+</ul>
+<pre class="prettyprint">
+extern void stopwatch_button_clicked(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;const char *str = NULL;
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+&nbsp;&nbsp;&nbsp;ret_if(!obj);
+
+&nbsp;&nbsp;&nbsp;ad = data;
+&nbsp;&nbsp;&nbsp;str = elm_object_text_get(obj);
+
+&nbsp;&nbsp;&nbsp;tizen_error_e result = TIZEN_ERROR_UNKNOWN;
+
+&nbsp;&nbsp;&nbsp;if (str &amp;&amp; !strcmp(str, &quot;START&quot;)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = _stopwatch_start_cb(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;retm_if(TIZEN_ERROR_NONE != result, &quot;Failed to stopwatch start: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (str &amp;&amp; !strcmp(str, &quot;STOP&quot;)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = stopwatch_stop_cb(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;retm_if(TIZEN_ERROR_NONE != result, &quot;Failed to stopwatch stop: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;else if (str &amp;&amp; !strcmp(str, &quot;LAP&quot;) &amp;&amp; ad-&gt;start) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = _stopwatch_lap_cb(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;retm_if(TIZEN_ERROR_NONE != result, &quot;Failed to stopwatch lap: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result = _stopwatch_reset_cb(ad);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;retm_if(TIZEN_ERROR_NONE != result, &quot;Failed to stopwatch reset: %d&quot;, result);
+&nbsp;&nbsp;&nbsp;}
+}
+</pre>
+</li>
+<li>The <span style="font-family: Courier New,Courier,monospace;">thread_job()</span> function uses the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback()</span> function 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>To cancel a running thread, the <span style="font-family: Courier New,Courier,monospace;">thread_job()</span> function also uses the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_check()</span> function to check whether a thread is in pending cancellation, because the <span style="font-family: Courier New,Courier,monospace;">ecore_thread_feedback_run()</span> function can be used from the main loop.</p>
+<pre class="prettyprint">
+extern void thread_job(void *data, Ecore_Thread *thread)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = NULL;
+&nbsp;&nbsp;&nbsp;viewdata_s *vd = NULL;
+&nbsp;&nbsp;&nbsp;int iteration = 0;
+
+&nbsp;&nbsp;&nbsp;ret_if(!data);
+&nbsp;&nbsp;&nbsp;ret_if(!thread);
+
+&nbsp;&nbsp;&nbsp;ad = data;
+&nbsp;&nbsp;&nbsp;vd = ad-&gt;vd;
+
+&nbsp;&nbsp;&nbsp;for (iteration = 0; ; iteration++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;vd-&gt;elapsedTime = ecore_time_get() - vd-&gt;startTime;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ecore_thread_feedback(thread, (void*)(uintptr_t)iteration);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;usleep(10000); // You can have some real computation done
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ecore_thread_check(thread)) break;
+&nbsp;&nbsp;&nbsp;}
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
new file mode 100644 (file)
index 0000000..73bf945
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/mobile_n/systeminfo_sd_mn.htm
@@ -0,0 +1,289 @@
+<!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>System Info 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>System Info Sample Overview</h1>
+<p>The System Info sample application demonstrates how to get information about the system.</p>
+
+<p>The following figure illustrates the main screen of the application.</p>
+
+  <p class="figure">Figure: System Info screens</p>
+  <p align="center">
+    <img alt="System info screen" src="../images/system_info_1.png" /> <img alt="System info screen" src="../images/system_info_2.png" /> <img alt="System Info screen" src="../images/system_info_3.png" />
+  </p>
+  
+<p>The application opens the main screen of system information categories. To check the information, touch the list item.</p>
+
+<h2>Prerequisites</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>
+<p>To use the system information, 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.</p>
+<pre class="prettyprint">
+&lt;privileges&gt;
+&nbsp;&nbsp;&nbsp;&lt;privilege&gt;http://tizen.org/privilege/systemsettings&lt;/privilege&gt;
+&lt;/privileges&gt;
+</pre>
+
+
+<h2>Implementation</h2>
+<p>To implement the application:</p>
+<ol>
+<li>To use the device-specific information-related features of the System Information API, include the <span style="font-family: Courier New,Courier,monospace">&lt;system_info.h&gt;</span> header file in your application:
+<pre class="prettyprint">
+#include &lt;system_info.h&gt;
+</pre>
+</li>
+
+<li>Initialize the application using a common Tizen application structure.
+<pre class="prettyprint">
+int main(int argc, char *argv[])
+{
+&nbsp;&nbsp;&nbsp;appdata_s ad = {0,};
+&nbsp;&nbsp;&nbsp;int ret = 0;
+
+&nbsp;&nbsp;&nbsp;ui_app_lifecycle_callback_s event_callback = {0,};
+&nbsp;&nbsp;&nbsp;app_event_handler_h handlers[5] = {NULL, };
+
+&nbsp;&nbsp;&nbsp;event_callback.create = app_create;
+&nbsp;&nbsp;&nbsp;event_callback.terminate = app_terminate;
+&nbsp;&nbsp;&nbsp;event_callback.pause = app_pause;
+&nbsp;&nbsp;&nbsp;event_callback.resume = app_resume;
+&nbsp;&nbsp;&nbsp;event_callback.app_control = app_control;
+
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_BATTERY], APP_EVENT_LOW_BATTERY, ui_app_low_battery, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LOW_MEMORY], APP_EVENT_LOW_MEMORY, ui_app_low_memory, &amp;d);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_DEVICE_ORIENTATION_CHANGED], APP_EVENT_DEVICE_ORIENTATION_CHANGED, ui_app_orient_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_LANGUAGE_CHANGED], APP_EVENT_LANGUAGE_CHANGED, ui_app_lang_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_add_event_handler(&amp;handlers[APP_EVENT_REGION_FORMAT_CHANGED], APP_EVENT_REGION_FORMAT_CHANGED, ui_app_region_changed, &amp;ad);
+&nbsp;&nbsp;&nbsp;ui_app_remove_event_handler(handlers[APP_EVENT_LOW_MEMORY]);
+
+&nbsp;&nbsp;&nbsp;ret = ui_app_main(argc, argv, &amp;event_callback, &amp;ad);
+&nbsp;&nbsp;&nbsp;if (ret != APP_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_E(&quot;ui_app_main() is failed. err = %d&quot;, ret);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return ret;
+}
+</pre>
+
+<p>The initialization is done with 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)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *bg = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *list = NULL;
+
+&nbsp;&nbsp;&nbsp;// Window 
+&nbsp;&nbsp;&nbsp;ad-&gt;win = elm_win_util_standard_add(PACKAGE, PACKAGE);
+&nbsp;&nbsp;&nbsp;elm_win_conformant_set(ad-&gt;win, EINA_TRUE);
+&nbsp;&nbsp;&nbsp;elm_win_autodel_set(ad-&gt;win, EINA_TRUE);
+
+&nbsp;&nbsp;&nbsp;if (elm_win_wm_rotation_supported_get(ad-&gt;win)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;int rots[4] = { 0, 90, 180, 270 };
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elm_win_wm_rotation_available_rotations_set(ad-&gt;win, (const int *)(&amp;rots), 4);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(ad-&gt;win, &quot;delete,request&quot;, win_delete_request_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;// Conformant
+&nbsp;&nbsp;&nbsp;ad-&gt;conform = elm_conformant_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_mode_set(ad-&gt;win, ELM_WIN_INDICATOR_SHOW);
+&nbsp;&nbsp;&nbsp;elm_win_indicator_opacity_set(ad-&gt;win, ELM_WIN_INDICATOR_OPAQUE);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;conform, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_win_resize_object_add(ad-&gt;win, ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;conform);
+
+&nbsp;&nbsp;&nbsp;// Indicator BG
+&nbsp;&nbsp;&nbsp;bg = elm_bg_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;elm_object_style_set(bg, &quot;indicator/headerbg&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;conform, &quot;elm.swallow.indicator_bg&quot;, bg);
+&nbsp;&nbsp;&nbsp;evas_object_show(bg);
+
+&nbsp;&nbsp;&nbsp;// Naviframe
+&nbsp;&nbsp;&nbsp;ad-&gt;navi = elm_naviframe_add(ad-&gt;conform);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(ad-&gt;navi, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(ad-&gt;navi, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;// Base Layout
+&nbsp;&nbsp;&nbsp;list = _create_main_list(ad);
+
+&nbsp;&nbsp;&nbsp;// Push the Main Layout to the Naviframe
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(ad-&gt;navi, &quot;System Info&quot;, NULL, NULL, list, NULL);
+
+&nbsp;&nbsp;&nbsp;// Show window after base GUI is set up
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;win);
+}
+</pre>
+</li>
+
+<li>Create the main list menu.
+<p>Each main menu list item has a callback function for getting the system information. If one of them is clicked, the information about the category is illustrated in a genlist.</p>
+<pre class="prettyprint">
+Evas_Object *_create_main_list(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;Evas_Object *list = NULL;
+
+&nbsp;&nbsp;&nbsp;list = elm_list_add(ad-&gt;navi);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(list, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(list, EVAS_HINT_FILL, EVAS_HINT_FILL);
+
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Camera&quot;, NULL, NULL, camera_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Keyboard&quot;, NULL, NULL, input_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Location&quot;, NULL, NULL, location_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Network&quot;, NULL, NULL, network_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;OpenGL&quot;, NULL, NULL, opengl_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Platform&quot;, NULL, NULL, platform_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Screen&quot;, NULL, NULL, screen_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Sensors&quot;, NULL, NULL, sensors_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Speech&quot;, NULL, NULL, speech_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Usb&quot;, NULL, NULL, usb_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Vision&quot;, NULL, NULL, vision_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;System&quot;, NULL, NULL, system_list_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_list_item_append(list, &quot;Others&quot;, NULL, NULL, others_list_cb, ad);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(list);
+
+&nbsp;&nbsp;&nbsp;return list;
+}
+</pre>
+</li>
+
+<li>Create the function to call when the list item is clicked.
+<p>The following code examples are callback functions of the camera, which is a default double label list, and of the platform, which is a grouped list. The codes of others are almost identical.</p>
+<pre class="prettyprint">
+void camera_list_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;appdata_s *ad = (appdata_s *)data;
+&nbsp;&nbsp;&nbsp;Evas_Object *clist = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *navi = ad-&gt;navi;
+&nbsp;&nbsp;&nbsp;Elm_Genlist_Item_Class *itc = elm_genlist_item_class_new();
+
+&nbsp;&nbsp;&nbsp;clist = elm_genlist_add(navi);
+
+&nbsp;&nbsp;&nbsp;itc-&gt;item_style = &quot;double_label&quot;;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.content_get = NULL;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.text_get = _gl_text_get_cb;
+&nbsp;&nbsp;&nbsp;itc-&gt;func.del = gc_gl_del_cb;
+
+&nbsp;&nbsp;&nbsp;elm_genlist_block_count_set(clist, 14);
+&nbsp;&nbsp;&nbsp;elm_genlist_mode_set(clist, ELM_LIST_COMPRESS);
+&nbsp;&nbsp;&nbsp;evas_object_smart_callback_add(clist, &quot;selected&quot;, gc_gl_selected_cb, NULL);
+
+&nbsp;&nbsp;&nbsp;for (i=0; i&lt;5; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item_data_s *id = malloc(sizeof(item_data_s));
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;index = i;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item = elm_genlist_item_append(clist, itc, id, NULL, ELM_GENLIST_ITEM_NONE, NULL, id);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id-&gt;item = item;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;elm_genlist_item_class_free(itc);
+
+&nbsp;&nbsp;&nbsp;elm_naviframe_item_push(navi, &quot;Camera&quot;, NULL, NULL, clist, NULL);
+}
+</pre>
+<ul>
+<li>Definitions
+<pre class="prettyprint">
+static struct camera_info 
+{
+&nbsp;&nbsp;&nbsp;char *description;
+&nbsp;&nbsp;&nbsp;char *feature_key;
+} s_camera_info[] = 
+{
+&nbsp;&nbsp;&nbsp;{&quot;Camera&quot;, &quot;http://tizen.org/feature/camera&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Back Camera&quot;, &quot;http://tizen.org/feature/camera.back&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Back Camera Flash&quot;, &quot;http://tizen.org/feature/camera.back.flash&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Front Camera&quot;, &quot;http://tizen.org/feature/camera.front&quot;},
+&nbsp;&nbsp;&nbsp;{&quot;Front Camera Flash&quot;, &quot;http://tizen.org/feature/camera.front.flash&quot;}
+};
+</pre>
+<p>For more information, see the <a href="../../../org.tizen.guides/html/native/system/sysinfo_n.htm">System Information</a> guide.</p>
+</li>
+
+<li><span style="font-family: Courier New,Courier,monospace">_gl_text_get_cb</span> callbacks
+<p>This genlist makes the list by a style, <span style="font-family: Courier New,Courier,monospace">double_label</span>, to distinguish a title and a content. The items of the list are illustrated by the <span style="font-family: Courier New,Courier,monospace">_gl_text_get_cb()</span> function, which uses the header file, <span style="font-family: Courier New,Courier,monospace">system_info.h</span>. To get information about the system, you can get the boolean data with the <span style="font-family: Courier New,Courier,monospace"><a href="../../../org.tizen.native.mobile.apireference/group__CAPI__SYSTEM__SYSTEM__INFO__MODULE.html#gaf04117a88784e54c576e18f0eec4fc42">system_info_get_platform_bool()</a></span> function.</p>
+<pre class="prettyprint">
+static char *_gl_text_get_cb(void *data, Evas_Object *obj, const char *part)
+{
+&nbsp;&nbsp;&nbsp;item_data_s *id = (item_data_s *)data;
+&nbsp;&nbsp;&nbsp;char buf[MAX_STR] = {0,};
+&nbsp;&nbsp;&nbsp;int ret = -1;
+&nbsp;&nbsp;&nbsp;bool value = 0;
+
+&nbsp;&nbsp;&nbsp;if (!strcmp(part, &quot;elm.text&quot;)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(s_camera_info[id-&gt;index].description);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else if (!strcmp(part, &quot;elm.text.sub&quot;)) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = system_info_get_platform_bool(s_camera_info[id-&gt;index].feature_key, &amp;value);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != SYSTEM_INFO_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;snprintf(buf, MAX_STR, &quot;%s&quot;, value ? &quot;Supported&quot; : &quot;Not Supported&quot;);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return strdup(buf);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return NULL;
+}
+</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

diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
new file mode 100644 (file)
index 0000000..d6ff226
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlerotarytimer_sd_wn.htm
@@ -0,0 +1,263 @@
+<!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) Rotary 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="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>(Circle) Rotary Timer Sample Overview</h1> 
+  
+<p>The (Circle) Rotary Timer sample application demonstrates how implement a circular digital clock with a timer function in your application.</p>
+
+<p>The following figure illustrates the main views of the (Circle) Rotary Timer sample application.</p>
+
+<p class="figure">Figure: (Circle) Rotary Timer main views</p> 
+  <p align="center"><img alt="(Circle) Rotary Timer main views" src="../images/rotary_timer.png" /> <img alt="(Circle) Rotary Timer main views" src="../images/rotary_timer_set.png" /></p>
+
+<p>Click the hour, minute, and second values to set up the timer. To start the timer, click <strong>START</strong>.</p>  
+<p>The timer is stops when the number in the digital clock is reduced to 0. To set another time, click <strong>RESET</strong>.</p>
+  
+<h2>Implementation</h2>
+<p>To implement the circular rotary timer:</p>
+<ol>
+<li>Add the required header file and callbacks. 
+<p>To use the rotary function, the application must include the <span style="font-family: Courier New,Courier,monospace">efl_extension.h</span> header file. To detect rotary events, add the necessary callback functions.</p>
+
+<pre class="prettyprint">eext_rotary_object_event_activated_set(ad-&gt;layout, EINA_TRUE);
+eext_rotary_object_event_callback_add(ad-&gt;layout, _rotary_cb, ad);</pre>
+
+</li>
+
+<li>Create the layout for the timer preview. 
+<p>Use the <span style="font-family: Courier New,Courier,monospace">_layout_create()</span> function to create the main layout of the application, and add a digital clock to display the timer preview.</p>
+
+<pre class="prettyprint">static Evas_Object *
+_layout_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;_D(&quot;Layout create&quot;);
+&nbsp;&nbsp;&nbsp;Evas_Object *layout = NULL;
+
+&nbsp;&nbsp;&nbsp;retv_if(!ad, NULL);
+
+&nbsp;&nbsp;&nbsp;layout = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;retv_if(!layout, NULL);
+
+&nbsp;&nbsp;&nbsp;main_get_resource_path(ad);
+
+&nbsp;&nbsp;&nbsp;// ad-&gt;timer_edj_path == app_get_resource_path() + /edje/timer.edj
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(layout, ad-&gt;timer_edj_path, GRP_MAIN);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(layout, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;eext_object_event_callback_add(layout, EEXT_CALLBACK_BACK, layout_back_cb, ad);
+
+&nbsp;&nbsp;&nbsp;elm_object_content_set(ad-&gt;conform, layout);
+&nbsp;&nbsp;&nbsp;ad-&gt;layout = layout;
+
+&nbsp;&nbsp;&nbsp;_start_btn_create(ad);
+&nbsp;&nbsp;&nbsp;retv_if(!ad-&gt;start_btn, NULL);
+
+&nbsp;&nbsp;&nbsp;digital_create(ad);
+
+&nbsp;&nbsp;&nbsp;rotary_init(ad);
+
+&nbsp;&nbsp;&nbsp;evas_object_show(layout);
+
+&nbsp;&nbsp;&nbsp;return layout;
+}</pre>
+</li>
+
+<li>Initialize the application and set the timer. 
+<p>Use the <span style="font-family: Courier New,Courier,monospace">digital_create()</span> function to create the digital clock and set the quantity of time for the timer.</p>
+
+<pre class="prettyprint">void 
+digital_create(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;_D(&quot;Digital create&quot;);
+&nbsp;&nbsp;&nbsp;Evas_Object *left_col = NULL;
+&nbsp;&nbsp;&nbsp;Evas_Object *right_col = NULL;
+
+&nbsp;&nbsp;&nbsp;ad-&gt;hour_ly = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;hour_ly);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;hour_ly, ad-&gt;timer_edj_path, &quot;hour&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;hour_ly, EVAS_CALLBACK_MOUSE_DOWN, _hour_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;hour&quot;, ad-&gt;hour_ly);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;hour_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;hour_ly);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;minute_ly = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;minute_ly);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;minute_ly, ad-&gt;timer_edj_path, &quot;minute&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;minute_ly, EVAS_CALLBACK_MOUSE_DOWN, _minute_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;minute&quot;, ad-&gt;minute_ly);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;minute_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;minute_ly);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;second_ly = elm_layout_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;second_ly);
+&nbsp;&nbsp;&nbsp;elm_layout_file_set(ad-&gt;second_ly, ad-&gt;timer_edj_path, &quot;second&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_event_callback_add(ad-&gt;second_ly, EVAS_CALLBACK_MOUSE_DOWN, _second_selected_cb, ad);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;second&quot;, ad-&gt;second_ly);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;second_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;evas_object_show(ad-&gt;second_ly);
+
+&nbsp;&nbsp;&nbsp;left_col = elm_image_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!left_col);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(left_col, ad-&gt;timer_control_dot_path, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(left_col, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(left_col, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;left_colon&quot;, left_col);
+
+&nbsp;&nbsp;&nbsp;right_col = elm_image_add(ad-&gt;win);
+&nbsp;&nbsp;&nbsp;ret_if(!right_col);
+&nbsp;&nbsp;&nbsp;elm_image_file_set(right_col, ad-&gt;timer_control_dot_path, NULL);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_weight_set(right_col, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
+&nbsp;&nbsp;&nbsp;evas_object_size_hint_align_set(right_col, EVAS_HINT_FILL, EVAS_HINT_FILL);
+&nbsp;&nbsp;&nbsp;elm_object_part_content_set(ad-&gt;layout, &quot;right_colon&quot;, right_col);
+}</pre>
+
+</li>
+
+<li>Start the timer. 
+<p>The <span style="font-family: Courier New,Courier,monospace">_start_clicked_cb()</span> callback starts the timer. When you click <strong>START</strong>, the application calculates the quantity of time using the <span style="font-family: Courier New,Courier,monospace">_calc_setting_time()</span> function and displays the total time. The <span style="font-family: Courier New,Courier,monospace">_timer_start_cb()</span> function is called every second to reduce the number in the digital clock.</p>
+
+<pre class="prettyprint">static void 
+_start_clicked_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;if (ad-&gt;timer) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_reset_clicked_cb(ad);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;ad-&gt;setting_time = _calc_setting_time(ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;setting_time);
+
+&nbsp;&nbsp;&nbsp;ad-&gt;img_num = 60; 
+
+&nbsp;&nbsp;&nbsp;progress_count = (ad-&gt;setting_time/ad-&gt;img_num);
+&nbsp;&nbsp;&nbsp;ad-&gt;selected = NULL;
+
+&nbsp;&nbsp;&nbsp;// Make the digital clock unclickable
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;hour_ly, &quot;hour_deselected&quot;, &quot;hour&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;minute_ly, &quot;minute_deselected&quot;, &quot;minute&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;second_ly, &quot;second_deselected&quot;, &quot;second&quot;);
+
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;start_btn_ly, &quot;timer_start&quot;, &quot;btn&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;timer_start&quot;, &quot;bg&quot;);
+
+&nbsp;&nbsp;&nbsp;// Reduce 1 second every second
+&nbsp;&nbsp;&nbsp;ad-&gt;timer = ecore_timer_add(1.0f, _timer_start_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;timer);
+&nbsp;&nbsp;&nbsp;ad-&gt;progress_timer = ecore_timer_add(progress_count, _progress_start_cb, ad);
+&nbsp;&nbsp;&nbsp;ret_if(!ad-&gt;progress_timer);
+&nbsp;&nbsp;&nbsp;_progress_start_cb(ad);
+}
+
+static Eina_Bool 
+_timer_start_cb(void *data)
+{
+&nbsp;&nbsp;&nbsp;// Get the previous time
+&nbsp;&nbsp;&nbsp;pre_second_time = elm_object_part_text_get(ad-&gt;second_ly, &quot;val&quot;);
+&nbsp;&nbsp;&nbsp;post_second_time = atoi(pre_second_time);
+&nbsp;&nbsp;&nbsp;pre_minute_time = elm_object_part_text_get(ad-&gt;minute_ly, &quot;val&quot;);
+&nbsp;&nbsp;&nbsp;post_minute_time = atoi(pre_minute_time);
+&nbsp;&nbsp;&nbsp;pre_hour_time = elm_object_part_text_get(ad-&gt;hour_ly, &quot;val&quot;);
+&nbsp;&nbsp;&nbsp;post_hour_time = atoi(pre_hour_time);
+&nbsp;&nbsp;&nbsp;// Reduce 1 second
+&nbsp;&nbsp;&nbsp;if (post_second_time == 0) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (post_minute_time == 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_second_time = 59;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_minute_time = 59;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_hour_time = post_hour_time - 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_second_time = 59;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_minute_time = post_minute_time - 1;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;post_second_time = post_second_time - 1;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;// Display the new time
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;hour_ly, &quot;val&quot;, hour_val);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;minute_ly, &quot;val&quot;, minute_val);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;second_ly, &quot;val&quot;, second_val);
+               
+&nbsp;&nbsp;&nbsp;ad-&gt;setting_time--;
+
+&nbsp;&nbsp;&nbsp;free(hour_val);
+&nbsp;&nbsp;&nbsp;free(minute_val);
+&nbsp;&nbsp;&nbsp;free(second_val);
+
+&nbsp;&nbsp;&nbsp;return ECORE_CALLBACK_RENEW;
+}</pre>
+</li>
+
+<li>Reset the timer. 
+<p>To set another time when the user clicks <strong>RESET</strong>, call the <span style="font-family: Courier New,Courier,monospace">_reset_clicked_cb()</span> callback function.</p>
+
+<pre class="prettyprint">static void 
+_reset_clicked_cb(appdata_s *ad)
+{
+&nbsp;&nbsp;&nbsp;ad-&gt;setting_time = 0;
+
+&nbsp;&nbsp;&nbsp;ecore_timer_del(ad-&gt;timer);
+&nbsp;&nbsp;&nbsp;ad-&gt;timer = NULL;
+&nbsp;&nbsp;&nbsp;ecore_timer_del(ad-&gt;progress_timer);
+&nbsp;&nbsp;&nbsp;ad-&gt;progress_timer = NULL;
+
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;hour_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;minute_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_part_text_set(ad-&gt;second_ly, &quot;val&quot;, &quot;00&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;start_btn_ly, &quot;timer_end&quot;, &quot;btn&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;timer_end&quot;, &quot;bg&quot;);
+&nbsp;&nbsp;&nbsp;elm_object_signal_emit(ad-&gt;layout, &quot;timer_end&quot;, &quot;progress&quot;);
+}</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

diff --git a/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
index 390403d..d01a373 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/circlesettings_sd_wn.htm
@@ -28,7 +28,7 @@
   
 <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 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>
 

diff --git a/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
new file mode 100644 (file)
index 0000000..dc82234
--- /dev/null
+++ b/org.tizen.sampledescriptions/html/wearable_n/rectnotificationmanager_sd_wn.htm
@@ -0,0 +1,477 @@
+<!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) 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="Wearable native" src="../images/wn_icon.png"/></p>
+       </div>
+
+  <h1>(Rectangle) NotificationManager Sample Overview</h1> 
+  
+  <p>The (Rectangle) NotificationManager sample demonstrates how you can present a notification to the user.</p>
+  <p>The notifications are displayed as list items, where each item is an Edje layout from the <span style="font-family: Courier New,Courier,monospace">list_content.edc</span> file. All items use the same Edje layout.</p>
+  
+<p>The following figure illustrates the main screens of the NotificationManager.</p>
+
+    <p class="figure">Figure: (Rectangle) Notification Manager screens</p> 
+  <p align="center"><img alt="(Rectangle) Notification Manager screens" src="../images/notification_manager_wn.png" /></p>
+
+<p>The application opens with the main screen, where you can select which notification type to access: notifications or ongoing notifications. Click the notification type to view the list of notifications and their various features.</p> 
+
+
+<h2 id="implementation" name="implementation">Implementation</h2>  
+  
+<p>When the user clicks a list item on the main screen, the <span style="font-family: Courier New,Courier,monospace">_add_noti_list()</span> function adds each notification into a feature list.</p>  
+  
+<h3 id="manage_noti" name="manage_noti">Managing Notifications</h3>
+<p>The notification management is implemented in the <span style="font-family: Courier New,Courier,monospace">notifications.c</span> file. 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">_noti_list_cb()</span> function calls the appropriate notification to create the result layout function. The function to create notifications sets the request message information, such as the alert text, title text, and launch parameters, which are used in the result layout function.</p>
+<p>You can 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 notification.</p>
+<pre class="prettyprint">
+static 
+notification_h create_notification(const char *icon_path, const char *title_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *content_text,const char *sound_path)
+{
+&nbsp;&nbsp;&nbsp;notification_h notify = notification_create(NOTIFICATION_TYPE_NOTI);
+&nbsp;&nbsp;&nbsp;if (notify)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_set_image(notify, NOTIFICATION_IMAGE_TYPE_ICON, icon_path);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_set_text(notify, NOTIFICATION_TEXT_TYPE_TITLE, title_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_set_text(notify, NOTIFICATION_TEXT_TYPE_CONTENT, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content_text, NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_set_sound(notify, NOTIFICATION_SOUND_TYPE_USER_DATA, sound_path);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return notify;
+}
+
+static void 
+remove_notification_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+&nbsp;&nbsp;&nbsp;bool is_success = delete_notification_items();
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+
+&nbsp;&nbsp;&nbsp;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. The function sets extra data to the application control, 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)
+{
+&nbsp;&nbsp;&nbsp;// Remove all notifications before creating a new one
+
+&nbsp;&nbsp;&nbsp;notify_data-&gt;notification = create_notification(ICON2_PATH, notification_app, app_control, NULL);
+&nbsp;&nbsp;&nbsp;if (notify_data-&gt;notification)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *array_result[] = {result_1_text, result_2_text, NULL};
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const char *array_key[] = {SERVICE_DATA_TEXT, SERVICE_DATA_TO, NULL};
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set extra data to app control 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_post(notify_data-&gt;notification);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+
+static void 
+remove_notification_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+&nbsp;&nbsp;&nbsp;bool is_success = delete_notification_items();
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+
+&nbsp;&nbsp;&nbsp;badge_remove(PACKAGE);
+}
+
+void 
+launch_arguments_set(notification_h notification, const char *argument, ...)
+{
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;int err = app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;retm_if(err != SERVICE_ERROR_NONE, &quot;service_create failure&quot;);
+
+&nbsp;&nbsp;&nbsp;if (argument)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, MESSAGE_POST, argument);
+&nbsp;&nbsp;&nbsp;}
+}
+</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.</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</p>
+<pre class="prettyprint">
+static void 
+notify_by_app_id_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;// Remove all notifications before creating a new one
+
+&nbsp;&nbsp;&nbsp;notify_data-&gt;notification = create_notification(ICON2_PATH, title_text, notify_with_request, NULL);
+&nbsp;&nbsp;&nbsp;if (notify_data-&gt;notification)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Set App package to app control 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notification_post(notify_data-&gt;notification);
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+static void 
+remove_notification_by_app_id_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+&nbsp;&nbsp;&nbsp;bool is_success = delete_notification_by_app_id();
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+
+void 
+launch_arguments_set(notification_h notification, const char * pkgname, ...)
+{
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;int err = app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;retm_if(err != SERVICE_ERROR_NONE, &quot;service_create failure&quot;);
+
+&nbsp;&nbsp;&nbsp;if (pkgname)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_app_id(service, pkgname);
+&nbsp;&nbsp;&nbsp;}
+}
+</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>
+<p>Before using this function, the <span style="font-family: Courier New,Courier,monospace">badge_new()</span> function must be called.</p>
+<pre class="prettyprint">
+static void 
+set_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;unsigned int count = 0;
+&nbsp;&nbsp;&nbsp;bool is_success = increase_badge(&amp;count);
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+
+static void 
+remove_badge_number_by_app_id_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;unsigned int count = 0;
+&nbsp;&nbsp;&nbsp;bool is_success = decrease_badge(&amp;count);
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+</pre>
+</li>
+</ul>
+
+<h3 id="ongoing" name="ongoing">Managing On-going Notifications</h3>
+<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, image, and title text.</p>
+<pre class="prettyprint">
+static notification_h create_ongoing_notification(const char *image_path, const char *title_text)
+{
+&nbsp;&nbsp;&nbsp;notification_h ongoing_notification = notification_create(NOTIFICATION_TYPE_ONGOING);
+&nbsp;&nbsp;&nbsp;retvm_if(!ongoing_notification, NULL, &quot;notify is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;notification_set_property(ongoing_notification, NOTIFICATION_PROP_DISABLE_TICKERNOTI);
+&nbsp;&nbsp;&nbsp;notification_set_image(ongoing_notification, NOTIFICATION_IMAGE_TYPE_ICON, image_path);
+&nbsp;&nbsp;&nbsp;notification_set_text(ongoing_notification, NOTIFICATION_TEXT_TYPE_TITLE, title_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NULL, NOTIFICATION_VARIABLE_TYPE_NONE);
+
+&nbsp;&nbsp;&nbsp;return ongoing_notification;
+}
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">delete_ongoing_notification()</span> function removes the on-going notification, and resets the press count and progress value of this notification.</p>
+<pre class="prettyprint">
+static int delete_ongoing_notification(notification_data *data)
+{
+&nbsp;&nbsp;&nbsp;notification_data *data = ongoing_notification_data_get(type);
+&nbsp;&nbsp;&nbsp;int err = NOTIFICATION_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;if (data)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data-&gt;notification)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = notification_delete(data-&gt;notification);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;notification = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;press_count = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;progress_value = 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;return (err == NOTIFICATION_ERROR_NONE);
+}
+</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">_noti_list_cb()</span> smart callback is invoked. This smart callback calls an on-going notification function and creates the result layout with the request message information. The on-going notification function sets the result information which is used in the result layout.</p>
+<p>You can manage notifications in different ways:</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 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)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;notify_data-&gt;press_count++;
+&nbsp;&nbsp;&nbsp;if (!notify_data-&gt;notification)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;notification = create_ongoing_notification(ICON2_PATH, notify_data-&gt;name);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data-&gt;notification, &quot;ongoing_notification is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set progress to the notification
+&nbsp;&nbsp;&nbsp;notify_data-&gt;progress_value += percentage_increment;
+&nbsp;&nbsp;&nbsp;if (notify_data-&gt;progress_value &gt; percentage_max)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;progress_value = 0;
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;notification_set_progress(notify_data-&gt;notification, notify_data-&gt;progress_value);
+
+&nbsp;&nbsp;&nbsp;notification_content_text_set(notify_data-&gt;notification, percentage_content_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;press_count);
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+
+&nbsp;&nbsp;&nbsp;// If a notification of such type is already created, 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)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;bool is_success = true;
+&nbsp;&nbsp;&nbsp;is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_PERCENT);
+&nbsp;&nbsp;&nbsp;is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_BYTE) &amp;&amp; is_success;
+&nbsp;&nbsp;&nbsp;is_success = delete_ongoing_notification(ONGOING_NOTIFICATION_TEXT) &amp;&amp; is_success;
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+</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)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;notify_data-&gt;press_count++;
+&nbsp;&nbsp;&nbsp;if (!notify_data-&gt;notification)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;notification = create_ongoing_notification(ICON1_PATH, notify_data-&gt;name);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data-&gt;notification, &quot;ongoing_notification is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set progress to the notification
+
+&nbsp;&nbsp;&nbsp;notification_content_text_set(notify_data-&gt;notification, percentage_content_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;press_count);
+
+&nbsp;&nbsp;&nbsp;// Increase the badge
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+
+&nbsp;&nbsp;&nbsp;// Set extra data to appcontrol
+
+&nbsp;&nbsp;&nbsp;// If a notification of such type is already created, just update it, if not, post it
+}
+
+void 
+launch_arguments_set(..., char *argument, ...)
+{
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;int err = app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;retm_if(err != SERVICE_ERROR_NONE, &quot;service_create failure&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set extra data to appcontrol
+&nbsp;&nbsp;&nbsp;if (argument)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_add_extra_data(service, MESSAGE_POST, argument);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void 
+remove_notification_by_app_control_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;bool result = delete_ongoing_notification(ONGOING_NOTIFICATION_BY_APP_CONTROL);
+&nbsp;&nbsp;&nbsp;// Remove the badge
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+
+static bool 
+delete_ongoing_notification(enum ongoing_notification type)
+{
+&nbsp;&nbsp;&nbsp;notification_data *data = ongoing_notification_data_get(type);
+&nbsp;&nbsp;&nbsp;int err = NOTIFICATION_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;if (data)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (data-&gt;notification)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;err = notification_delete(data-&gt;notification);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;notification = NULL;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;press_count = 0;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-&gt;progress_value = 0;
+&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;return (err == NOTIFICATION_ERROR_NONE);
+}
+</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)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;notify_data-&gt;press_count++;
+&nbsp;&nbsp;&nbsp;if (!notify_data-&gt;notification)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;notification = create_ongoing_notification(ICON1_PATH, notify_data-&gt;name);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data-&gt;notification, &quot;ongoing_notification_byte is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;// Set the initial size for the ongoing type
+
+  
+&nbsp;&nbsp;&nbsp;notification_content_text_set(notify_data-&gt;notification, byte_content_text, notify_data-&gt;press_count);
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+
+&nbsp;&nbsp;&nbsp;// Set the application ID to appcontrol
+
+&nbsp;&nbsp;&nbsp;// If a notification of such type is already created, just update it, if not, post it
+}
+
+void 
+launch_arguments_set(..., const char *argument, ...)
+{
+&nbsp;&nbsp;&nbsp;app_control_h service = NULL;
+&nbsp;&nbsp;&nbsp;int err = app_control_create(&amp;service);
+&nbsp;&nbsp;&nbsp;retm_if(err != SERVICE_ERROR_NONE, &quot;service_create failure&quot;);
+ 
+&nbsp;&nbsp;&nbsp;// Set the application ID to appcontrol
+&nbsp;&nbsp;&nbsp;if (pkgname)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;app_control_set_app_id(service, pkgname);
+&nbsp;&nbsp;&nbsp;}
+}
+
+static void 
+remove_ongoing_notification_by_app_id_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;retm_if(!notify_data, &quot;notify_data is NULL&quot;);
+
+&nbsp;&nbsp;&nbsp;notification_data *data = ongoing_notification_data_get(ONGOING_NOTIFICATION_BY_APP_ID);
+&nbsp;&nbsp;&nbsp;int err = delete_ongoing_notification(data);
+
+&nbsp;&nbsp;&nbsp;// Set the information result message
+}
+</pre>
+</li>
+</ul>
+
+<h3 id="result" name="result">Displaying Results</h3>
+<p>The <span style="font-family: Courier New,Courier,monospace">_noti_list_cb()</span> function calls the appropriate notification function where the result information is set. Then the <span style="font-family: Courier New,Courier,monospace">result_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 
+_noti_list_cb(void *data, Evas_Object *obj, void *event_info)
+{
+&nbsp;&nbsp;&nbsp;notification_data *notification_info = (notification_data *)data;
+&nbsp;&nbsp;&nbsp;notification_info-&gt;callback(notification_info);
+&nbsp;&nbsp;&nbsp;result_view_add(navi, notification_info);
+}
+
+static void 
+notify_cb(notification_data *notify_data)
+{
+&nbsp;&nbsp;&nbsp;// Set the result information  
+&nbsp;&nbsp;&nbsp;snprintf(notify_data-&gt;result_text, TEXT_MAX_LEN, &quot; %s&lt;br&gt;&lt;br&gt; %s%s&lt;br&gt;&lt;br&gt; %s&lt;br&gt; %s&lt;br&gt;&lt;br&gt; %s&lt;br&gt; %s&lt;br&gt;&quot;,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_data-&gt;fullname, result_message, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(notify_data-&gt;notification) ? result_message_success_text : result_message_failure_text, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;notify_message_text, _text,launch_argument_text, app_message_text);
+}
+
+void 
+result_view_add(Evas_Object *navi, notification_data *notify_info)
+{
+&nbsp;&nbsp;&nbsp;// Create the result layout
+&nbsp;&nbsp;&nbsp;data-&gt;navi_item = elm_naviframe_item_push(data-&gt;navi, data-&gt;name, NULL, NULL, data-&gt;layout, 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

diff --git a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
index 1175a9f..fed5b1f 100644 (file)
--- a/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
+++ b/org.tizen.sampledescriptions/html/wearable_n/sd_wn.htm
@@ -65,6 +65,10 @@
      <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="circlerotarytimer_sd_wn.htm">(Circle) Rotary Timer</a></td> 
+     <td>Demonstrates how you can implement a circular digital clock with a timer function.</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>
@@ -78,6 +82,10 @@
      <td>Demonstrates how you can implement a complex rectangular email view using EFL UI components and containers.</td>
     </tr>
        <tr> 
+     <td><a href="rectnotificationmanager_sd_wn.htm">(Rectangle) NotificationManager</a></td> 
+     <td>Demonstrates how you can implement and manage notifications.</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>

diff --git a/org.tizen.sampledescriptions/index.xml b/org.tizen.sampledescriptions/index.xml
index 014eeaf..9a6a5c1 100644 (file)
--- a/org.tizen.sampledescriptions/index.xml
+++ b/org.tizen.sampledescriptions/index.xml
@@ -60,6 +60,8 @@
        </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/application_control_sd_mn.htm" label="Application Control"></topic>
+                       <topic href="html/mobile_n/bluetoothchat_sd_mn.htm" label="Bluetooth Chat"></topic>
                        <topic href="html/mobile_n/bundle_sd_mn.htm" label="Bundle"></topic>
                        <topic href="html/mobile_n/cairo_basic_sd_mn.htm" label="Cairo Basic"></topic>
                        <topic href="html/mobile_n/cairo_evasgl_sd_mn.htm" label="Cairo EvasGL"></topic>
@@ -80,11 +82,16 @@
                        <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/puzzle_sd_mn.htm" label="Puzzle"></topic>
+                       <topic href="html/mobile_n/quickpanel_sd_mn.htm" label="Quickpanel"></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/sketch_sd_mn.htm" label="Sketch"></topic>
+                       <topic href="html/mobile_n/stopwatch_sd_mn.htm" label="Stopwatch"></topic>
+                       <topic href="html/mobile_n/systeminfo_sd_mn.htm" label="System Info"></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/volume_sd_mn.htm" label="Volume"></topic>
@@ -133,11 +140,13 @@
                        <topic href="html/wearable_n/rectuicomponents_sd_wn.htm" label="(Rectangle) UI Components"></topic>
                        <topic href="html/wearable_n/bluetoothchat_sd_wn.htm" label="(Circle) Bluetooth Chat"></topic>
                        <topic href="html/wearable_n/cairo_basic_sd_wn.htm" label="(Circle) Cairo Basic"></topic>
-                       <topic href="html/wearable_n/cairo_evasgl_sd_wn.htm" label="(Circle) Cairo EvasGL"></topic>
+                       <topic href="html/wearable_n/cairo_evasgl_sd_wn.htm" label="(Circle) Cairo EvasGL"></topic>                     
                        <topic href="html/wearable_n/circleemail_sd_wn.htm" label="(Circle) Email"></topic>
+                       <topic href="html/wearable_n/circlerotarytimer_sd_wn.htm" label="(Circle) Rotary Timer"></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/rectnotificationmanager_sd_wn.htm" label="(Rectangle) NotificationManager"></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 href="html/wearable_n/analog_watch_sd_wn.htm" label="Analog Watch"></topic>

diff --git a/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
index 3619a94..450019f 100644 (file)
--- a/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/application_tutorial_n.htm
@@ -242,22 +242,15 @@ main(int argc, char *argv[])
 <li><p>To use the functions and data types of the App Control API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__APP__CONTROL__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__APP__CONTROL__MODULE.html">wearable</a> applications), include the <span style="font-family: Courier New,Courier,monospace">&lt;app.h&gt;</span> header file in your application:</p>
 <pre class="prettyprint">
 #include &lt;app.h&gt;
-</pre></li>
-<li>
-<p>The <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/email</span> and <span style="font-family: Courier New,Courier,monospace">http://tizen.org/privilege/email.admin</span> privileges are required for the Email API.</p>
-<p>Add the privileges to the <span style="font-family: Courier New,Courier,monospace">tizen-manifest.xml</span> file.</p></li>
+</pre>
+</li>
+
 <li>
 <p>Prepare <span style="font-family: Courier New,Courier,monospace">app_control</span>.</p>
-<p>In this example, an email message is being prepared and then the email service is opened to allow the user to customize or send the ready message.</p>
-
-<p>When <span style="font-family: Courier New,Courier,monospace">app_control</span> is created, set the operation. It is mandatory information for the launch request. If the operation is not specified, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span> is used for the launch request.</p>
-<p>Add extra data to the app_control using the <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data()</span>    or <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data_array()</span> function.</p>
-<p>Set the package name for <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_set_package()</span> function. Use the application package name to launch the application explicitly.</p>
-
-<pre class="prettyprint">error_code = app_control_create(&amp;app_control);
-char *mail_address = &quot;test@target.com&quot;;
-char *subject = &quot;Tutorial message&quot;;
-char *message = &quot;Tutorial message content.&quot;;
+<p>In this example, the <span style="font-family: Courier New,Courier,monospace">app_control</span> launches an application which has the <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_VIEW</span> operation and <span style="font-family: Courier New,Courier,monospace">image/jpeg</span> mime type with a message.</p>
+<p>When the <span style="font-family: Courier New,Courier,monospace">app_control</span> is created, set the operation. The operation is mandatory information for the launch request. If the operation is not specified, <span style="font-family: Courier New,Courier,monospace">APP_CONTROL_OPERATION_DEFAULT</span> is used for the launch request. Add extra data to the <span style="font-family: Courier New,Courier,monospace">app_control</span> using the <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data()</span> or <span style="font-family: Courier New,Courier,monospace">app_control_add_extra_data_array()</span> function.</p>
+<pre class="prettyprint">
+error_code = app_control_create(&amp;app_control);
 
 ret = app_control_create(&amp;app);
 if (ret != APP_CONTROL_ERROR_NONE)

diff --git a/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
index 7f180c6..84aeaa4 100644 (file)
--- a/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/app_framework/shortcut_tutorial_n.htm
@@ -69,7 +69,7 @@
 </li>
 <li><p>To add a shortcut, use the <span style="font-family: Courier New,Courier,monospace">shortcut_add_to_home()</span> function:</p>
 
-<pre class="prettyprint">shortcut_add_to_home(&quot;Music Player&quot;, LAUNCH_BY_PACKAGE, NULL, &quot;/path/to/icon&quot;, 1, result_cb, NULL);</pre>
+<pre class="prettyprint">shortcut_add_to_home(&quot;Music Player&quot;, LAUNCH_BY_APP, NULL, &quot;/path/to/icon&quot;, 1, result_cb, NULL);</pre>
 
 <p>To add a shortcut, you have to know the package name and set an icon for the application. The icon parameter can be set to <span style="font-family: Courier New,Courier,monospace">NULL</span> (as above) to add a default icon for the application.</p></li>
 

diff --git a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
index 1d99531..0ed1cb0 100644 (file)
--- a/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/base/sqlite_tutorial_n.htm
@@ -39,7 +39,7 @@
 <h1>Sqlite: Managing the SQL Database</h1>
 
   
-<p>This tutorial demonstrates how you can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are located within the API layout (for <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout">mobile</a> and <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout_w">wearable</a> applications).</p>
+<p>This tutorial demonstrates how you can use the open source modules, whose functions provide access to SQLite and OpenSSL and demonstrate how to encrypt and store application data. The open source modules supported by Tizen are located within the <a href="../../../../org.tizen.gettingstarted/html/native/details/tizen_apis_n.htm#layout">API layout</a>.</p>
 
 <h2>Warm-up</h2> 
 <p>Become familiar with the basics of the Sqlite API by learning about:</p> 

diff --git a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
index 54195de..3444164 100644 (file)
--- a/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/graphics/opengl_tutorial_n.htm
@@ -44,8 +44,6 @@
                <p class="toc-title">Related Info</p>
                <ul class="toc">
             <li><a href="../../../../org.tizen.guides/html/native/graphics/opengles_n.htm">OpenGL ES Guide</a></li>
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Mobile Native</a></li>
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/group__OPENSRC__OPENGL__ES__FRAMEWORK.html">OpenGL ES API for Wearable Native</a></li>
                </ul>
        </div></div>
 </div> 

diff --git a/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
index 532d063..958cc76 100644 (file)
--- a/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/multimedia/audio_io_tutorial_n.htm
@@ -153,6 +153,7 @@ error_code = audio_in_get_channel(input, &channel);
 <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;
 error_code = audio_in_get_sample_type(input, &amp;sample_type);
 </pre>
 </li>
@@ -192,7 +193,9 @@ ecore_thread_run(synchronous_playback, NULL, NULL, NULL);
 <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 class="prettyprint">
+// Audio input prepare (starts the hardware recording process)
+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>
@@ -215,6 +218,7 @@ int bytes_number = audio_in_read(input, buffer, buffer_size);
 <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>
 
@@ -222,6 +226,7 @@ error_code = audio_in_unprepare(input);
 <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>
@@ -238,6 +243,7 @@ int bytes_number = audio_out_write(output, buffer, buffer_size);
 <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>
 
@@ -336,6 +342,7 @@ if (!fp_w)
 <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>
 
 <pre class="prettyprint">
+// Audio input prepare (starts the hardware recording process)
 error_code = audio_in_prepare(input);
 </pre>
 
@@ -344,6 +351,7 @@ error_code = audio_in_prepare(input);
 <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)
 {
 &nbsp;&nbsp;&nbsp;const void * buffer = NULL;
@@ -380,17 +388,20 @@ void _audio_io_stream_read_cb(audio_in_h handle, size_t nbytes, void *userdata)
 <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:
 
 <pre class="prettyprint">
+// Stop the hardware recording process
 error_code = audio_in_unprepare(input);
 </pre>
 </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>
 
 <pre class="prettyprint">
+// Close the file used for recording
 error_code = fclose(fp_w);
 </pre>
 </li></ol>
@@ -408,6 +419,7 @@ error_code = audio_out_set_stream_cb(output, _audio_io_stream_write_cb, NULL);
 <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>
 
 <pre class="prettyprint">
+// Prepare a file to be used for playback
 #include &lt;storage.h&gt;
 
 char io_stream_r_path[200];
@@ -425,6 +437,7 @@ FILE* fp_r = fopen(io_stream_r_path, &quot;r&quot;);
 <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>
 
 <pre class="prettyprint">
+// Audio output prepare (starts the hardware playback process)
 error_code = audio_out_prepare(output);
 </pre>
 
@@ -435,6 +448,7 @@ error_code = audio_out_prepare(output);
 <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)
 {
 &nbsp;&nbsp;&nbsp;char * buffer = NULL;
@@ -473,6 +487,7 @@ error_code = audio_out_unprepare(output);
 <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>
 
 <pre class="prettyprint">
+// Unset the callback function used for asynchronous playback process
 error_code = audio_out_unset_stream_cb(output);
 </pre>
 </li>
@@ -480,6 +495,7 @@ error_code = audio_out_unset_stream_cb(output);
 <p>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>
@@ -491,7 +507,9 @@ error_code = fclose(fp_r);
 
 <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">free(buffer);</pre></li>
+<pre class="prettyprint">
+// Release the memory allocated for the local buffer used for recording/playing
+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>
 

diff --git a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
index c79befa..99ad33b 100644 (file)
--- a/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/security/key_tutorial_n.htm
@@ -90,7 +90,7 @@
 \r
 <p>To define the header file and privileges required to use the key manager:</p>\r
 <ol>           \r
-<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>\r
+<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>\r
 <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">&lt;ckmc/ckmc-manager.h&gt;</span> header file in your application:</p>\r
 <pre class="prettyprint">\r
 #include &lt;ckmc/ckmc-manager.h&gt;\r
@@ -206,6 +206,7 @@ if (CKMC_ERROR_NONE != ret)
 </table>\r
 </li></ol>\r
 \r
+\r
 <h2 id="savingcert" name="savingcert">Saving, Getting, or Removing a Certificate</h2>\r
 \r
 <p>To store, remove, or retrieve the client certificate from the key manager:</p>\r
@@ -407,8 +408,7 @@ if (CKMC_ERROR_NONE != ret)
 {\r
 &nbsp;&nbsp;&nbsp;// Error handling\r
 }\r
-</pre>\r
-</li></ol>\r
+</pre></li></ol>\r
 \r
 <h2 id="creatingkey" name="creatingkey">Creating Key Pairs</h2>\r
 \r
@@ -921,31 +921,31 @@ const char *password = &quot;password&quot;;  // PKCS#12 file can be protected b
 \r
 ret = ckmc_pkcs12_load(p12file, password, &amp;ppkcs12);\r
 if (CKMC_ERROR_NONE != ret || ppkcs12 == NULL)\r
+\r
 {\r
 &nbsp;&nbsp;&nbsp;// Error handling\r
 }\r
 \r
-if (ppkcs12->priv_key != NULL)\r
+if (ppkcs12-&gt;priv_key != NULL)\r
 {\r
 &nbsp;&nbsp;&nbsp;// Check a private key\r
 }\r
 \r
-if (ppkcs12->cert != NULL)\r
+if (ppkcs12-&gt;cert != NULL)\r
 {\r
 &nbsp;&nbsp;&nbsp;// Check a certificate\r
 \r
 }\r
 \r
 int cnt = 0;\r
-ckmc_cert_list_s *tmp_list = ppkcs12->ca_chain;\r
+ckmc_cert_list_s *tmp_list = ppkcs12-&gt;ca_chain;\r
 while(tmp_list!= NULL)\r
 {\r
 &nbsp;&nbsp;&nbsp;// Check a certificate list\r
 \r
 &nbsp;&nbsp;&nbsp;tmp_list = tmp_list -&gt;next;\r
 }\r
-\r
-ckmc_pkcs12_free(ppkcs12);; // Called when the pkcs12 data is no longer needed\r
+ckmc_pkcs12_free(ppkcs12); // Called when the pkcs12 data is no longer needed\r
 </pre>\r
 </li></ul>\r
 \r
@@ -996,8 +996,7 @@ if (CKMC_ERROR_NONE != ret)
 {\r
 &nbsp;&nbsp;&nbsp;// Error handling\r
 }\r
-</pre>\r
-</li>\r
+</pre></li>\r
 \r
 <li><p>Set a rule to deny access:</p>\r
 <pre class="prettyprint">\r
@@ -1018,8 +1017,7 @@ if (CKMC_ERROR_NONE != ret)
 {\r
 &nbsp;&nbsp;&nbsp;// Error handling\r
 }\r
-</pre>\r
-</li>\r
+</pre></li>\r
 </ol>\r
 \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
@@ -1045,4 +1043,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script> \r
  \r
  </body>\r
- </html>\r
+ </html>
\ No newline at end of file

diff --git a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
index 19adc11..0b92f5e 100644 (file)
--- a/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
+++ b/org.tizen.tutorials/html/native/telephony/telephony_info_tutorial_n.htm
@@ -250,7 +250,47 @@ void voice_call_status_noti_cb(telephony_h handle, telephony_noti_e noti_id, voi
          break;
    }
 
-// Get current call list
+   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 ? "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);
+   }
+}
 
 void tutorial_telephony_set_noti_cb_voice()
 {

diff --git a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm
index 617b5e2..4b38bcb 100644 (file)
--- a/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm
+++ b/org.tizen.tutorials/html/native/uix/voicecontrol_tutorials_n.htm
@@ -24,8 +24,8 @@
                <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>
+                       <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> 

diff --git a/org.tizen.ui.guides/html/images/accordion_menu.png b/org.tizen.ui.guides/html/images/accordion_menu.png
new file mode 100644 (file)
index 0000000..9647530
Binary files /dev/null and b/org.tizen.ui.guides/html/images/accordion_menu.png differ

diff --git a/org.tizen.ui.guides/html/images/dali_component.png b/org.tizen.ui.guides/html/images/dali_component.png
index cec1dcc..db4bc0a 100755 (executable)
Binary files a/org.tizen.ui.guides/html/images/dali_component.png and b/org.tizen.ui.guides/html/images/dali_component.png differ

diff --git a/org.tizen.ui.guides/html/images/dragdrop.png b/org.tizen.ui.guides/html/images/dragdrop.png
new file mode 100644 (file)
index 0000000..3fb9ded
Binary files /dev/null and b/org.tizen.ui.guides/html/images/dragdrop.png differ

diff --git a/org.tizen.ui.guides/html/images/multi_node_selection.png b/org.tizen.ui.guides/html/images/multi_node_selection.png
new file mode 100644 (file)
index 0000000..33654de
Binary files /dev/null and b/org.tizen.ui.guides/html/images/multi_node_selection.png differ

diff --git a/org.tizen.ui.guides/html/images/rectangular_processing.png b/org.tizen.ui.guides/html/images/rectangular_processing.png
index 08d8502..5a8d4f7 100644 (file)
Binary files a/org.tizen.ui.guides/html/images/rectangular_processing.png and b/org.tizen.ui.guides/html/images/rectangular_processing.png differ

diff --git a/org.tizen.ui.guides/html/images/round_footer.png b/org.tizen.ui.guides/html/images/round_footer.png
index d5c63b4..6b677ec 100644 (file)
Binary files a/org.tizen.ui.guides/html/images/round_footer.png and b/org.tizen.ui.guides/html/images/round_footer.png differ

diff --git a/org.tizen.ui.guides/html/images/round_moreoption.png b/org.tizen.ui.guides/html/images/round_moreoption.png
index adec378..fe755d1 100644 (file)
Binary files a/org.tizen.ui.guides/html/images/round_moreoption.png and b/org.tizen.ui.guides/html/images/round_moreoption.png differ

diff --git a/org.tizen.ui.guides/html/images/round_multibtn.png b/org.tizen.ui.guides/html/images/round_multibtn.png
index 77b6d6b..d8dcd9d 100644 (file)
Binary files a/org.tizen.ui.guides/html/images/round_multibtn.png and b/org.tizen.ui.guides/html/images/round_multibtn.png differ

diff --git a/org.tizen.ui.guides/html/images/round_processing.png b/org.tizen.ui.guides/html/images/round_processing.png
index 7b59fe2..030ef40 100644 (file)
Binary files a/org.tizen.ui.guides/html/images/round_processing.png and b/org.tizen.ui.guides/html/images/round_processing.png differ

diff --git a/org.tizen.ui.guides/html/images/signal_slot.png b/org.tizen.ui.guides/html/images/signal_slot.png
index eac4d50..18d2f4e 100755 (executable)
Binary files a/org.tizen.ui.guides/html/images/signal_slot.png and b/org.tizen.ui.guides/html/images/signal_slot.png differ

diff --git a/org.tizen.ui.guides/html/images/single_node_selection.png b/org.tizen.ui.guides/html/images/single_node_selection.png
new file mode 100644 (file)
index 0000000..3dc9a26
Binary files /dev/null and b/org.tizen.ui.guides/html/images/single_node_selection.png differ

diff --git a/org.tizen.ui.guides/html/index.htm b/org.tizen.ui.guides/html/index.htm
index d2fe391..738f54d 100755 (executable)
--- a/org.tizen.ui.guides/html/index.htm
+++ b/org.tizen.ui.guides/html/index.htm
@@ -28,22 +28,22 @@
                <li><a href="web/tau/guides_tau_w.htm">TAU</a>
                        <ul>
                                <li><a href="web/tau/helloworld_w.htm">Hello World</a></li>
-                               <li><a href="web/tau/managing_page_w.htm">Managing Pages</a></li>
                                <li><a href="web/tau/event_handling_w.htm">Event Handling</a></li>
+                               <li><a href="web/tau/managing_page_w.htm">Managing Page</a></li>
                                <li><a href="web/tau/ui_component_w.htm">UI Components</a></li>
-                               <li><a href="web/tau/notepad_w.htm">Creating a UI</a></li>
-                               <li><a href="web/tau/circular_ui_ww.htm">Circular UI</a>
+                               <li><a href="web/tau/notepad_w.htm">Creating a Notepad UI Application</a></li>
+                               <li><a href="web/tau/circular_ui_ww.htm">Applications for Circular UI</a>
                                        <ul>
-                                               <li><a href="web/tau/list_ww.htm">List</a></li>
-                                               <li><a href="web/tau/helper_ww.htm">Helper Script</a></li>
-                                               <li><a href="web/tau/header_ww.htm">Header</a></li>
-                                               <li><a href="web/tau/circle_progressbar_ww.htm">Circle Progress Bar</a></li>
-                                               <li><a href="web/tau/processing_ww.htm">Processing</a></li>
-                                               <li><a href="web/tau/moreoptions_ww.htm">More Options</a></li>
-                                               <li><a href="web/tau/footerbutton_ww.htm">Footer Button</a></li>
-                                               <li><a href="web/tau/thumbnail_ww.htm">Thumbnail</a></li>               
-                                               <li><a href="web/tau/popup_ww.htm">Popup</a></li>
-                                               <li><a href="web/tau/indexscrollbar_ww.htm">Index Scroll Bar</a></li>
+                                               <li><a href="web/tau/helper_ww.htm">Using Helper Script</a></li>
+                                               <li><a href="web/tau/list_ww.htm">Creating Snap Lists</a></li>  
+                                               <li><a href="web/tau/header_ww.htm">Creating Expandable Headers</a></li>
+                                               <li><a href="web/tau/circle_progressbar_ww.htm">Creating Circle-shaped Progress Bars</a></li>
+                                               <li><a href="web/tau/processing_ww.htm">Creating Full Size Processing Components</a></li>
+                                               <li><a href="web/tau/footerbutton_ww.htm">Creating Footer Buttons</a></li>
+                                               <li><a href="web/tau/thumbnail_ww.htm">Creating Thumbnails</a></li>             
+                                               <li><a href="web/tau/popup_ww.htm">Creating Popup Buttons</a></li>
+                                               <li><a href="web/tau/indexscrollbar_ww.htm">Creating Index Scroll Bars</a></li>
+                                               <li><a href="web/tau/moreoptions_ww.htm">Implementing More Options </a></li>
                                        </ul>
                                </li>
                                <li><a href="web/tau/accessibility_w.htm">Accessibility</a></li>
@@ -53,11 +53,15 @@
                <li><a href="web/w3c/guides_w3c_w.htm">W3C</a>
                        <ul>
                                <li><a href="web/w3c/html_priority_w.htm">HTML Priorities</a></li>
+                               <li><a href="web/w3c/html5forms_w.htm">HTML5 Forms</a></li>
+                               <li><a href="web/w3c/selector_w.htm">Selectors API Level 1 and Level 2</a></li>                                 
                                <li><a href="web/w3c/media_query_w.htm">Media Queries</a></li>
                                <li><a href="web/w3c/multiple_screens_mw.htm">Multiple Screen Support</a></li>
                                <li><a href="web/w3c/ui_layout_ww.htm">Multiple UI Layouts</a></li>
                                <li><a href="web/w3c/frame_flattening_mw.htm">Frame Flattening</a></li>
+                               <li><a href="web/w3c/session_history_w.htm">HTML5 session history of browsing contexts</a></li>
                                <li><a href="web/w3c/clipboard_mw.htm">Clipboard API and events</a></li>
+                               <li><a href="web/w3c/drag_drop_mw.htm">HTML5 Drag and drop</a></li>
                                <li><a href="web/w3c/transform_w.htm">CSS Transforms</a></li>
                                <li><a href="web/w3c/animation_w.htm">CSS Animations Module Level 3</a></li>
                                <li><a href="web/w3c/transition_w.htm">CSS Transitions Module Level 3</a></li>

diff --git a/org.tizen.ui.guides/html/native/dali/actors_n.htm b/org.tizen.ui.guides/html/native/dali/actors_n.htm
index 384659d..825357a 100755 (executable)
--- a/org.tizen.ui.guides/html/native/dali/actors_n.htm
+++ b/org.tizen.ui.guides/html/native/dali/actors_n.htm
@@ -23,16 +23,17 @@
                <div id="toc_border"><div id="toc">\r
                <p class="toc-title">Content</p>\r
                <ul class="toc">\r
-                       <li><a href="#actors">Actors and Stage</a></li>\r
-                       <li><a href="#coordinate">Coordinate System</a></li>\r
-                       <li><a href="#position">Positioning Actors</a></li>\r
-                       <li><a href="#event">Event Handling for Actors</a></li>\r
+                       <li><a href="#basics">Actor Basics</a></li>\r
+                       <li><a href="#layout">Layout Management</a></li>\r
+                       <li><a href="#image">Image Actor</a></li>\r
                </ul>\r
                <p class="toc-title">Related Info</p>\r
                <ul class="toc">\r
                        <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Mobile Native</a></li>\r
                        <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Stage.html">Dali::Stage API for Mobile Native</a></li>\r
                        <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>\r
+                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Wearable Native</a></li>\r
                        <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Stage.html">Dali::Stage API for Wearable Native</a></li>                   \r
                </ul>\r
        </div></div>\r
@@ -41,11 +42,15 @@
 <div id="container"><div id="contents"><div class="content">\r
 <h1>Actors: Working with Basic DALi Components</h1>\r
 \r
+<p>Actor is the primary object in DALi application.</p>\r
+\r
+<h2 id="basics" name="basics">Actor Basics</h2>\r
+\r
 \r
 <p>Actor is the basic component that composes the entire scene. It can have visible (for example, UI components, image actor) or invisible (for example, camera actor or layer) forms.</p>\r
 <p>Actor is also the primary object with which DALi applications interact. Multiple types of event signals provided by actors can be handled in a application through user-defined callback functions.</p>\r
 \r
-<h2 id="actors" name="actors">Actors and Stage</h2>\r
+<h3 id="actors" name="actors">Actors and Stage</h3>\r
 \r
 <p>Stage is a top-level object that represents the entire scene or screen. It is used for displaying a hierarchy of actors managed by the <a href="http://en.wikipedia.org/wiki/Scene_graph" target="_blank">scene graph</a> structure. An actor inherits a position relative to its parent, and can be moved in relation to this point.</p>\r
 \r
@@ -55,7 +60,7 @@
 Stage::GetCurrent().Add(actor);\r
 </pre>\r
 \r
-<h2 id="coordinate" name="coordinate">Coordinate System</h2>\r
+<h3 id="coordinate" name="coordinate">Coordinate System</h3>\r
 \r
 <p>The stage has a 2D size that matches the size of the application window. The default unit 1 is 1 pixel with default camera.</p>\r
 \r
@@ -65,7 +70,7 @@ Stage::GetCurrent().Add(actor);
        <p align="center"><img alt="DALi coordinate system" src="../../images/actor_coordinates.png"/></p> \r
        \r
        \r
-<h2 id="position" name="position">Positioning Actors</h2>\r
+<h3 id="position" name="position">Positioning Actors</h3>\r
 <p>An actor inherits its parent&#39;s position. The relative position between the actor &amp; parent is determined by the following properties:</p>\r
 <ul>\r
 <li>Parent origin\r
@@ -98,7 +103,7 @@ Stage::GetCurrent().Add(actor);
 </li>\r
 </ul> \r
 \r
-<h2 id="event" name="event">Event Handling for Actors</h2>\r
+<h3 id="event" name="event">Event Handling for Actors</h3>\r
 <p>The <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class provides following event signals:</p> \r
 \r
 <table>\r
@@ -168,6 +173,202 @@ actor.TouchedSignal().Connect(&amp;OnTouch);</pre>
 \r
 <p>For more information, see <a href="event_handling_n.htm">Event Handling</a>.</p> \r
 \r
+<h2 id="layout" name="layout">Layout Management</h2>\r
+\r
+<p>DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.</p> \r
+\r
+<h3 id="dimension" name="dimension">Dimensions</h3>\r
+<p>The notion of width and height is generalized into the concept of a dimension. Several methods take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dimension</span> enum specifies the available dimensions as bit fields:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>\r
+</ul>\r
+<p>If a method can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p> \r
+\r
+<h3 id="resize" name="resize">Resize Policies</h3>\r
+\r
+<p>The <span style="font-family: Courier New,Courier,monospace;">ResizePolicy</span> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>\r
+\r
+<table>\r
+   <caption>\r
+     Table: Resizing rules\r
+   </caption>\r
+   <tbody>\r
+    <tr>\r
+     <th>Resize policy</th>\r
+     <th>Description</th>\r
+        <th>Illustration</th>\r
+    </tr>\r
+    <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>\r
+     <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>\r
+     <td>Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>\r
+        <td style="text-align:center;"></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>\r
+     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the SetSizeModeFactor function.</td>\r
+        <td style="text-align:center;"></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>\r
+     <td>The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>\r
+    </tr>\r
+       <tr>\r
+     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>\r
+     <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>\r
+        <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>\r
+       </tr>\r
+   </tbody>\r
+  </table>\r
+\r
+\r
+<h3 id="example" name="example">Example with Actors</h3>\r
+\r
+<p>This section describes a layout example with a actor.</p> \r
+\r
+<h4>Enabling Size Negotiation</h4>\r
+\r
+<p>Text and image actors have relayout enabled by default, while plain actors are disabled unless the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function is called.</p> \r
+\r
+<h4>Specifying Size Policies</h4>\r
+\r
+<p>Actors have different size policies by default. For example, the  image actor is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p> \r
+\r
+<p>You can specify how an actor is size-negotiated:</p> \r
+\r
+<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>\r
+\r
+<p>It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> by default.</p> \r
+\r
+<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">rootActor</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has an image actor added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> in both dimensions called on it. This creates an actor that fills the space of its parent in the width dimension and fits its child in the height dimension. As the image actor child is using its natural size, the height of the root actor fits the height of the child image.</p> \r
+\r
+<pre class="prettyprint">Actor rootActor = Actor::New();\r
+rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);\r
+ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));\r
+image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);\r
+rootActor.Add(image);</pre>\r
+\r
+<p>The following images show the before and after layouts for this code example.</p>\r
+\r
+<p class="figure">Figure: Before and after setting the resize policy</p>  \r
+       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/></p>\r
+       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> \r
+\r
+\r
+<p>This example shows a root actor set to expand to its parent&#39;s width and adjust around its child&#39;s height. The child image actor is set to its natural size.</p> \r
+\r
+<p>To specify that a dimension has a dependency on another dimension, use the <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> policy. For example, if the dimension is <span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span> and the dependency is <span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span>, there is a height-for-width dependency in effect. You can use the policy in a text view that wraps its text. The following example  shows a text view that expands its width according to the size of its parent, wraps its contents and then determines its height based on the width.</p> \r
+\r
+<pre class="prettyprint">TextLabel text = TextLabel::New(&quot;Example&quot;);\r
+text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
+text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>\r
+\r
+<h4>Specifying Sizes and Size Limits</h4>\r
+\r
+<p>To specify a fixed size for an actor, use the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> resize policy and set the desired size using the SetSize function. If only 1 dimension is <span style="font-family: Courier New,Courier,monospace;">FIXED</span>, the other value in the size parameter is ignored, so it is safe to set it to 0.</p>\r
+<p>To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:</p> \r
+\r
+<pre class="prettyprint">void SetMinimumSize(const Vector2&amp; size)\r
+void SetMaximumSize(const Vector2&amp; size)</pre>\r
+\r
+<h4>Adjusting the Negotiated Size</h4>\r
+\r
+<p>When an actor must to maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy()</span> function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>\r
+<p>You can use the following resize policies:</p>\r
+<ul>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>\r
+<p>This is the default policy.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>\r
+<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>\r
+<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>\r
+</ul>\r
+\r
+<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>\r
+\r
+<h4>Using Actors in Containers</h4>\r
+\r
+<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.</p> \r
+\r
+<pre class="prettyprint">void SetPadding(const Padding&amp; padding)</pre>\r
+\r
+ <table class="note">\r
+   <tbody>\r
+    <tr>\r
+     <th class="note">Note</th>\r
+    </tr>\r
+    <tr>\r
+     <td class="note"><p>Beware of infinite dependency loops!</p>\r
+<p>The simplest form of this is shown when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>.</p> \r
+<p>A more complex loop occurs when a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. The parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width. If the child&#39;s width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>\r
+<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates  actors 0 sizes.</p> </td>\r
+    </tr>\r
+   </tbody>\r
+ </table>\r
+\r
+<h2 id="image" name="image">Image Actor</h2>\r
+<p>An image can be displayed through an image actor. THe <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span> class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class and provides means to display resources, such as images on the stage.</p>\r
+\r
+<h3 id="construction" name="construction">Construction</h3>\r
+\r
+<p>The image actor is constructed by passing a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for loading an image from a file.</p> \r
+\r
+<pre class="prettyprint">Dali::Image image = ResourceImage::New(myImageFilename);\r
+Dali::ImageActor myImageActor = ImageActor::New(image);</pre>\r
+\r
+<h3 id="style" name="style">Style</h3>\r
+\r
+<p>The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.</p>\r
+<ul> \r
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_QUAD</span>: A simple flat quad style for rendering images.</li>\r
+<li><span style="font-family: Courier New,Courier,monospace;">STYLE_NINE_PATCH</span>: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.</li>\r
+</ul>\r
+\r
+<pre class="prettyprint">myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);</pre>\r
+\r
+<h3 id="border" name="border">Border</h3>\r
+\r
+<p>The border is used in the <span style="font-family: Courier New,Courier,monospace;">ImageActor::STYLE_NINE_PATCH</span>. It defines the border values of the image for stretching.</p> \r
+\r
+<pre class="prettyprint">Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);\r
+myImageActor.SetBorder(border);</pre>\r
+\r
+<h3 id="pixel" name="pixel">Pixel Area</h3>\r
+\r
+<p>The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.</p> \r
+\r
+<pre class="prettyprint">Rect&lt;int&gt; pixel1(myX, myY, myWidth, myHeight);\r
+if(!myImageActor.IsPixelAreaSet())\r
+{\r
+&nbsp;&nbsp;&nbsp;myImageActor.SetPixelArea(pixel1);\r
+}\r
+\r
+//Removes the pixel area setting\r
+myImageActor.ClearPixelArea();</pre>\r
+\r
+<h3 id="initial" name="initial">Changing an Image</h3>\r
+\r
+<p>The image actor needs a reference to a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object on creation. However the Image object can be later changed by calling <span style="font-family: Courier New,Courier,monospace;">DaliActor:SetImage()</span> function.</p>\r
+\r
+<pre class="prettyprint">myImageActor.SetImage(newImage);</pre>\r
+\r
     \r
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
 <script type="text/javascript" src="../../scripts/showhide.js"></script>\r

diff --git a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
index cb67d3a..47184a2 100755 (executable)
--- a/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
+++ b/org.tizen.ui.guides/html/native/dali/dali_overview_n.htm
@@ -47,7 +47,7 @@
 <h3>Actor and Stage</h3>\r
 \r
 <p>Actor is the primary object for interaction in DALi applications. Actors are effective nodes that receive input (touch events) and act as a container for drawable elements and other actors. A DALi application uses a hierarchy of actor objects to position visible content. An actor inherits a position relative to its parent, and can be moved relative to this point. UI components can be built by combining multiple actors.</p>\r
-<p>Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add it to the stage.</p>\r
+<p>Stage is a top-level node of the scene graph used for displaying a tree of actors. To display an actor, add is to the stage.</p>\r
 \r
 <h3>Signal and Slot</h3>\r
 \r
@@ -68,7 +68,7 @@ DALi.</p>
 <li><span style="font-family: Courier New,Courier,monospace;">dali-toolkit</span>\r
 <p>This module provides UI components and various effects on top of the dali-core.</p></li>\r
 <li><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span>\r
-<p><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> is a platform adaptation layer. It initializes and sets up DALi appropriately. The module provides many platform-related services with its internal module, platform abstraction. Several signals can be connected to it to keep you informed when certain platform-related activities occur.</p></li>\r
+<p><span style="font-family: Courier New,Courier,monospace;">dali-adaptor</span> is a platform adaptation layer. It initializes and sets up DALi appropriately. The module provides many platform-related services. Several signals can be connected to it to keep you informed when certain platform-related activities occur.</p></li>\r
 </ul>\r
 <p class="figure">Figure: DALi internal structure</p>\r
 <p align="center"><img alt="DALi internal structure" src="../../images/dali_component.png" /></p>\r

diff --git a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
index 07ffd8d..8eace44 100755 (executable)
--- a/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
+++ b/org.tizen.ui.guides/html/native/dali/event_handling_n.htm
@@ -67,10 +67,7 @@
 \r
 <p>The concept of signal and slots were introduced by Qt for communication between objects. The event mechanism of DALi is inspired by Qt.</p>\r
 \r
-<p class="figure">Figure: A schematic example of signal-slot connections<br>\r
-                                                                       : Signal 1 is connected to slot 1,<br>\r
-                                                                       signal 2 is connected to slot 1 & slot 3, <br>\r
-                                                                       and signal 3 is connected to slot 2.</p>  \r
+<p class="figure">Figure: Signal and slot event handling</p>  \r
        <p align="center"><img alt="Signal and slot event handling" src="../../images/signal_slot.png"/></p> \r
  \r
 <p>The signal and slot system has following advantages:</p>\r

diff --git a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
index 178ce2e..9bfd3d7 100755 (executable)
--- a/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
+++ b/org.tizen.ui.guides/html/native/dali/guides_dali_n.htm
@@ -41,10 +41,6 @@
        <p>Enables you to get started with the DALi UI programming.</p></li>
        <li><a href="actors_n.htm">Actors: Working with Basic DALi Components</a>
        <p>Enables you to handle DALi actors.</p></li>
-       <ul>
-               <li><a href="layout_n.htm">Layout Management: Allocating the Sizes of the Actors</a></li>
-               <li><a href="imageactor_n.htm">Image Actor: Displaying Images</a></li>
-       </ul>
        <li><a href="event_handling_n.htm">Event Handling: Managing the Event Flow</a>
        <p>Enables you to handle DALi events.</p></li>
        <li><a href="ui_components_n.htm">UI Components: Creating the Application Layout</a>

diff --git a/org.tizen.ui.guides/html/native/dali/imageactor_n.htm b/org.tizen.ui.guides/html/native/dali/imageactor_n.htm
deleted file mode 100755 (executable)
index 34dc3a0..0000000
--- a/org.tizen.ui.guides/html/native/dali/imageactor_n.htm
+++ /dev/null
@@ -1,111 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
-<head>\r
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
-\r
-       <title>Actors: Working with Basic DALi Components</title>  \r
-</head>\r
-\r
-<body onload="prettyPrint()" style="overflow: auto;">\r
-\r
-<div id="toc-navigation">\r
-       <div id="profile">\r
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
-       </div>\r
-               <div id="toc_border"><div id="toc">\r
-               <p class="toc-title">Content</p>\r
-               <ul class="toc">\r
-                       <li><a href="#construction">Construction</a></li>\r
-                       <li><a href="#style">Style</a></li>\r
-                       <li><a href="#border">Border</a></li>\r
-                       <li><a href="#initial">Changing an Image</a></li>\r
-               </ul>\r
-               <p class="toc-title">Related Info</p>\r
-               <ul class="toc">\r
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Mobile Native</a></li>\r
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1ImageActor.html">Dali::ImageActor API for Wearable Native</a></li>\r
-               </ul>\r
-       </div></div>\r
-</div> \r
-\r
-<div id="container"><div id="contents"><div class="content">\r
-<h1>Image Actor: Displaying Images</h1>\r
-\r
-<p>An image can be displayed through an image actor. THe <span style="font-family: Courier New,Courier,monospace;">Dali::ImageActor</span> class inherits from the <span style="font-family: Courier New,Courier,monospace;">Dali::Actor</span> class and provides means to display resources, such as images on the stage.</p>\r
-\r
-<h2 id="construction" name="construction">Construction</h2>\r
-\r
-<p>The image actor is constructed by passing a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object. The <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> is an abstract base class with multiple derived classes, and the <span style="font-family: Courier New,Courier,monospace;">Dali::ResourceImage</span> class is used for loading an image from a file.</p> \r
-\r
-<pre class="prettyprint">Dali::Image image = ResourceImage::New(myImageFilename);\r
-Dali::ImageActor myImageActor = ImageActor::New(image);</pre>\r
-\r
-<h2 id="style" name="style">Style</h2>\r
-\r
-<p>The image actor can render an image in 2 different ways. Although the nine-patch feature is supported by the image actor, using 9-patch image (.9.png or .9.jpg) is encouraged.</p>\r
-<ul> \r
-<li><span style="font-family: Courier New,Courier,monospace;">STYLE_QUAD</span>: A simple flat quad style for rendering images.</li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">STYLE_NINE_PATCH</span>: This style gives the flexibility to stretch images by dividing it into 9 sections. The corners are not scaled; the edges are scaled on 1 axis, and the middle is scaled in both axes.</li>\r
-</ul>\r
-\r
-<pre class="prettyprint">myImageActor.SetStyle (Dali::ImageActor::STYLE_NINE_PATCH);</pre>\r
-\r
-<h2 id="border" name="border">Border</h2>\r
-\r
-<p>The border is used in the <span style="font-family: Courier New,Courier,monospace;">ImageActor::STYLE_NINE_PATCH</span>. It defines the border values of the image for stretching.</p> \r
-\r
-<pre class="prettyprint">Dali::ImageActor::Border border(0.45,0.15,0.45,0.15);\r
-myImageActor.SetBorder(border);</pre>\r
-\r
-<h2 id="pixel" name="pixel">Pixel Area</h2>\r
-\r
-<p>The area of the image to be displayed by the image actor can be set by setting the pixel area. The pixel area is relative to the top-left (0,0) coordinates of the image.</p> \r
-\r
-<pre class="prettyprint">Rect&lt;int&gt; pixel1(myX, myY, myWidth, myHeight);\r
-if(!myImageActor.IsPixelAreaSet())\r
-{\r
-&nbsp;&nbsp;&nbsp;myImageActor.SetPixelArea(pixel1);\r
-}\r
-\r
-//Removes the pixel area setting\r
-myImageActor.ClearPixelArea();</pre>\r
-\r
-<h2 id="initial" name="initial">Changing an Image</h2>\r
-\r
-<p>The image actor needs a reference to a <span style="font-family: Courier New,Courier,monospace;">Dali::Image</span> object on creation. However the Image object can be later changed by calling <span style="font-family: Courier New,Courier,monospace;">DaliActor:SetImage()</span> function.</p>\r
-\r
-<pre class="prettyprint">myImageActor.SetImage(newImage);</pre>\r
-\r
-    \r
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
-<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
-</div></div></div>\r
-\r
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
-\r
-<div id="footer">\r
-<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>\r
-</div>\r
-\r
-<script type="text/javascript">\r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-25976949-1']);\r
-_gaq.push(['_trackPageview']);\r
-(function() {\r
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();\r
-</script>\r
-\r
-</body>\r
-</html>\r
-\r

diff --git a/org.tizen.ui.guides/html/native/dali/layout_n.htm b/org.tizen.ui.guides/html/native/dali/layout_n.htm
deleted file mode 100755 (executable)
index 955efab..0000000
--- a/org.tizen.ui.guides/html/native/dali/layout_n.htm
+++ /dev/null
@@ -1,213 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\r
-<head>\r
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
-       <meta http-equiv="X-UA-Compatible" content="IE=9" />\r
-       <link rel="stylesheet" type="text/css" href="../../css/styles.css" />\r
-       <link rel="stylesheet" type="text/css" href="../../css/snippet.css" />\r
-       <script type="text/javascript" src="../../scripts/snippet.js"></script> \r
-       <script type="text/javascript" src="../../scripts/jquery.util.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>\r
-       <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>\r
-\r
-       <title>Actors: Working with Basic DALi Components</title>  \r
-</head>\r
-\r
-<body onload="prettyPrint()" style="overflow: auto;">\r
-\r
-<div id="toc-navigation">\r
-       <div id="profile">\r
-               <p><img alt="Mobile native" src="../../images/mn_icon.png"/> <img alt="Wearable native" src="../../images/wn_icon.png"/></p>\r
-       </div>\r
-               <div id="toc_border"><div id="toc">\r
-               <p class="toc-title">Content</p>\r
-               <ul class="toc">\r
-                       <li><a href="#dimension">Dimensions</a></li>\r
-                       <li><a href="#resize">Resize Policies</a></li>\r
-                       <li><a href="#example">Example with Actors</a></li>\r
-               </ul>\r
-               <p class="toc-title">Related Info</p>\r
-               <ul class="toc">\r
-                       <li><a href="../../../../org.tizen.native.mobile.apireference/classDali_1_1Actor.html">Dali::Actor API for Mobile Native</a></li>\r
-                       <li><a href="../../../../org.tizen.native.wearable.apireference/classDali_1_1Actor.html">Dali::Actor API for Wearable Native</a></li>\r
-               </ul>\r
-       </div></div>\r
-</div> \r
-\r
-<div id="container"><div id="contents"><div class="content">\r
-<h1>Layout Management: Allocating the Sizes of the Actors</h1>\r
-\r
-<p>DALi provides rule-based layout management, size negotiation, which is used to allocate the sizes of the actors on the stage based on rules of dependency between the actors.</p> \r
-\r
-<h2 id="dimension" name="dimension">Dimensions</h2>\r
-<p>The notion of width and height is generalized into the concept of a dimension. Several methods take the <span style="font-family: Courier New,Courier,monospace;">Dimension</span> parameter. The <span style="font-family: Courier New,Courier,monospace;">Dimension</span> enum specifies the available dimensions as bit fields:</p>\r
-<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span></li>\r
-</ul>\r
-<p>If a method can process width and height at the same time, the <span style="font-family: Courier New,Courier,monospace;">Dimension::ALL_DIMENSIONS</span> mask can be specified.</p> \r
-\r
-<h2 id="resize" name="resize">Resize Policies</h2>\r
-\r
-<p>The <span style="font-family: Courier New,Courier,monospace;">ResizePolicy</span> enum specifies a range of options for controlling the way actors resize. These rules enable automatic resizing.</p>\r
-\r
-<table>\r
-   <caption>\r
-     Table: Resizing rules\r
-   </caption>\r
-   <tbody>\r
-    <tr>\r
-     <th>Resize policy</th>\r
-     <th>Description</th>\r
-        <th>Illustration</th>\r
-    </tr>\r
-    <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIXED</span></td>\r
-     <td>Use this option to maintain a specific size as set by the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function. This is the default for all actors.</td>\r
-        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fixed.png" /></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::USE_NATURAL_SIZE</span></td>\r
-     <td>Use this option for objects, such as images or text to get their natural size. This can mean the dimensions of an image or the size of text with no wrapping. You can also use this option with table views when the size of the table depends on its children.</td>\r
-        <td style="text-align:center;"><img alt="captured screen2" src="../../images/use_natural_size.png" /></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span></td>\r
-     <td>The size of the actor is similar to its parent&#39;s size with proportionate filling considered.</td>\r
-        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fill_to_parent.png" /></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_RELATIVE_TO_PARENT</span></td>\r
-     <td>The size of the actor is similar to its parent&#39;s size with a relative scale. Use the <span style="font-family: Courier New,Courier,monospace;">SetSizeModeFactor()</span> function to specify the ratio.</td>\r
-        <td style="text-align:center;"></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT</span></td>\r
-     <td>The size of the actor is similar to its parent&#39;s size with a fixed offset using the SetSizeModeFactor function.</td>\r
-        <td style="text-align:center;"></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span></td>\r
-     <td>The size of the actor is scaled around the size of the its children. For example, the height of a pop-up can be resized according to its contents.</td>\r
-        <td style="text-align:center;"><img alt="captured screen2" src="../../images/fit_to_children.png" /></td>\r
-    </tr>\r
-       <tr>\r
-     <td><span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span></td>\r
-     <td>This option covers rules, such as width-for-height and height-for-width. You can specify that one dimension depends on another.</td>\r
-        <td style="text-align:center;"><img alt="captured screen2" src="../../images/dimension_dependency.png" /></td>\r
-       </tr>\r
-   </tbody>\r
-  </table>\r
-\r
-\r
-<h2 id="example" name="example">Example with Actors</h2>\r
-\r
-<p>This section describes a layout example with a actor.</p> \r
-\r
-<h4>Enabling Size Negotiation</h4>\r
-\r
-<p>Text and image actors have relayout enabled by default, while plain actors are disabled unless the <span style="font-family: Courier New,Courier,monospace;">SetResizePolicy()</span> function is called.</p> \r
-\r
-<h4>Specifying Size Policies</h4>\r
-\r
-<p>Actors have different size policies by default. For example, the  image actor is set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span>. This ensures that an image actor uses its natural size by default when it is placed on the stage. However, if the <span style="font-family: Courier New,Courier,monospace;">SetSize()</span> function is used with sizes other than 0 on the image actor, the current resize policy is overridden by the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> policy and the actor takes the specified size.</p> \r
-\r
-<p>You can specify how an actor is size-negotiated:</p> \r
-\r
-<pre class="prettyprint">void SetResizePolicy(ResizePolicy::Type policy, Dimension::Type dimension) @endcode</pre>\r
-\r
-<p>It is possible to specify different policies for the different dimensions of width and height to archive different layouts. Different actors have different resize policies specified. For example, image actors are set to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> by default.</p> \r
-\r
-<p>The following example shows the <span style="font-family: Courier New,Courier,monospace;">rootActor</span> with its width set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span> and its height set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. It has an image actor added to it with an explicit call to <span style="font-family: Courier New,Courier,monospace;">USE_NATURAL_SIZE</span> in both dimensions called on it. This creates an actor that fills the space of its parent in the width dimension and fits its child in the height dimension. As the image actor child is using its natural size, the height of the root actor fits the height of the child image.</p> \r
-\r
-<pre class="prettyprint">Actor rootActor = Actor::New();\r
-rootActor.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
-rootActor.SetResizePolicy(ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT);\r
-ImageActor image = ImageActor::New(Image::New(MY_IMAGE_PATH));\r
-image.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);\r
-rootActor.Add(image);</pre>\r
-\r
-<p>The following images show the before and after layouts for this code example.</p>\r
-\r
-<p class="figure">Figure: Before and after setting the resize policy</p>  \r
-       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/before_resize.png"/></p>\r
-       <p align="center"><img alt="Before and after setting the resize policy" src="../../images/after_resize.png"/></p> \r
-\r
-\r
-<p>This example shows a root actor set to expand to its parent&#39;s width and adjust around its child&#39;s height. The child image actor is set to its natural size.</p> \r
-\r
-<p>To specify that a dimension has a dependency on another dimension, use the <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> policy. For example, if the dimension is <span style="font-family: Courier New,Courier,monospace;">Dimension::HEIGHT</span> and the dependency is <span style="font-family: Courier New,Courier,monospace;">Dimension::WIDTH</span>, there is a height-for-width dependency in effect. You can use the policy in a text view that wraps its text. The following example  shows a text view that expands its width according to the size of its parent, wraps its contents and then determines its height based on the width.</p> \r
-\r
-<pre class="prettyprint">TextLabel text = TextLabel::New(&quot;Example&quot;);\r
-text.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);\r
-text.SetResizePolicy(ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT);</pre>\r
-\r
-<h4>Specifying Sizes and Size Limits</h4>\r
-\r
-<p>To specify a fixed size for an actor, use the <span style="font-family: Courier New,Courier,monospace;">FIXED</span> resize policy and set the desired size using the SetSize function. If only 1 dimension is <span style="font-family: Courier New,Courier,monospace;">FIXED</span>, the other value in the size parameter is ignored, so it is safe to set it to 0.</p>\r
-<p>To constrain the final negotiated size of an actor, set the following minimum and maximum sizes, respectively:</p> \r
-\r
-<pre class="prettyprint">void SetMinimumSize(const Vector2&amp; size)\r
-void SetMaximumSize(const Vector2&amp; size)</pre>\r
-\r
-<h4>Adjusting the Negotiated Size</h4>\r
-\r
-<p>When an actor must to maintain the aspect ratio of its natural size, use the <span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy()</span> function. This is useful to ensure that images maintain their aspect ratio while still fitting the bounds they have been allocated.</p>\r
-<p>You can use the following resize policies:</p>\r
-<ul>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::USE_SIZE_SET</span>\r
-<p>This is the default policy.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FIT_WITH_ASPECT_RATIO</span>\r
-<p>Fits the actor within the bounds it has been allocated while maintaining the aspect ratio.</p></li>\r
-<li><span style="font-family: Courier New,Courier,monospace;">SizeScalePolicy::FILL_WITH_ASPECT_RATIO</span>\r
-<p>Fills all available space, potentially overflowing its bounds, while maintaining aspect ratio.</p></li>\r
-</ul>\r
-\r
-<pre class="prettyprint">void SetSizeScalePolicy(SizeScalePolicy::Type policy)</pre>\r
-\r
-<h4>Using Actors in Containers</h4>\r
-\r
-<p>When using actors in containers, such as a table view, you can specify the padding surrounding the actor. The padding specifies the left, right, bottom, and top padding value.</p> \r
-\r
-<pre class="prettyprint">void SetPadding(const Padding&amp; padding)</pre>\r
-\r
- <table class="note">\r
-   <tbody>\r
-    <tr>\r
-     <th class="note">Note</th>\r
-    </tr>\r
-    <tr>\r
-     <td class="note"><p>Beware of infinite dependency loops!</p>\r
-<p>The simplest form of this is shown when the resize policy of a parent actor is set to <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span> with a child that has a resize policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>.</p> \r
-<p>A more complex loop occurs when a parent actor has a width policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with a height policy of <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FIT_TO_CHILDREN</span>. The parent has a single child with a height policy <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::DIMENSION_DEPENDENCY</span> with width. If the child&#39;s width policy is <span style="font-family: Courier New,Courier,monospace;">ResizePolicy::FILL_TO_PARENT</span>, a loop occurs.</p>\r
-<p>Loops can occur over larger spreads of parent-child relationships. These loops are detected by the relayout algorithm, which allocates  actors 0 sizes.</p> </td>\r
-    </tr>\r
-   </tbody>\r
- </table>\r
-\r
-    \r
-<script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>\r
-<script type="text/javascript" src="../../scripts/showhide.js"></script>\r
-</div></div></div>\r
-\r
-<a class="top sms" href="#"><img src="../../images/btn_top.gif" alt="Go to top" /></a>\r
-\r
-<div id="footer">\r
-<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>\r
-</div>\r
-\r
-<script type="text/javascript">\r
-var _gaq = _gaq || [];\r
-_gaq.push(['_setAccount', 'UA-25976949-1']);\r
-_gaq.push(['_trackPageview']);\r
-(function() {\r
-var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
-ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
-var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
-})();\r
-</script>\r
-\r
-</body>\r
-</html>\r
-\r

diff --git a/org.tizen.ui.guides/html/native/efl/components_wn.htm b/org.tizen.ui.guides/html/native/efl/components_wn.htm
index 07466b0..046cc45 100755 (executable)
--- a/org.tizen.ui.guides/html/native/efl/components_wn.htm
+++ b/org.tizen.ui.guides/html/native/efl/components_wn.htm
@@ -171,7 +171,7 @@ elm_object_text_set(button, "Click me!");
 
 <h3>Using Button Styles</h3>
 
-<p>Various styles can be used on the button. Tizen supports the following styles for wearable core controls:</p>
+<p>Various styles can be used on the button. Tizen supports the following styles for the rectangular UI component:</p>
 <ul>
     <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
     <li><span style="font-family: Courier New,Courier,monospace">green</span></li>
@@ -179,7 +179,7 @@ elm_object_text_set(button, &quot;Click me!&quot;);
     <li><span style="font-family: Courier New,Courier,monospace">red</span></li>
     <li><span style="font-family: Courier New,Courier,monospace">nextdepth</span></li>
 </ul>
-<p>Tizen supports the following styles for Gear O:</p>
+<p>Tizen supports the following styles for the circular UI component:</p>
 <ul>
     <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
     <li><span style="font-family: Courier New,Courier,monospace">bottom</span></li>
@@ -188,10 +188,10 @@ elm_object_text_set(button, &quot;Click me!&quot;);
 <p>To change the style of the button, call the <span style="font-family: Courier New,Courier,monospace">elm_object_style_set()</span> function on the button object.</p>
 
 <pre class="prettyprint">
-// Example for wearable core control
+// Example for the rectangular UI component
 elm_object_style_set(button, &quot;nextdepth&quot;);
 
-// Example for Gear O
+// Example for the circular UI component
 elm_object_style_set(button, &quot;bottom&quot;);
 </pre>
 
@@ -273,12 +273,12 @@ check = elm_check_add(parent);
 <h3 id="Modifying" name="Modifying">Modifying the Check Styles</h3>
 
 <p>The check component style can be set with the <span style="font-family: Courier New,Courier,monospace;">elm_object_style_set()</span> function.</p>
-<p>The following styles are available for wearable core controls:</p>
+<p>The following styles are available for the rectangular UI component:</p>
 <ul>
        <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
        <li><span style="font-family: Courier New,Courier,monospace;">on and off</span></li>
 </ul>
-<p>The following styles are available for Gear O:</p>
+<p>The following styles are available for the circular UI component:</p>
 <ul>
        <li><span style="font-family: Courier New,Courier,monospace;">default</span></li>
        <li><span style="font-family: Courier New,Courier,monospace;">small</span></li>
@@ -307,7 +307,7 @@ elm_check_state_set(check, EINA_TRUE);
 Eina_Bool value = elm_check_state_get(check);
 </pre>
 
-<p>As with a radio object, an icon can be set for the wearable core control.</p>
+<p>As with a radio object, an icon can be set for the rectangular UI component.</p>
 <pre class="prettyprint">
 // Create a Home icon 
 Evas_Object *icon;
@@ -368,11 +368,11 @@ ctxpopup = elm_ctxpopup_add(parent);
 
 <h3>Modifying the Ctxpopup Style</h3>
 
-<p>The following styles are available for wearable core controls:</p>
+<p>The following styles are available for the rectangular UI component:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
 </ul>
-<p>The following styles are available for Gear O:</p>
+<p>The following styles are available for the circular UI component:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">select_mode</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">select_mode/top</span>, <span style="font-family: Courier New,Courier,monospace">select_mode/bottom</span> (These two styles can be used as a pair.)</li>
@@ -1949,17 +1949,17 @@ popup = elm_popup_add(parent);
 
 <h3>Using Popup Styles</h3>
 
-<p>The following item styles are available for wearable core controls:</p>
+<p>The following item styles are available for the rectangular UI component:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">popup</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">toast</span></li>
 </ul>
-<p>The following item styles are available for Gear O:</p>
+<p>The following item styles are available for the circular UI component:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">circle</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">toast/circle</span></li>
 </ul>
-<p>The following layout styles are available for Gear O:</p>
+<p>The following layout styles are available for the circular UI component:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">content/circle</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">content/circle/buttons1</span></li>
@@ -1972,7 +1972,7 @@ elm_object_style_set(popup, &quot;toast&quot;);
 </pre>
 
 
-<h3>Setting the Popup Areas in Wearable Core Controls</h3>
+<h3>Setting the Popup Areas in Rectangular UI Components</h3>
 <p>Configure the title area. Set the title text to <span style="font-family: Courier New,Courier,monospace">Test popup</span> using the partname <span style="font-family: Courier New,Courier,monospace">title,text</span>.</p>
 
 <pre class="prettyprint">
@@ -2010,7 +2010,7 @@ elm_object_part_content_set(popup, &quot;button1&quot;, button1);
 elm_object_part_content_set(popup, &quot;button2&quot;, button2);
 </pre>
 
-<h3>Setting the Popup Areas in Gear O</h3>
+<h3>Setting the Popup Areas in Circular UI Components</h3>
 <p>Set the circle style and the layout of the popup.</p>
 <pre class="prettyprint">
 // Setting the style
@@ -2116,7 +2116,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 
 <h3>Using the Progressbar Styles</h3>
 
-<p>The progressbar has several styles for wearable core controls:</p>
+<p>The progressbar has several styles for the rectangular UI components:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">default</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">pending_list</span></li>
@@ -2124,7 +2124,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 <li><span style="font-family: Courier New,Courier,monospace">process/groupindex</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">process/popup/small</span></li>
 </ul>
-<p>The progressbar has several styles for Gear O:</p>
+<p>The progressbar has several styles for the circular UI components:</p>
 <ul>
 <li><span style="font-family: Courier New,Courier,monospace">process</span></li>
 <li><span style="font-family: Courier New,Courier,monospace">process/small</span></li>
@@ -2136,7 +2136,7 @@ Evas_Object *pb = elm_progressbar_add(win);
 elm_object_style_set(pb, &quot;pending_list&quot;);
 </pre>
 
-<h3>Configuring the Progressbar for Wearable Core Control</h3>
+<h3>Configuring the Progressbar for Rectangular UI Components</h3>
 
 <p>The progressbar pulse mode is activated to make the progressbar loop infinitely between the start and end position.</p>
 <pre class="prettyprint">elm_progressbar_pulse_set(pb, EINA_TRUE);
@@ -2152,7 +2152,7 @@ elm_progressbar_pulse(pb, EINA_TRUE);
 <p>It is possible to read the current value.</p>
 <pre class="prettyprint">double value = elm_progressbar_value_get(pb);</pre>
 
-<h3>Configuring the Progressbar for Gear O</h3>
+<h3>Configuring the Progressbar for Circular UI Components</h3>
 <p>The progressbar emits the <span style="font-family: Courier New,Courier,monospace">changed</span> signal when the progress value changes. The value is changed with the <span style="font-family: Courier New,Courier,monospace">elm_progressbar_value_set()</span> function. Here the <span style="font-family: Courier New,Courier,monospace">pb</span> progress value is set to 20%.</p>
 
 <pre class="prettyprint">
@@ -2251,7 +2251,7 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)
 }
 </pre>
 
-       <h3>Using the Radio Callbacks with Gear O</h3>
+       <h3>Using the Radio Callbacks with Circular UI Components</h3>
        
 <p>This UI component emits the following signals:</p>
 <ul>
@@ -2274,7 +2274,7 @@ void changed_cb(void *data, Evas_Object *obj, void *event_info)
 </pre>
 
                
-                               <h2 id="slider" name="slider">Slider for the Wearable Core</h2>
+                               <h2 id="slider" name="slider">Slider for Rectangular UI Components</h2>
 
 <p class="figure">Figure: Slider component</p> 
 <p align="center"><img alt="Slider component" src="../../images/slider_wn.png" /></p>

diff --git a/org.tizen.ui.guides/html/native/efl/data_types_n.htm b/org.tizen.ui.guides/html/native/efl/data_types_n.htm
index f3dc7e0..a5850a0 100755 (executable)
--- a/org.tizen.ui.guides/html/native/efl/data_types_n.htm
+++ b/org.tizen.ui.guides/html/native/efl/data_types_n.htm
@@ -1572,7 +1572,7 @@ list = eina_inlist_append_relative(list, EINA_INLIST_GET(d), list);
 
 <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>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 &quot;object&quot; is freed.</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_struct</span>), and the list element is removed and the allocated memory of the container &quot;object&quot; is freed.</p>
 
 <pre class="prettyprint">while (list)
 {

diff --git a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
index a5d1ede..4e26221 100755 (executable)
--- a/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
+++ b/org.tizen.ui.guides/html/native/efl/notification_window_n.htm
@@ -163,8 +163,9 @@ void get_notification_level (Evas_Object *eo)
 
 <p>The EFL UTIL INPUT API (in <a href="../../../../org.tizen.native.mobile.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">mobile</a> and <a href="../../../../org.tizen.native.wearable.apireference/group__CAPI__EFL__UTIL__INPUT__MODULE.html">wearable</a> applications) allows you to generate input events (such as key and touch events).</p>
 
-<p>First you initialize the input generator and select a device type with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_initialize_generator()</span> function. To generate actual key or touch events, use the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_key()</span> or <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_touch()</span> function.</p>
-<p>When no longer needed, remember to free the input generator with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_deinitialize_generator()</span> function.</p>
+<p>First you must create the <span style="font-family: Courier New,Courier,monospace;">efl_util_inputgen_h</span> structure and initialize the structure members with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_initialize_generator()</span> function. To generate actual key or touch events, use the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_key()</span> or <span style="font-family: Courier New,Courier,monospace;">efl_util_input_generate_touch()</span> function.</p>
+<p>When no longer needed, remember to free the <span style="font-family: Courier New,Courier,monospace;">efl_util_inputgen_h</span> structure with the <span style="font-family: Courier New,Courier,monospace;">efl_util_input_deinitialize_generator()</span> function.</p>
+
 
 
 
@@ -268,45 +269,62 @@ void capture()
 
  <h2 id="input_gen_key" name="input_gen_key">Generating a Key Input Event</h2>
 
- <p>To generate key input events:</p>
+<p>To generate key input events:</p>
  
- <ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
-  <pre class="prettyprint">
+<ol><li>Execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_initialize_generator()</span> function:
+<pre class="prettyprint">
 void key_event_generator()
 {
 &nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;efl_util_inputgen_h inputgen = NULL;
 
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
-</pre></li>
- <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_key()</span> function to generate key input events:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_KEYBOARD);
+&nbsp;&nbsp;&nbsp;if (!inputgen)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize input generator
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize the input generator system
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(&quot;XF86Menu&quot;, 1);
+</pre>
+</li>
+
+<li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_key()</span> function to generate key input events:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(inputgen, &quot;XF86Menu&quot;, 1);
 &nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key press event
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
-
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(&quot;XF86Menu&quot;, 0);
+
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_key(inputgen, &quot;XF86Menu&quot;, 0);
 &nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a &quot;XF86Menu&quot; key release event
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
-
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
 </pre></li>
- <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
-}</pre></li></ol>
+
+<li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+
 
 
  <h2 id="input_gen_touch" name="input_gen_touch">Generating a Touch Input Event</h2>
@@ -318,46 +336,64 @@ void key_event_generator()
 void touch_event_generator()
 {
 &nbsp;&nbsp;&nbsp;int ret = EFL_UTIL_ERROR_NONE;
+&nbsp;&nbsp;&nbsp;efl_util_inputgen_h inputgen = NULL;
 
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
-</pre></li>
- <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_touch()</span> function to generate touch input events:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
+&nbsp;&nbsp;&nbsp;inputgen = efl_util_input_initialize_generator(EFL_UTIL_INPUT_DEVTYPE_TOUCHSCREEN);
+&nbsp;&nbsp;&nbsp;if (!inputgen)
 &nbsp;&nbsp;&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize input generator
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to initialize the input generator system
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
+</pre></li>
+ <li>After setting input device type, execute the <span style="font-family: Courier New,Courier,monospace">efl_util_input_generate_touch()</span> function to generate touch input events:
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_BEGIN, 100, 100);
 &nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch press event on (100, 100)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
-
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_UPDATE, 110, 110);
 &nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch move event to (110, 110)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_generate_touch(inputgen, 0, EFL_UTIL_INPUT_TOUCH_END, 110, 110);
 &nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE) 
 &nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to generate a first finger touch release event to (110, 110)
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;
 &nbsp;&nbsp;&nbsp;}
 </pre></li>
  <li>Free the resources with the <span style="font-family: Courier New,Courier,monospace">efl_util_input_deinitialize_generator()</span> function:
-  <pre class="prettyprint">
-&nbsp;&nbsp;&nbsp;efl_util_input_deinitialize_generator();
-}</pre></li></ol>
+<pre class="prettyprint">
+&nbsp;&nbsp;&nbsp;ret = efl_util_input_deinitialize_generator(inputgen);
+&nbsp;&nbsp;&nbsp;if (ret != EFL_UTIL_ERROR_NONE)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Failed to deinitialize the input generator system
+&nbsp;&nbsp;&nbsp;}
+}
+</pre></li></ol>
+
 
 <script type="text/javascript" src="../../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../../scripts/showhide.js"></script>

diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm b/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
index 385a8c1..d721fca 100755 (executable)
--- a/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
+++ b/org.tizen.ui.guides/html/native/efl/ui_components_mn.htm
@@ -1053,6 +1053,8 @@
  </tr>
  </tbody>
 </table>
+
+<p>For more details about customizing the look and feel of the UI components with custom styles which are not provided as defaults, see the <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm">ThemeExtension</a> sample.</p>
   
 <table class="note">
     <tbody>

diff --git a/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm b/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
index b79e119..36d62e9 100755 (executable)
--- a/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
+++ b/org.tizen.ui.guides/html/native/efl/ui_components_wn.htm
@@ -207,7 +207,7 @@
 <p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component. For more detailed information, see the <a href="theme_n.htm">Themes</a>.</p> 
 
 <table>
-<caption>Table: Button styles (wearable core)</caption>
+<caption>Table: Button styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -262,7 +262,7 @@
 </table>
 
 <table>
-<caption>Table: Check styles (wearable core)</caption>
+<caption>Table: Check styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -282,7 +282,7 @@
 </table>
 
 <table>
-<caption>Table: Contextual popup (Ctxpopup) styles (wearable core)</caption>
+<caption>Table: Contextual popup (Ctxpopup) styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -298,7 +298,7 @@
 </table>
 
 <table>
-<caption>Table: Datetime styles (wearable core)</caption>
+<caption>Table: Datetime styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -339,7 +339,7 @@
 </table>
 
 <table>
-<caption>Table: Genlist styles (wearable core)</caption>
+<caption>Table: Genlist styles</caption>
 
 <tbody>
 <tr>
@@ -438,7 +438,7 @@
 
 
 <table>
-<caption>Table: Index styles (wearable core)</caption>
+<caption>Table: Index styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -456,7 +456,7 @@
 </table>
 
 <table>
-<caption>Table: Popup styles (wearable core)</caption>
+<caption>Table: Popup styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -476,7 +476,7 @@
 </table>
 
 <table>
-<caption>Table: Progressbar styles (wearable core)</caption>
+<caption>Table: Progressbar styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -502,7 +502,7 @@
 </table>
 
 <table>
-<caption>Table: Radio styles (wearable core)</caption>
+<caption>Table: Radio styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -542,7 +542,7 @@
 <p>The following tables list the styles for each winset, including the names of the styles, and the name of the part where to set text or some other <span style="font-family: Courier New,Courier,monospace">Evas_Object</span> in the UI component.</p> 
 
 <table>
-<caption>Table: Button styles (Gear O)</caption>
+<caption>Table: Button styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -569,7 +569,7 @@
 </table>
 
 <table>
-<caption>Table: Check styles (Gear O)</caption>
+<caption>Table: Check styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -593,7 +593,7 @@
 </table>
 
 <table>
-<caption>Table: Contextual popup (Ctxpopup) styles (Gear O)</caption>
+<caption>Table: Contextual popup (Ctxpopup) styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -619,7 +619,7 @@
 </table>
 
 <table>
-<caption>Table: Datetime styles (Gear O)</caption>
+<caption>Table: Datetime styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -661,7 +661,7 @@
 
 
 <table>
-<caption>Table: Genlist styles (Gear O)</caption>
+<caption>Table: Genlist styles</caption>
 
 <tbody>
 <tr>
@@ -750,7 +750,7 @@
 
 
 <table>
-<caption>Table: Index styles (Gear O)</caption>
+<caption>Table: Index styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -768,7 +768,7 @@
 </table>
 
 <table>
-<caption>Table: Popup styles (Gear O)</caption>
+<caption>Table: Popup styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -788,7 +788,7 @@
 </table>
 
 <table>
-<caption>Table: Progressbar styles (Gear O)</caption>
+<caption>Table: Progressbar styles</caption>
 <tbody>
 <tr>
  <th>Style</th>
@@ -806,7 +806,7 @@
 </table>
 
 <table>
-<caption>Table: Radio styles (Gear O)</caption>
+<caption>Table: Radio styles</caption>
 <col width="20%"/>
 <col width="80%"/>
 <tbody>
@@ -836,7 +836,9 @@
  <td><span style="font-family: Courier New,Courier,monospace">elm.swallow.icon</span></td>
  </tr>
  </tbody>
-</table> 
+</table>
+
+<p>For more details about customizing the look and feel of the UI components with custom styles which are not provided as defaults, see the <a href="../../../../org.tizen.sampledescriptions/html/mobile_n/ui_theme_extension_sd_mn.htm">ThemeExtension</a> sample.</p> 
  
 <table class="note">
     <tbody>

diff --git a/org.tizen.ui.guides/html/native/guides_n.htm b/org.tizen.ui.guides/html/native/guides_n.htm
index 76cfcde..b98fee6 100755 (executable)
--- a/org.tizen.ui.guides/html/native/guides_n.htm
+++ b/org.tizen.ui.guides/html/native/guides_n.htm
@@ -50,6 +50,7 @@
        <p>Select the DALi 3D UI toolkit if you are creating a high-performance rich UI application.</p></li>
 </ul>
 
+
     
 <script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
 <script type="text/javascript" src="../scripts/showhide.js"></script>

diff --git a/org.tizen.ui.guides/html/web/tau/accessibility_w.htm b/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
index 324f157..dacbdc5 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/accessibility_w.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Accessibility: Supporting Easy Access</title>
+    <title>Accessibility: Supporting Web Accessibility</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -22,14 +22,14 @@
     <div id="toc_border"><div id="toc">
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI framework (TAU) API</a></li>
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
 
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    <h1>Accessibility: Supporting Easy Access</h1>
+    <h1>Accessibility: Supporting Web Accessibility</h1>
 
 
 <p>The <a href="http://www.w3.org/TR/wai-aria/" target="_blank">WAI-ARIA</a> (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to Web content in Web applications. The WAI-ARIA is composed of a role, states, and property, and its current version is 1.0. The Tizen screen reader sends the screen information to the user with the text-to-speech technology from WAI-ARIA data.</p>

diff --git a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
index 7baa5ca..a234ab4 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/circle_progressbar_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script 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 Progress Bar</title>
+       <title>Creating Circle-shaped Progress Bars</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Circle Progress Bar</h1>
+<h1>Creating Circle-shaped Progress Bars</h1>
 
 <p>You can create a circle-shaped progress bar component with the CircleProgressBar API.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
index b21a9f2..5be5f3f 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/circular_ui_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Circular UI: Creating Applications for the Circular UI</title>
+    <title>Applications for Circular UI: Developing UI on Circular Wearable Applications</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -35,7 +35,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    <h1>Circular UI: Creating Applications for the Circular UI</h1>
+    <h1>Applications for Circular UI: Developing UI on Circular Wearable Applications</h1>
 
 <p>TAU for Wearable supports different types of wearable devices (rectangle and circle) in the same application. To support the circular UI along with rectangular UI, media query is required.</p>
 
@@ -158,30 +158,27 @@ else
                <th>Description</th>
        </tr>
        <tr>
-        <td><a href="list_ww.htm">List</a></td>
-        <td>Shows how you can create a snap list component.</td>
-       </tr>
-       <tr>
         <td><a href="helper_ww.htm">Helper Script</a></td>
         <td>Shows how you to support some application components.</td>
        </tr>
        <tr>
-        <td><a href="header_ww.htm">Header</a></td>
+        <td><a href="list_ww.htm">Snap List</a></td>
+        <td>Shows how you can create a snap list component.</td>
+       </tr>
+
+       <tr>
+        <td><a href="header_ww.htm">Expandable Header</a></td>
         <td>Shows how you can create a header component.</td>
        </tr>
        <tr>
-        <td><a href="circle_progressbar_ww.htm">Circle Progress Bar</a></td>
+        <td><a href="circle_progressbar_ww.htm">Circle-shaped Progress Bar</a></td>
         <td>Shows how you can create a circle progress bar component.</td>
        </tr>
        <tr>
-        <td><a href="processing_ww.htm">Processing</a></td>
+        <td><a href="processing_ww.htm">Full Size Processing Component</a></td>
         <td>Shows how you can create a processing component.</td>
        </tr>
        <tr>
-        <td><a href="moreoptions_ww.htm">More Options</a></td>
-        <td>Shows how you can create a more options button component.</td>
-       </tr>
-       <tr>
         <td><a href="footerbutton_ww.htm">Footer Button</a></td>
         <td>Shows how you can create a footer button component.</td>
        </tr>
@@ -190,13 +187,18 @@ else
         <td>Shows how you can create a thumbnail component.</td>
        </tr>
        <tr>
-        <td><a href="popup_ww.htm">Popup</a></td>
+        <td><a href="popup_ww.htm">Popup Button</a></td>
         <td>Shows how you can create a popup component.</td>
-        </tr>
+    </tr>
+       <tr>
+               <td><a href="indexscrollbar_ww.htm">Index Scroll Bar</a></td>
+               <td>Shows how you can create an index scroll bar component.</td>
+       </tr>
        <tr>
-       <td><a href="indexscrollbar_ww.htm">Index Scroll Bar</a></td>
-        <td>Shows how you can create a index scroll bar component.</td>
-       </tr>
+        <td><a href="moreoptions_ww.htm">More Options</a></td>
+        <td>Shows how you can create a more options button component.</td>
+       </tr>
+       
 </tbody>
 </table>
 
@@ -222,4 +224,4 @@ else
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

diff --git a/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm b/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
index 0469c7b..94cb2f7 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/footerbutton_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Footer Button</title>
+       <title>Creating Footer Buttons</title>
 </head>
 <body onload="prettyPrint()" id="content">
 <div id="toc-navigation">
@@ -21,14 +21,14 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_selector.htm">Selector API</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_selector.htm">Selector API for Wearable Web</a></li>
                </ul>
        </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
 
-<h1>Footer Button</h1>
+<h1>Creating Footer Buttons</h1>
 
 <p>You can create a footer button component that is supported in both rectangular and circular UI.</p>
 
@@ -86,6 +86,7 @@
 &nbsp;&nbsp;&nbsp;&lt;/header&gt;
 &nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&nbsp;content-padding&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It&nbsp;was&nbsp;a&nbsp;real&nbsp;pleasure&nbsp;for&nbsp;me&nbsp;to&nbsp;finally&nbsp;get&nbsp;to&nbsp;meet&nbsp;you.&nbsp;My&nbsp;colleagues&nbsp;join&nbsp;me&nbsp;in&nbsp;sending&nbsp;you&nbsp;our&nbsp;holiday&nbsp;greetings.
+
 &nbsp;&nbsp;&nbsp;&lt;/div&gt;
 
 &nbsp;&nbsp;&nbsp;&lt;a&nbsp;class=&quot;drawer-handler&quot;&gt;&lt;/a&gt;
@@ -102,6 +103,7 @@
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;ui-btn&quot;&gt;1&lt;/a&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;ui-btn&quot;&gt;2&lt;/a&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;ui-btn&quot;&gt;3&lt;/a&gt;
+
 &nbsp;&nbsp;&nbsp;&lt;/footer&gt;
 &lt;/div&gt;
 </pre>
@@ -110,12 +112,15 @@
 <li>Edit the CSS code to set the visual style of the buttons:
 
 <pre class="prettyprint">
-.drawer-elem&nbsp;{
+.drawer-elem 
+{
 &nbsp;&nbsp;&nbsp;display:&nbsp;none;
 }
 
-@media&nbsp;all&nbsp;and&nbsp;(-tizen-geometric-shape:&nbsp;circle)&nbsp;{
-&nbsp;&nbsp;&nbsp;.drawer-handler&nbsp;{
+@media&nbsp;all&nbsp;and&nbsp;(-tizen-geometric-shape:&nbsp;circle)&nbsp;
+{
+&nbsp;&nbsp;&nbsp;.drawer-handler&nbsp;
+&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:24px;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;115px;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;fixed;
@@ -128,23 +133,29 @@
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-repeat:&nbsp;no-repeat;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-mask-position:&nbsp;0&nbsp;40px;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;.ui-bottom-button&nbsp;a&nbsp;+&nbsp;a&nbsp;{
+&nbsp;&nbsp;&nbsp;.ui-bottom-button&nbsp;a&nbsp;+&nbsp;a&nbsp;
+&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;
 &nbsp;&nbsp;&nbsp;}
 }
-</pre>
+ </pre>
+
 </li>
 <li>Edit the JavaScript code to manage the footer button events and other functionalities:
 <pre class="prettyprint">
-(function(){
-&nbsp;&nbsp;&nbsp;var page = document.querySelector("#bottomButtonWithMorePage"),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector("#moreoptionsDrawer"),
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler = page.querySelector(".ui-more");
-
-&nbsp;&nbsp;&nbsp;page.addEventListener( "pagebeforeshow", function() {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.helper.DrawerMoreStyle.create(drawer, {
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: ".drawer-handler",
+(function()
+{
+&nbsp;&nbsp;&nbsp;var page = document.querySelector(&quot;#bottomButtonWithMorePage&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;drawer = page.querySelector(&quot;#moreoptionsDrawer&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler = page.querySelector(&quot;.ui-more&quot;);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagebeforeshow&quot;, function() 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (tau.support.shape.circle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.helper.DrawerMoreStyle.create(drawer, 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler: &quot;.drawer-handler&quot;,
+
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;});
@@ -177,4 +188,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

diff --git a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
index f2f82bb..6c856c6 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/guides_tau_w.htm
@@ -71,22 +71,22 @@
 <li><a href="helloworld_w.htm">Hello World: Creating a Basic Hello World Page</a>
 <p>Enables you to make a Web application using TAU.</p></li>
 
-<li><a href="managing_page_w.htm">Managing Pages: Creating and Managing a Page Element</a>
-<p>Enables you to manage TAU pages.</p></li>
-
 <li><a href="event_handling_w.htm">Event Handling: Handling User Interactions</a>
 <p>Enables you to handle user events and interaction.</p></li>
 
+<li><a href="managing_page_w.htm">Managing Pages: Creating and Managing a Page Element</a>
+<p>Enables you to manage TAU pages.</p></li>
+
 <li><a href="ui_component_w.htm">UI Components: Managing UI Components</a>
 <p>Enables you to create and manage UI components.</p></li>
 
-<li><a href="notepad_w.htm">Creating a UI: Making a Notepad Application</a>
+<li><a href="notepad_w.htm">Creating a Notepad UI Application</a>
 <p>Enables you to create a notepad application with TAU.</p></li>
 
-<li><a href="circular_ui_ww.htm">Circular UI: Creating Applications for the Circular UI</a> in <strong>wearable applications only</strong>
+<li><a href="circular_ui_ww.htm">Applications for Circular UI: Developing UI on Circular Wearable Applications</a> in <strong>wearable applications only</strong>
 <p>Enables you to apply a circular UI to a wearable application.</p></li>
 
-<li><a href="accessibility_w.htm">Accessibility: Supporting Easy Access</a>
+<li><a href="accessibility_w.htm">Accessibility: Supporting Web Accessibility</a>
 <p>Enables you to manage application accessibility.</p></li>
 
 <li><a href="globalization_w.htm">Globalization: Supporting Internationalization and Localization</a>

diff --git a/org.tizen.ui.guides/html/web/tau/header_ww.htm b/org.tizen.ui.guides/html/web/tau/header_ww.htm
index 0739d11..83fea43 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/header_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/header_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Header</title>
+       <title>Creating Expandable Headers</title>
 </head>
 <body onload="prettyPrint()" id="content">
 <div id="toc-navigation">
@@ -21,13 +21,13 @@
        <div id="toc_border"><div id="toc">
                <p class="toc-title">Related Info</p>
                <ul class="toc">
-                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page Handling</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Wearable_UIComponents/wearable_marquee.htm">Marquee API for Wearable Web</a></li>
                </ul>
        </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Header</h1>
+<h1>Creating Expandable Headers</h1>
 
 <p>You can create an expandable header component for your application. The expandable header offers events to support interactivity with other components.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/helper_ww.htm b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
index ba91563..f856ea7 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/helper_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/helper_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Helper Script</title>
+       <title>Using Helper Script</title>
 </head>
 <body onload="prettyPrint()" id="content">
 <div id="toc-navigation">
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Helper Script</h1>
+<h1>Using Helper Script</h1>
 
 <p>You can use the TAU helper script to support some components for the Web applications. SnapListMarqueeStyle provides creating marquee-able and expandable list style with SnapListview.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm b/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
index fd0bd99..604c0ab 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/indexscrollbar_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Index Scroll Bar</title>
+       <title>Creating Index Scroll Bars</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -29,9 +29,9 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Index Scroll Bar</h1>
+<h1>Creating Index Scroll Bars</h1>
 
-<p>You can create a circle/rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.</p>
+<p>You can create a circle or rectangle shaped index scroll bar component with the CircularIndexScrollBar and IndexScrollBar API.</p>
 
   <table class="note"> 
    <tbody> 
@@ -47,8 +47,11 @@
 <p>The following figure shows the layout of the index scroll bar in a rectangular and circular UI.</p>
 
 <p class="figure">Figure: The circle-shaped progress bar in rectangular and circular devices</p>
-                       <p align="center"><img alt="index scroll bar in a rectangular device" src="../../images/rectangular_index.png" />  <img alt="Circle-shaped index scroll bar in a circular device" src="../../images/round_index.png" /></p>
+<p align="center"><img alt="index scroll bar in a rectangular device" src="../../images/rectangular_index.png" />  <img alt="Circle-shaped index scroll bar in a circular device" src="../../images/round_index.png" /></p>
 
+
+
+<h2 id="implement" name="implement">Implementation</h2>
 <p>To implement the index scroll bar:</p>
 
 <ol>
@@ -84,101 +87,127 @@
 <li>Edit the JavaScript code to manage the progress bar events and other functionality:
 <p>How to create a component selectively</p>
 <pre class="prettyprint">
-var indexScrollbarElement = document.getElementById("indexscrollbar");
-
-if (!tau.support.shape.circle) {
-       // Create IndexScrollbar
-       indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
-} else {
-       // Create CircularIndexScrollbar
-       indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
+var indexScrollbarElement = document.getElementById(&quot;indexscrollbar&quot;);
+
+if (!tau.support.shape.circle) 
+{
+&nbsp;&nbsp;&nbsp;// Create IndexScrollbar
+&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement);
+} 
+else 
+{
+&nbsp;&nbsp;&nbsp;// Create CircularIndexScrollbar
+&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement);
 }
 </pre>
 
-<p>How to use callback<p>
+<p>To use the callback:</p>
 <pre class="prettyprint">
-indexScrollbarElement.addEventListener("select", function( event ) {
-       var index = event.detail.index;
-       // do something using the index
-       console.log(index);
+indexScrollbarElement.addEventListener(&quot;select&quot;, function( event ) 
+{
+&nbsp;&nbsp;&nbsp;var index = event.detail.index;
+&nbsp;&nbsp;&nbsp;// Do something using the index
+&nbsp;&nbsp;&nbsp;console.log(index);
 });
 </pre>
 
-<p>In the following example, the list scrolls to the position of the list item defined using
-the ui-listview-divider class, selected by the index scroll bar:<br>
-(Note : In rectangular UI, touching index generates the select, but in round UI, the select occurs when using rotary.)<p>
+<p>In the following example, the list scrolls to the position of the list item defined using the <span style="font-family: Courier New,Courier,monospace">ui-listview-divider</span> class, selected by the index scroll bar.</p>
+<p>Note that in a rectangular UI, touching the index generates the selection, but in a round UI, the selection occurs when using the rotary.</p>
 
 <pre class="prettyprint">
-(function() {
-       var page = document.getElementById("pageIndexScrollbar"),
-               listviewElement = document.getElementById("list1"),
-               isCircle = tau.support.shape.circle,
-               scroller,
-               indexScrollbar;
-
-       page.addEventListener("pageshow", function(ev) {
-               var indexScrollbarElement = document.getElementById("indexscrollbar"),
-                       listDividers = listviewElement.getElementsByClassName("ui-listview-divider"),   // list dividers
-                       dividers = {},  // collection of list dividers
-                       indices = [],   // index list
-                       divider,
-                       i, idx;
-
-               // For all list dividers,
-               for(i = 0; i < listDividers.length; i++) {
-                       // Add the list divider elements to the collection
-                       divider = listDividers[i];
-                       idx = divider.innerText;
-                       dividers[idx] = divider;
-
-                       // Add the index to the index list
-                       indices.push(idx);
-               }
-
-               scroller = tau.util.selectors.getScrollableParent(listviewElement);
-
-               if (!isCircle) {
-                       indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
-               } else {
-                       // Create IndexScrollbar
-                       indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
-
-                       // Add SnapListview item "selected" event handler.
-                       listviewElement.addEventListener("selected", function (ev) {
-                               var indexValue = ev.target.textContent[0];
-                               indexScrollbar.value(indexValue);
-                       });
-               }
-
-               // Add IndexScrollbar index "select" event handler.
-               indexScrollbarElement.addEventListener("select", function (ev) {
-                       var divider,
-                               idx = ev.detail.index;
-
-                       divider = dividers[idx];
-                       if (divider && scroller) {
-                               // Scroll to the ui-listview-divider element
-                               scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
-                       }
-               });
-       });
-
-       page.addEventListener("pagehide", function(ev) {
-               indexScrollbar.destroy();
-       });
+(function() 
+{
+&nbsp;&nbsp;&nbsp;var page = document.getElementById(&quot;pageIndexScrollbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listviewElement = document.getElementById(&quot;list1&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isCircle = tau.support.shape.circle,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar;
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pageshow&quot;, function(ev) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var indexScrollbarElement = document.getElementById(&quot;indexscrollbar&quot;),
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listDividers = listviewElement.getElementsByClassName(&quot;ui-listview-divider&quot;), // List dividers
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dividers = {}, // Collection of list dividers
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indices = [],      // Index list
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i, idx;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// For all list dividers,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(i = 0; i &lt; listDividers.length; i++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add the list divider elements to the collection
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider = listDividers[i];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idx = divider.innerText;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dividers[idx] = divider;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add the index to the index list
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indices.push(idx);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller = tau.util.selectors.getScrollableParent(listviewElement);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!isCircle) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.IndexScrollbar(indexScrollbarElement, {index: indices, container: scroller});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Create IndexScrollbar
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar = new tau.widget.CircularIndexScrollbar(indexScrollbarElement, {index: indices});
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add SnapListview item &quot;selected&quot; event handler.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listviewElement.addEventListener(&quot;selected&quot;, function (ev) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var indexValue = ev.target.textContent[0];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar.value(indexValue);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Add IndexScrollbar index &quot;select&quot; event handler.
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbarElement.addEventListener(&quot;select&quot;, function (ev) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var divider,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idx = ev.detail.index;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;divider = dividers[idx];
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (divider &amp;&amp; scroller) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Scroll to the ui-listview-divider element
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scroller.scrollTop = divider.offsetTop - scroller.offsetTop;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
+&nbsp;&nbsp;&nbsp;});
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&quot;pagehide&quot;, function(ev) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;indexScrollbar.destroy();
+&nbsp;&nbsp;&nbsp;});
 } ());
 </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">
-       <hr size="1">
-       <font size="1">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>.</font>
+<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>
+</html>
\ No newline at end of file

diff --git a/org.tizen.ui.guides/html/web/tau/list_ww.htm b/org.tizen.ui.guides/html/web/tau/list_ww.htm
index a61ece5..c29d705 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/list_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/list_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>List</title>
+       <title>Creating Snap Lists</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>List</h1>
+<h1>Creating Snap Lists</h1>
 
 <p>You can create a snap list component with the marquee component using the SnapListview API and the <a href="helper_ww.htm">helper script</a>.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
index 2de840c..44dde0a 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/managing_page_w.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-    <title>Managing Pages: Creating and Managing a Page Element</title>
+    <title>Managing Page: Creating and Routing a Page</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -29,13 +29,13 @@
         </ul>
         <p class="toc-title">Related Info</p>
         <ul class="toc">
-            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/ui_fw_api_cover.htm">Tizen Advanced UI Framework (TAU) API</a></li>
+            <li><a href="../../../../org.tizen.web.apireference/html/ui_fw_api/Base/page.htm">Page API</a></li>
         </ul>
     </div></div>
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    <h1>Managing Pages: Creating and Managing a Page Element</h1>
+    <h1>Managing Page: Creating and Routing a Page</h1>
 
 <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>
 

diff --git a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
index fc01b93..34aa90b 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/moreoptions_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>More Options</title>
+       <title>Implementing More Options</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,11 +28,11 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>More Options</h1>
+<h1>Implementing More Options</h1>
+
+
+<p>In rectangular UI, you can implement more options using button and popup components. In the circular UI, the Selector component provides the more options button. This sample shows how to create a more options button for the circular UI.</p>
 
-In rectangular UI, you can implement more options using button and popup components.<p>
-Circular UI provides Selector component for more options button.<p>
-The following explains how to make the more options for Circular UI.<p>
 
   <table class="note"> 
    <tbody> 
@@ -61,6 +61,7 @@ The following explains how to make the more options for Circular UI.<p>
 &nbsp;&nbsp;&nbsp;&lt;/header&gt;
 &nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;ui-content&nbsp;content-padding&quot;&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;It&nbsp;was&nbsp;a&nbsp;real&nbsp;pleasure&nbsp;for&nbsp;me&nbsp;to&nbsp;finally&nbsp;get&nbsp;to&nbsp;meet&nbsp;you.&nbsp;My&nbsp;colleagues&nbsp;join&nbsp;me&nbsp;in&nbsp;sending&nbsp;you&nbsp;our&nbsp;holiday&nbsp;greetings.
+
 &nbsp;&nbsp;&nbsp;&lt;/div&gt;
 
 &nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Rectangular&nbsp;Profile&nbsp;--&gt;
@@ -100,26 +101,32 @@ The following explains how to make the more options for Circular UI.<p>
 <li>Edit the CSS code to set the visual style of the buttons:
 
 <pre class="prettyprint">
-#moreoptionsDrawer&nbsp;{
+#moreoptionsDrawer
+{
 &nbsp;&nbsp;&nbsp;display:&nbsp;none;
 }
 
-@media&nbsp;all&nbsp;and&nbsp;(-tizen-geometric-shape:&nbsp;circle)&nbsp;{
-&nbsp;&nbsp;&nbsp;#moreoptionsDrawer&nbsp;{
+@media&nbsp;all&nbsp;and&nbsp;(-tizen-geometric-shape:&nbsp;circle)&nbsp;
+{
+&nbsp;&nbsp;&nbsp;#moreoptionsDrawer
+&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.1);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;100%;
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;#moreoptionsPopup&nbsp;{
+&nbsp;&nbsp;&nbsp;#moreoptionsPopup
+&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;none;
 &nbsp;&nbsp;&nbsp;}
 }
 </pre>
+
 </li>
 <li>Edit the JavaScript code to manage the option button events and other functionality:
 
 <pre class="prettyprint">
-(function(){
+(function()
+{
 &nbsp;&nbsp;&nbsp;var&nbsp;page&nbsp;=&nbsp;document.querySelector(&quot;#moreoptionsPage&quot;),
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;popup&nbsp;=&nbsp;page.querySelector(&quot;#moreoptionsPopup&quot;),
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler&nbsp;=&nbsp;page.querySelector(&quot;.ui-more&quot;),
@@ -128,24 +135,35 @@ The following explains how to make the more options for Circular UI.<p>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper,
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound;
 
-&nbsp;&nbsp;&nbsp;function&nbsp;clickHandler(event)&nbsp;{
+&nbsp;&nbsp;&nbsp;function&nbsp;clickHandler(event)
+&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tau.openPopup(popup);
 &nbsp;&nbsp;&nbsp;}
-&nbsp;&nbsp;&nbsp;page.addEventListener(&nbsp;&quot;pagebeforeshow&quot;,&nbsp;function()&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper&nbsp;=&nbsp;tau.helper.DrawerMoreStyle.create(drawer,&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:&nbsp;&quot;.drawer-handler&quot;
-&nbsp;&nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Shape&nbsp;is&nbsp;square
-&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound&nbsp;=&nbsp;clickHandler.bind(null);
-&nbsp;&nbsp;&nbsp;&nbsp;handler.addEventListener(&quot;click&quot;,&nbsp;clickHandlerBound);
+&nbsp;&nbsp;&nbsp;page.addEventListener(&nbsp;&quot;pagebeforeshow&quot;,&nbsp;function()
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper&nbsp;=&nbsp;tau.helper.DrawerMoreStyle.create(drawer,
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler:&nbsp;&quot;.drawer-handler&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Shape&nbsp;is&nbsp;square
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clickHandlerBound&nbsp;=&nbsp;clickHandler.bind(null);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler.addEventListener(&quot;click&quot;,&nbsp;clickHandlerBound);
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+
 &nbsp;&nbsp;&nbsp;});
-&nbsp;&nbsp;&nbsp;page.addEventListener(&nbsp;&quot;pagebeforehide&quot;,&nbsp;function()&nbsp;{
-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)&nbsp;{
+
+&nbsp;&nbsp;&nbsp;page.addEventListener(&nbsp;&quot;pagebeforehide&quot;,&nbsp;function()&nbsp;
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(tau.support.shape.circle)
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handler.removeEventListener(&quot;click&quot;,&nbsp;clickHandlerBound);
-&nbsp;&nbsp;&nbsp;&nbsp;helper.destroy();
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;helper.destroy();
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;});
 })();
@@ -175,4 +193,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

diff --git a/org.tizen.ui.guides/html/web/tau/notepad_w.htm b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
index eb242ff..9719b18 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/notepad_w.htm
+++ b/org.tizen.ui.guides/html/web/tau/notepad_w.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script 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 a UI: Making a Notepad Application</title>
+    <title>Creating a Notepad UI Application</title>
 </head>
 <body onload="prettyPrint()" style="overflow: auto;">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-    <h1>Creating a UI: Making a Notepad Application</h1>
+    <h1>Creating a Notepad UI Application</h1>
 
 <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>
 

diff --git a/org.tizen.ui.guides/html/web/tau/popup_ww.htm b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
index c80d95e..406406e 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/popup_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/popup_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Popup</title>
+       <title>Creating Popup Buttons</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Popup</h1>
+<h1>Creating Popup Buttons</h1>
 
 <p>You can create bottom and side popup button components with the Popup API.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/processing_ww.htm b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
index 623f378..51696b3 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/processing_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/processing_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Processing</title>
+       <title>Creating Full Size Processing Components</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Processing</h1>
+<h1>Creating Full Size Processing Components</h1>
 
 <p>You can create a full size processing component with the Processing API.</p>
 

diff --git a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
index 3f83ee6..dfa05f3 100755 (executable)
--- a/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
+++ b/org.tizen.ui.guides/html/web/tau/thumbnail_ww.htm
@@ -10,7 +10,7 @@
        <script type="text/javascript" src="../../scripts/common.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/core.js" charset="utf-8"></script>
        <script type="text/javascript" src="../../scripts/search.js" charset="utf-8"></script>
-       <title>Thumbnail</title>
+       <title>Creating Thumbnails</title>
 </head>
 <body onload="prettyPrint()" id="content">
 
@@ -28,7 +28,7 @@
 </div>
 
 <div id="container"><div id="contents"><div class="content">
-<h1>Thumbnail</h1>
+<h1>Creating Thumbnails</h1>
 
 <p>You can create thumbnail component with the SectionChanger API.</p>
   <table class="note"> 

diff --git a/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm b/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
new file mode 100644 (file)
index 0000000..86924fd
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/drag_drop_mw.htm
@@ -0,0 +1,327 @@
+<!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>HTML5 Drag and drop: Handling Drag and Drop Events</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">Content</p>
+               <ul class="toc">
+                       <li><a href="#handle">Handling Drag and Drop Events</a></li>
+                       <li><a href="#transfer">Transferring Data over Drag and Drop</a></li>
+               </ul>
+        <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#dnd">HTML5 Drag and drop API for Mobile Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>HTML5 Drag and drop: Handling Drag and Drop Events</h1>
+ 
+   <table class="note"> 
+   <tbody> 
+    <tr> 
+     <th class="note">Note</th> 
+    </tr> 
+    <tr> 
+     <td class="note">This feature is supported in mobile applications only.</td> 
+    </tr> 
+   </tbody> 
+  </table> 
+ 
+<p>HTML5 drag and drop activates through event-based JavaScript and added attributes.
+</p>
+<p>
+The main features of the HTML5 Drag and drop API include:
+</p>
+<ul>
+<li>Using drag and drop
+<p>To make an element draggable, add the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to it. Only elements thus defined as draggable can <a href="#handle">generate drag and drop events</a>.</p>
+<p>A drag and drop requires a source, target, and data. It is used through the following events:</p>
+<ul><li><span style="font-family: Courier New,Courier,monospace">dragstart</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">drag</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragleave</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragenter</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragover</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">drop</span></li>
+<li><span style="font-family: Courier New,Courier,monospace">dragend</span></li></ul>
+<p>The <span style="font-family: Courier New,Courier,monospace">dragstart</span> and <span style="font-family: Courier New,Courier,monospace">drop</span> events send data through the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface.</p>
+</li>
+<li>Transferring data
+<p>You can <a href="#transfer">transfer data from the drag source to the drop target</a>. The <span style="font-family: Courier New,Courier,monospace">DataTransfer</span> interface instance receives the <span style="font-family: Courier New,Courier,monospace">dragstart</span> event and fills itself with the data to be transferred. It then receives a <span style="font-family: Courier New,Courier,monospace">drop</span> event, and puts the data into the drop target. </p></li>
+</ul>
+
+<table class="note">
+     <tbody>
+      <tr>
+       <th class="note">Note</th>
+      </tr>
+      <tr>
+       <td class="note">To use drag and drop in a Tizen device, long-press the draggable element. When the context menu appears, select the <strong>Drag</strong> menu.</td>
+      </tr>
+     </tbody>
+</table>
+
+<h2 id="handle" name="handle">Handling Drag and Drop Events</h2>
+
+<p>Learning how to handle drag and drop events is a basic user interaction skill:</p>
+
+
+<ol>
+<li><p>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to them:</p>
+<pre class="prettyprint lang-html">
+&lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
+&lt;div class=&quot;example_body&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div id=&quot;drag-list&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;1&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&quot;drag-row&quot; draggable=&quot;true&quot;&gt;2&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Add event listeners for the various drag and drop events:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#drag-list_.drag-row&#39;);
+&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
+
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStart, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drag&#39;, dragIng, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragenter&#39;, dragEnter, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOver, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeave, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDrop, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragend&#39;, dragEnd, false);
+&nbsp;&nbsp;&nbsp;};
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Define event handlers for the events. In this case, each event handler displays a text on the screen.
+<pre class="prettyprint">
+function dragStart(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragStart&quot;
+};
+
+function dragIng(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;drag&quot;
+};
+
+function dragOver(e) 
+{
+&nbsp;&nbsp;&nbsp;e.preventDefault();
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragOver&quot;
+};
+
+function dragEnter(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnter&quot;
+};     
+
+function dragLeave(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragLeave&quot;
+};
+
+function dragDrop(e) 
+{
+&nbsp;&nbsp;&nbsp;e.stopPropagation();
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragDrop&quot; 
+};
+       
+function dragEnd(e) 
+{
+&nbsp;&nbsp;&nbsp;log.innerHTML = &quot;dragEnd&quot;
+};
+</pre>
+</li>
+</ol>
+
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop.html</a></li>
+ </ul>
+
+ <h2 id="transfer" name="transfer">Transferring Data over Drag and Drop</h2>
+
+<p>Learning how to transfer data in a simple drag and drop puzzle is a basic user interaction skill:</p>
+
+<ol>
+<li>Define the draggable elements by adding the <span style="font-family: Courier New,Courier,monospace">draggable=&quot;true&quot;</span> attribute to them.
+<p>In this example, the Tizen logo image has been divided and allocated randomly. Each imager part is defined as draggable, so that the user can rearrange the image parts in the correct order.</p>
+<pre class="prettyprint lang-html">
+&lt;h1&gt;Drag and drop tutorial&lt;/h1&gt;
+&lt;div class=&quot;example_body&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;div&gt;Drag state: &lt;span id=&quot;log&quot;&gt;&lt;/span&gt;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;div class=&quot;holder&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/logo.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;txt&quot;&gt;Complete the puzzle to see a picture&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul id=&quot;puzzle&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_06.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_02.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_04.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_05.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_01.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class=&quot;puzzle-piece&quot; draggable=&quot;true&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&quot;images/puzz_03.png&quot;&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
+&nbsp;&nbsp;&nbsp;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+</li>
+
+<li>Add event listeners for the <span style="font-family: Courier New,Courier,monospace">dragover</span>, <span style="font-family: Courier New,Courier,monospace">dragleave</span>, <span style="font-family: Courier New,Courier,monospace">dragstart</span>, and <span style="font-family: Courier New,Courier,monospace">drop</span> events:
+<pre class="prettyprint lang-js">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;var cols = document.querySelectorAll(&#39;#puzzle_.puzzle-piece&#39;);
+&nbsp;&nbsp;&nbsp;var colsLength = cols.length;
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragstart&#39;, dragStartHandler, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragover&#39;, dragOverHandler, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;dragleave&#39;, dragLeaveHandler, false);
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].addEventListener(&#39;drop&#39;, dragDropHandler, false);
+&nbsp;&nbsp;&nbsp;};
+&lt;/script&gt;
+</pre>
+</li>
+
+<li>Transfer data (in this case, image parts):
+<ol type="a">
+<li>Declare the <span style="font-family: Courier New,Courier,monospace">dragElem</span> variable, which is an empty object for the data exchange:
+<pre class="prettyprint">
+var dragElem = null;
+</pre>
+</li>
+
+<li>Use the <a href="http://www.w3.org/TR/2012/WD-html5-20120329/dnd.html#the-datatransfer-interface" target="_blank">DataTransfer</a> interface in the <span style="font-family: Courier New,Courier,monospace">dragStartHandler()</span> and <span style="font-family: Courier New,Courier,monospace">dragDropHandler()</span> event handlers to exchange image parts:
+<pre class="prettyprint">
+function dragStartHandler(e) 
+{
+&nbsp;&nbsp;&nbsp;/* Set data */
+&nbsp;&nbsp;&nbsp;dragElem = this;
+&nbsp;&nbsp;&nbsp;e.dataTransfer.effectAllowed = &#39;move&#39;;
+&nbsp;&nbsp;&nbsp;e.dataTransfer.setData(&#39;text/html&#39;, this.innerHTML);
+&nbsp;&nbsp;&nbsp;this.classList.add(&#39;over&#39;);
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].classList.add(&#39;start&#39;);
+&nbsp;&nbsp;&nbsp;};
+};
+function dragDropHandler(e) 
+{
+&nbsp;&nbsp;&nbsp;/* Get data */
+&nbsp;&nbsp;&nbsp;dragElem.innerHTML = this.innerHTML;
+&nbsp;&nbsp;&nbsp;this.innerHTML = e.dataTransfer.getData(&#39;text/html&#39;);
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cols[i].className = &quot;puzzle-piece&quot;;
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;/* Check key */
+&nbsp;&nbsp;&nbsp;puzzleCheck();
+};
+</pre>
+</li>
+
+<li>Check the completion of the puzzle by making a user key using a simple array, and comparing the user key against the puzzle key (correct answer):
+<pre class="prettyprint">
+var puzzleKey =  [&quot;01&quot;, &quot;02&quot;, &quot;03&quot;, &quot;04&quot;, &quot;05&quot;, &quot;06&quot;];
+var puzzleArray = [];
+
+function puzzleCheck() 
+{
+&nbsp;&nbsp;&nbsp;/* Initialize the user key */
+&nbsp;&nbsp;&nbsp;puzzleArray = [];
+&nbsp;&nbsp;&nbsp;/* Insert the keys in the array */
+&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; colsLength; i++) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;puzzleArray.push(cols[i].children[0].getAttribute(&#39;src&#39;).substring(12, 14));
+&nbsp;&nbsp;&nbsp;};
+&nbsp;&nbsp;&nbsp;originKey = puzzleKey.join();
+&nbsp;&nbsp;&nbsp;userKey = puzzleArray.join();
+
+&nbsp;&nbsp;&nbsp;if (originKey === userKey)
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(&quot;Success !&quot;);
+&nbsp;&nbsp;&nbsp;};
+};
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+<p class="figure">Figure: Drag and drop puzzle</p> 
+<p align="center"><img alt="Drag and drop puzzle" src="../../images/dragdrop.png" /></p> 
+<h3>Source Code</h3>
+       <p>For the complete source code related to this use case, see the following files:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop" target="_blank">drag_and_drop_practical.html</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">logo.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_01.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_02.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_03.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_04.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_05.png</a></li>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/ui/html5_drag_and_drop/images" target="_blank">puzz_06.png</a></li>
+ </ul>
+
+<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

diff --git a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
index 126350b..9083b94 100755 (executable)
--- a/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
+++ b/org.tizen.ui.guides/html/web/w3c/guides_w3c_w.htm
@@ -34,17 +34,23 @@
 
 <p>The W3C specifications provide HTML and CSS, which are the core technologies for building Web pages and Web applications.</p>
 
-<p>To learn how to use the W3C features in your application UI, see the following topics:</p>
+<p>To learn to use the W3C features in your application UI, see the following topics:</p>
 
 <ul>
 <li>
-<strong>HTML5 Features</strong> 
+<strong>HTML tools</strong> 
 <p>HTML is the language for describing the structure of the Web pages.</p>
 
 <ul>
 
        <li><a href="html_priority_w.htm">HTML Priorities: Understanding HTML Behavior</a>
        <p>Enables you to use CSS and JavaScript code effectively with HTML elements.</p></li>
+       
+       <li><a href="html5forms_w.htm">HTML5 Forms: Managing User Input</a> 
+       <p>Enables you to easily implement Web forms for user input using HTML5 elements.</p></li>
+       
+       <li><a href="selector_w.htm">Selectors API Level 1 and Level 2: Selecting DOM Elements</a> 
+       <p>Enables you to select element nodes in the DOM tree by matching them against a group of selectors.</p></li>  
 
        <li><a href="media_query_w.htm">Media Queries: Labeling Output Devices in Style Sheets</a>
        <p>Enables you to define media features for specific output devices using the CSS media queries.</p></li>
@@ -57,15 +63,20 @@
 
        <li><a href="frame_flattening_mw.htm">Frame Flattening: Expanding Content According to Size</a> in <strong>mobile applications only</strong>
        <p>Allows you to improve the scrollability of small screens.</p></li>
+       
+       <li><a href="session_history_w.htm">HTML5 session history of browsing contexts: Managing Browsing Contexts</a> 
+       <p>Enables you to manage the browsing history of a device.</p></li>     
 
        <li><a href="clipboard_mw.htm">Clipboard API and events: Transferring Content Between Applications</a> in <strong>mobile applications only</strong>
        <p>Enables you to copy content and paste it in an editable area.</p></li>
+       <li><a href="drag_drop_mw.htm">HTML5 Drag and drop: Handling Drag and Drop Events</a> in <strong>mobile applications only</strong>
+       <p>Enables you to create and manage draggable elements and implement drag events.</p></li>
 </ul>
 </li>
 
 
 <li>
-<strong>CSS Features</strong> 
+<strong>CSS tools</strong> 
 <p>CSS is the language for describing the presentation of the Web pages, including colors, layout, and fonts.</p>
 <ul>
        <li><a href="transform_w.htm">CSS Transforms: Manipulating Elements</a> 
@@ -128,4 +139,4 @@ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga
 </script>
 
 </body>
-</html>
+</html>
\ No newline at end of file

diff --git a/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm b/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
new file mode 100644 (file)
index 0000000..b92cdda
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/html5forms_w.htm
@@ -0,0 +1,432 @@
+<!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>HTML5 Forms: Managing User Input</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="#element">New HTML5 Elements</a></li>
+                       <li><a href="#input">New Input Element Types</a></li>
+                       <li><a href="#attribute">New Input Element Attributes</a></li>
+                       <li><a href="#basic">Creating a Basic Login Form</a></li>
+                       <li><a href="#advanced">Creating an Advanced Login Form</a></li>                        
+               </ul>           
+               <p class="toc-title">Related Info</p>
+               <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#forms">HTML5 Forms API for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#forms">HTML5 Forms API for Wearable Web</a></li>
+                       </ul>
+       </div></div>
+</div> 
+
+<div id="container"><div id="contents"><div class="content">
+
+  <h1>HTML5 Forms: Managing User Input</h1> 
+
+<p>The HTML5 forms provide a convenient way to create consistent screens in your application for accepting user input. In the past, the Web form allowed you to accept user input before transmitting it to a server. With HTML5, you can now improve the user experience without having to use JavaScript by <a href="#basic">adding simple features</a>, for example, email validity checks and date pickers, and <a href="#advanced">using more advanced functionality</a>, such as security checks and input value pattern definitions.</p>
+
+<h2 id="element" name="element">New HTML5 Elements</h2>
+<p>The following table lists the new elements available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">elements.html</a>.</p>
+
+<table>
+<caption>Table: New HTML5 elements</caption>
+
+<tbody>
+    <tr>
+     <th>Element</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-datalist-element" target="_blank">datalist</a></td>
+     <td rowspan="1" colspan="1"> <p>Defines a set of option elements that represent predefined options for other controls. The element is used together with the <span style="font-family: Courier New,Courier,monospace">input</span> element to predefine its value.</p>
+<p>In Tizen, the value selected in the <span style="font-family: Courier New,Courier,monospace">datalist</span> element can be edited.</p></td>
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+&lt;input type=&quot;text&quot; list=&quot;search&quot;&gt;
+&lt;datalist id=&quot;search&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Tomato&quot;&gt;Tomato&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;banana&quot;&gt;banana&lt;/option&gt;
+&nbsp;&nbsp;&nbsp;&lt;option value=&quot;Watermelon&quot;&gt;Watermelon&lt;/option&gt;
+&lt;/datalist&gt;
+</pre>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-keygen-element" target="_blank">keygen</a></td>
+     <td rowspan="1" colspan="1"> <p>Defines a control for generating a public-private key pair and for submitting the public key from that key pair. The element creates an encrypted key with the value of the <span style="font-family: Courier New,Courier,monospace">name</span> attribute, saves it in the user&#39;s computer and Web server, and activates the next procedure when the 2 values match.</p></td>
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+&lt;label&gt;user:&lt;input type=&quot;text&quot; name=&quot;user_name&quot;&gt;&lt;/label&gt;
+&lt;label&gt;keygen:&lt;keygen name=&quot;keygen&quot;&gt;&lt;/label&gt;
+</pre>
+     </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-meter-element" target="_blank">meter</a></td>
+     <td rowspan="1" colspan="1"> <p>Represents a scalar measurement within a known range (the distribution of the assigned range), or a fractional value.</p></td>
+<td rowspan="1" colspan="1">
+<pre class="prettyprint">
+&lt;meter value=&quot;75&quot; min=&quot;0&quot; max=&quot;100&quot; low=&quot;60&quot; high=&quot;80&quot; optimum=&quot;81&quot;&gt;
+&nbsp;&nbsp;&nbsp;75/100
+&lt;/meter&gt;
+</pre>
+     </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-output-element" target="_blank">output</a></td>
+     <td rowspan="1" colspan="1"> <p>Represents the result of a calculation. The element generally shows the calculated result of the value that the user has entered, and is used within the <span style="font-family: Courier New,Courier,monospace">form</span> element.</p></td>
+      <td rowspan="1" colspan="1">
+<pre class="prettyprint">
+&lt;fieldset onsubmit=&quot;return false&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;oninput=&quot;foobar.value = parseInt(foo.value) * parseInt(bar.value)&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;foo&quot; name=&quot;foo&quot;&gt; *
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;number&quot; id=&quot;bar&quot; name=&quot;bar&quot;&gt; =
+&nbsp;&nbsp;&nbsp;&lt;output for=&quot;foo bar&quot; name=&quot;foobar&quot;&gt;&lt;/output&gt;
+&lt;/fieldset&gt;
+</pre>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-progress-element" target="_blank">progress</a></td>
+     <td rowspan="1" colspan="1"> <p>Represents the progress of a task.</p>
+     </td>
+     <td rowspan="1" colspan="1"><pre class="prettyprint">
+&lt;progress value=&quot;75&quot; max=&quot;100&quot;&gt;
+&nbsp;&nbsp;&nbsp;75/100
+&lt;/progress&gt;
+</pre></td>
+    </tr>
+</tbody>
+</table>
+
+<h2 id="input" name="input">New Input Element Types</h2>
+<p>The following table lists the new input element types available for your forms in HTML5. Many of the new elements activate a specific keyboard suitable for the type of value the user is expected to enter (for example, an email or URL). For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">types.html</a>.</p>
+
+<table>
+<caption>Table: New input element types</caption>
+
+<tbody>
+    <tr>
+     <th>Type</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#color-state" target="_blank">color</a></td>
+     <td rowspan="1" colspan="1"> <p>Select an HSL color from the color picker. The value format is HEX (#0099ff).</p>
+    </td>
+        <td rowspan="13" colspan="1">
+    <pre class="prettyprint">
+&lt;input type=&quot;color&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;#ff0000&quot;&gt;
+&lt;input type=&quot;datetime&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value=&quot;2012-12-12T03:30Z&quot;&gt;
+&lt;input type=&quot;email&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;required&gt;
+&lt;input type=&quot;number&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;step=&quot;3&quot;&gt;
+&lt;input type=&quot;range&quot;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;min=&quot;1&quot; max=&quot;10&quot;&gt;
+&lt;input type=&quot;tel&quot;&gt;
+&lt;input type=&quot;url&quot;&gt;
+</pre>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-state" target="_blank">date</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date with no time zone (yyyy-mm-dd).</p>
+    </td>
+
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#date-and-time-state" target="_blank">datetime</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date and time with the (UTC) time zone (yyyy-mm-ddTtt:mmZ).</p>
+
+</td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#local-date-and-time-state" target="_blank">datetime-local</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a date and time with no time zone (yyyy-mm-ddTtt:mm).</p>
+    </td>
+    </tr>
+
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#e-mail-state" target="_blank">email</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter an email address with the email keyboard.</p>
+     <p>If the <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used, the system checks whether the input format is in line with the ABNF regular expression (<span style="font-family: Courier New,Courier,monospace">1*(atext / &quot;.&quot;) &quot;@&quot; ldh-str 1*(&quot;.&quot; ldh-str)</span>).</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#month-state" target="_blank">month</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a year and month with no time zone (yyyy-mm).</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#number-state" target="_blank">number</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter numbers with the number keyboard.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/number-state.html#range-state" target="_blank">range</a> </td>
+     <td rowspan="1" colspan="1"> <p>Select a value from the slider.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#text-state-and-search-state" target="_blank">search</a></td>
+     <td rowspan="1" colspan="1"> <p>No specific functionality is defined for this element in the HTML5 specifications.</p>
+    </td>
+    </tr>
+         <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#telephone-state" target="_blank">tel</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a phone number with the number keyboard.</p>
+    </td>
+    </tr>
+    <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#time-state" target="_blank">time</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a time with no time zone (tt:mm:ss).</p>
+    </td>
+    </tr>
+         <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#url-state" target="_blank">url</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a URL with the URL keyboard.</p>
+    </td>
+    </tr>
+    <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/states-of-the-type-attribute.html#week-state" target="_blank">week</a></td>
+     <td rowspan="1" colspan="1"> <p>Enter a year and week with no time zone (yyyy-week).</p>
+    </td>
+    </tr>
+</tbody>
+</table>
+
+<h2 id="attribute" name="attribute">New Input Element Attributes</h2>
+
+<p>The following table lists the new input element attributes available for your forms in HTML5. For a complete source code, see <a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">attributes.html</a>.</p>
+
+<table>
+<caption>Table: New input element attributes</caption>
+
+<tbody>
+    <tr>
+     <th>Attribute</th>
+     <th>Description</th>
+     <th>Example</th>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-autocomplete" target="_blank">autocomplete</a></td>
+     <td rowspan="1" colspan="1"> <p>Prefilling feature, which helps the users by, for example, prefilling the user&#39;s address based on earlier user input.</p>
+     <p>The text used by the user before (such as an <span style="font-family: Courier New,Courier,monospace">input</span> element) is listed in a <span style="font-family: Courier New,Courier,monospace">datalist</span> form. The attribute can be used in all form elements, and is activated if the value is &quot;on&quot; and deactivated if the value is &quot;off&quot;.</p>
+    </td>
+    <td rowspan="6" colspan="1">
+    <pre class="prettyprint">
+&lt;input type=&quot;range&quot; min=&quot;1&quot; max=&quot;10&quot;&gt;
+&lt;input type=&quot;tel&quot; pattern=&quot;[0-9]+&quot; required&gt;
+&lt;input placeholder=&quot;You know what to do, huh?&quot;&gt;
+&lt;input type=&quot;number&quot; step=&quot;3&quot;&gt;
+</pre>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-min" target="_blank">min and max</a></td>
+     <td rowspan="1" colspan="1"> <p>Allowed range of values for the element.</p>
+     </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-pattern" target="_blank">pattern</a></td>
+     <td rowspan="1" colspan="1"> <p>Regular expression against which the control&#39;s value is checked.</p>
+     <p>The attribute can be used to check the validity of the form data. During service, a guide requiring the input format from the user is necessary.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-placeholder" target="_blank">placeholder</a></td>
+     <td rowspan="1" colspan="1"> <p>Short hint intended to aid the user with the data entry.</p>
+     <p>The attribute can be used in the majority of form elements for various purposes, such as hint text or advertisement.</p>
+    </td>
+    </tr>
+ <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-required" target="_blank">required</a></td>
+     <td rowspan="1" colspan="1"> <p>Boolean attribute which, when specified, defines that the element is mandatory.</p>
+    </td>
+    </tr>
+     <tr>
+     <td rowspan="1" colspan="1"><a href="http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#attr-input-step" target="_blank">step</a></td>
+     <td rowspan="1" colspan="1"> <p>Granularity expected of the value, limiting the allowed values.</p>
+    </td>
+    </tr>
+
+    </tbody>
+</table>
+
+<h2 id="basic" name="basic">Creating a Basic Login Form</h2>
+                               
+<p>To create simple user input forms, you must learn to use the HTML5 features in Web forms:</p>  
+
+<ol>
+<li><p>Create a simple form where the user can enter their login details (email address and password):</p>
+<pre class="prettyprint">
+&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;label&gt;email: &lt;input type=&quot;text&quot;&gt;&lt;/label&gt;
+&nbsp;&nbsp;&nbsp;&lt;label&gt;password: &lt;input type=&quot;password&quot;&gt;&lt;/label&gt;
+    
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
+&lt;/form&gt;
+</pre></li>
+<li><p>To check the validity of the entered email address automatically, add the <span style="font-family: Courier New,Courier,monospace">required</span> attribute to the <span style="font-family: Courier New,Courier,monospace">input</span> element with the <span style="font-family: Courier New,Courier,monospace">email</span> type:</p>
+<pre class="prettyprint">
+&lt;label&gt;email: &lt;input type=&quot;email&quot; required&gt;&lt;/label&gt;
+</pre></li>
+<li><p>Define the password field as mandatory by using the <span style="font-family: Courier New,Courier,monospace">required</span> attribute in that <span style="font-family: Courier New,Courier,monospace">input</span> element too:</p>
+<pre class="prettyprint">
+&lt;label&gt;password: &lt;input type=&quot;password&quot; required&gt;&lt;/label&gt;
+</pre></li>
+<li><p>Because a device has limited space on the screen, remove the field labels and replace them with hint texts using the <span style="font-family: Courier New,Courier,monospace">placeholder</span> attribute:</p>
+<pre class="prettyprint">
+&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
+&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
+</pre></li></ol>
+
+<p>The final form that checks the email validity and requires the mandatory password input is complete:</p>
+<pre class="prettyprint">
+&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
+&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
+    
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
+&lt;/form&gt;
+</pre>
+
+<h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/html5_forms" target="_blank">basicLogin.html</a></li>
+ </ul>
+                       
+<h2 id="advanced" name="advanced">Creating an Advanced Login Form</h2>
+                               
+<p>To create advanced user input forms, you must learn to use the HTML5 features in Web forms:</p> 
+ 
+<ol>
+<li><p><a href="#basic">Create a login form</a> that checks the email validity and requires the mandatory password input:</p>
+<pre class="prettyprint">
+&lt;form action=&quot;&quot; method=&quot;&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required&gt;
+&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
+    
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
+&lt;/form&gt;
+</pre></li>
+
+<li><p>When the form page is loaded on the screen, put the focus automatically to the email field by using the <span style="font-family: Courier New,Courier,monospace">autofocus</span> attribute:</p>
+<pre class="prettyprint">
+&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus&gt;
+</pre></li>
+
+<li>
+<p>To spare the user from filling in information that they have given previously, use the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute, which shows the previously successfully inserted entries in a <span style="font-family: Courier New,Courier,monospace">datalist</span>, from which the user can select and use them.</p>
+<p>You can apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to  a specific field by adding it to the appropriate <span style="font-family: Courier New,Courier,monospace">input</span> element. If you add it to the <span style="font-family: Courier New,Courier,monospace">form</span> element, it applies to all child elements within the form.</p>
+
+<pre class="prettyprint">
+&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
+</pre>
+</li>
+<li><p>In general, apply the <span style="font-family: Courier New,Courier,monospace">autocomplete</span> attribute to the <span style="font-family: Courier New,Courier,monospace">form</span> element, and then separately set it to <span style="font-family: Courier New,Courier,monospace">off</span> for those fields that must not use it. </p>
+<p>In the following example, the password field must not use autocomplete, to prevent unauthorized access by any user.</p>
+<pre class="prettyprint">
+&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required autocomplete=&quot;off&quot;&gt;
+</pre>
+</li>
+<li><p>Protect the password with private and public key pair using the <span style="font-family: Courier New,Courier,monospace">keygen</span> element.</p>
+<p>The element is used to transform the data sent from the connected form to a pair of encrypted keys using the RSA (Rivest Shamir Adleman) method. When the input data is sent from the form, the private key is saved in the local computer, and the public key is delivered to the server. Only if the keys match, the login process proceeds forwards.</p> 
+
+<pre class="prettyprint">
+&lt;keygen name=&quot;keyvalue&quot;&gt;
+</pre></li>
+
+<li><p>Use the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute to perform a validity check that ensures that the password field value matches the given regular expression. The <span style="font-family: Courier New,Courier,monospace">required</span> attribute is used to ensure that the field value must be entered and then the validity check can be performed.</p>
+<p>In the following example, the password only accepts numbers and letters of the alphabet. If an invalid value is entered, the login cannot proceed.</p> 
+
+<pre class="prettyprint">&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;[a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
+</pre></li>
+<li><p>Define the required length of the password within the <span style="font-family: Courier New,Courier,monospace">pattern</span> attribute. </p>
+<p>In the following example, the password must be 6 to 12 characters long.</p> 
+
+<pre class="prettyprint">
+&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
+</pre></li>
+</ol>
+
+<p>The final form with autofocus and autocomplete features, strengthened security, and password value requirements is complete:</p>
+
+<pre class="prettyprint">
+&lt;form action=&quot;&quot; method=&quot;&quot; autocomplete=&quot;on&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;fieldset&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Login&lt;/legend&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;email&quot; placeholder=&quot;e-mail address&quot; required autofocus&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type=&quot;password&quot; placeholder=&quot;password&quot; required 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pattern=&quot;(?=([a-zA-Z]+[0-9]+[a-zA-Z0-9]*|[0-9]+[a-zA-Z]+[a-zA-Z0-9]*)).{6,12}&quot; 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;autocomplete=&quot;off&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;/fieldset&gt;
+
+&nbsp;&nbsp;&nbsp;&lt;keygen name=&quot;keyvalue&quot;&gt;
+    
+&nbsp;&nbsp;&nbsp;&lt;input type=&quot;submit&quot; value=&quot;Login&quot;&gt;
+&lt;/form&gt;
+</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

diff --git a/org.tizen.ui.guides/html/web/w3c/selector_w.htm b/org.tizen.ui.guides/html/web/w3c/selector_w.htm
new file mode 100644 (file)
index 0000000..8753b68
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/selector_w.htm
@@ -0,0 +1,214 @@
+<!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>Selectors API Level 1 and Level 2: Selecting DOM Elements</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="#single">Selecting a Single Node</a></li>
+                       <li><a href="#multi">Selecting Multiple Nodes</a></li>
+                       <li><a href="#create">Creating an Accordion Menu</a>
+                       </li>
+               </ul>
+       <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors1">Selectors API Level 1 for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#selectors2">Selectors API Level 2 for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors1">Selectors API Level 1 for Wearable Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#selectors2">Selectors API Level 2 for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+<h1>Selectors API Level 1 and Level 2: Selecting DOM Elements</h1>
+
+<p>The selectors allow you to select element nodes in the DOM tree by matching them against a group of selectors, and testing whether the element matches a particular selector. Using selectors makes searching and selecting complex elements faster.</p>
+
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to retrieve the element nodes. Both methods accept a single parameter, a string selector. The string selector is a selector or a group of selectors that can be surrounded by whitespace. If you use a selector group as the string selector with the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method, the method returns the first element (if any) that matches any of the selectors in the group.</p>
+
+<p>The main features of the Selectors API Level 1 and Level 2 include:</p>
+<ul>
+<li>Selecting a single element
+<p>Use <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS Selectors</a> to <a href="#single">select a single element</a>.</p></li>
+<li>Selecting multiple elements simultaneously
+<p><a href="#multi">Select multiple elements</a> using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method.</p></li>
+</ul>
+<p>You can also <a href="#create">create an accordion menu</a>.</p>
+
+<h2 id="single" name="single">Selecting a Single Node</h2>
+<p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select a single node:</p>
+  <ol>
+  <li>To select the first matching element found in the child nodes, use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method with <a href="http://www.w3.org/TR/css3-selectors/" target="blank">CSS selectors</a>. You get the same result as when using the <span style="font-family: Courier New,Courier,monospace">getElementById()</span>, <span style="font-family: Courier New,Courier,monospace">getElementsByTagName()</span>, and <span style="font-family: Courier New,Courier,monospace">getElementsByClassName()</span> methods.
+  <pre class="prettyprint">var obj1 = document.getElementsByTagName(&#39;td&#39;)[0]; /* First &lt;td&gt; element in the document */
+var obj2 = document.getElementById(&#39;foo&#39;); /* Element with the ID #foo */
+var obj3 = document.getElementsByClassName(&#39;bar&#39;)[0]; /* First element in the bar class */
+  
+var obj4 = document.querySelector(&#39;td&#39;); /* Same as obj1 */
+var obj5 = document.querySelector(&#39;#foo&#39;); /* Same as obj2 */ 
+var obj6 = document.querySelector(&#39;.bar&#39;); /* Same as obj3 */</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>.</p></li>
+  <li>You can use the CSS selectors to ensure that elements with complex structures can be easily selected.
+  <p>For example, the following example selects the last element among the child nodes of the second <span style="font-family: Courier New,Courier,monospace">&lt;tr&gt;</span> element, which is a child of the <span style="font-family: Courier New,Courier,monospace">&lt;tbody&gt;</span> element in the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element of the document.</p>
+  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2) tbody &gt; tr:nth-child(2) :last-child&#39;);</pre></li>
+  <li>You can use method chaining to select an element:
+  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2)&#39;);
+var targetObj = obj.querySelector(&#39;tbody &gt; tr:nth-child(2) :last-child&#39;)</pre></li>
+</ol>
+
+<p class="figure">Figure: Single node selection (in mobile applications only)</p> 
+<p align="center"><img alt="Single node selection (in mobile applications only)" src="../../images/single_node_selection.png" /></p> 
+  <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
+ </ul>
+               
+                               <h2 id="multi" name="multi">Selecting Multiple Nodes</h2>
+                       <p>To enhance the user experience of your application, you must learn to use selectors to handle page elements, and to select multiple nodes in a node list:</p>
+  <ol>
+  <li>Select an element in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method:
+  <pre class="prettyprint">var obj = document.querySelector(&#39;table:nth-child(2)&#39;);</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">querySelector()</span> method returns the first matching element node within the subtrees of the context node. If no matching element is found, the method returns <span style="font-family: Courier New,Courier,monospace">null</span>. The query above selects the second <span style="font-family: Courier New,Courier,monospace">&lt;table&gt;</span> element in the document as a single element.</p>
+</li>
+
+<li>Select multiple elements in the node list using the <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method, and define a variable to represent the length of the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
+<pre class="prettyprint">var targetObj = obj.querySelectorAll(&#39;thead th, tbody td&#39;);
+var i = targetObj.length;</pre>
+<p> The <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> method returns an array containing all of the matching element nodes within the subtrees of the context node, in the document order, and saves the elements in a node list. If there are no matching nodes, the method returns an empty array. The query above selects the <span style="font-family: Courier New,Courier,monospace">&lt;th&gt;</span> elements in the table head and the <span style="font-family: Courier New,Courier,monospace">&lt;td&gt;</span> elements in the table body.</p>
+ </li> 
+<li>Apply a defined style to all elements stored in the <span style="font-family: Courier New,Courier,monospace">targetObj</span> node list:
+<pre class="prettyprint">while (0 &lt; i) 
+{
+&nbsp;&nbsp;&nbsp;i--;
+&nbsp;&nbsp;&nbsp;targetObj[i].style.backgroundColor = &#39;orange&#39;;
+&nbsp;&nbsp;&nbsp;targetObj[i].textContent = &#39;Exam 3&#39; + i;
+}</pre></li></ol>
+
+  <p class="figure">Figure: Multiple node selection (in mobile applications only)</p> 
+  <p align="center"><img alt="Multiple node selection (in mobile applications only)" src="../../images/multi_node_selection.png" /></p>
+   <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">accordion.html</a></li>
+ </ul>
+               
+                               <h2 id="create" name="create">Creating an Accordion Menu</h2>
+                               
+                       <p>To enhance the user experience of your application, you must learn to retrieve element nodes from the DOM tree to create a simple accordion menu.</p>
+  <p>The accordion menu is created using the CSS3 Basic User Interface Module Level 3 API (in <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#basicui">mobile</a> or <a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#basicui">wearable</a> applications). When a title is touched, the relevant content is shown, and other content is hidden.</p>
+  <ol>
+  <li>Create the HTML layout: 
+  <pre class="prettyprint">&lt;ul class=&quot;accordion&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class=&quot;title current&quot;&gt;Title 1&lt;p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 1&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;li&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p class="title"&gt;Title 2&lt;/p&gt;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;contents 2&lt;/div&gt;
+&nbsp;&nbsp;&nbsp;&lt;/li&gt;
+&nbsp;&nbsp;&nbsp;&lt;!--Other list elements--&gt;
+&lt;/ul&gt;</pre></li>
+
+<li>Use <a href="transition_w.htm">CSS transitions</a> to add sliding effects when content appears:
+<pre class="prettyprint lang-html">.accordion  &gt; li  &gt; div 
+{
+&nbsp;&nbsp;&nbsp;padding: 0 15px;
+
+&nbsp;&nbsp;&nbsp;&lt;!--Assign time for CSS transformation--&gt;
+&nbsp;&nbsp;&nbsp;-webkit-transition: all .5s;
+&nbsp;&nbsp;&nbsp;opacity: 0;
+&nbsp;&nbsp;&nbsp;height: 0;
+&nbsp;&nbsp;&nbsp;box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .5);
+&nbsp;&nbsp;&nbsp;line-height: 2;
+}
+&lt;!--Assign styles to be applied in case the current class is added to p.title--&gt;
+.accordion  &gt; li  &gt; p.current 
+{
+&nbsp;&nbsp;&nbsp;background: -webkit-linear-gradient(top, #666, #000);
+&nbsp;&nbsp;&nbsp;color: #fff;
+}
+.accordion &gt; li &gt; p.current + div 
+{
+&nbsp;&nbsp;&nbsp;opacity: 1;
+&nbsp;&nbsp;&nbsp;height: 200px;
+}</pre></li>
+<li>Use the <span style="font-family: Courier New,Courier,monospace">querySelector()</span> and <span style="font-family: Courier New,Courier,monospace">querySelectorAll()</span> methods to change the class of the subject in the elements where the event is fired:
+<pre class="prettyprint">var testAccordion = function(obj) 
+{
+&nbsp;&nbsp;&nbsp;var targetObj = document.querySelector(obj);
+&nbsp;&nbsp;&nbsp;var targetLength = document.querySelectorAll(obj + &#39;li&#39;).length;
+
+&nbsp;&nbsp;&nbsp;/* In case the elements are not selected */
+&nbsp;&nbsp;&nbsp;if (targetLength &lt;= 0) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;
+
+&nbsp;&nbsp;&nbsp;targetObj.onclick = function(e) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var that = e.target;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* In case the e.target class is not title */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((that.className !== &#39;title&#39;)) return false;
+
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0; i &lt; targetLength; i++) 
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Change all classes of the &#39;li p&#39; elements at the bottom of .accordion to title */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;targetObj.querySelectorAll(&#39;li p&#39;)[i].className = &#39;title&#39;;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* Define the e.target class as current */
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;that.className += &#39;current&#39;;
+&nbsp;&nbsp;&nbsp;}
+}</pre>
+</li>
+<li>Define the elements that use the accordion menu:
+<pre class="prettyprint">testAccordion(&#39;.accordion&#39;);</pre></li></ol>
+
+ <p class="figure">Figure: Accordion menu (in mobile applications only)</p> 
+ <p align="center"><img alt="Accordion menu (in mobile applications only)" src="../../images/accordion_menu.png" /></p>
+   <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/dom_forms_and_styles/selectors_api" target="_blank">selector_sample.html</a></li>
+ </ul>
+
+<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

diff --git a/org.tizen.ui.guides/html/web/w3c/session_history_w.htm b/org.tizen.ui.guides/html/web/w3c/session_history_w.htm
new file mode 100644 (file)
index 0000000..3908cec
--- /dev/null
+++ b/org.tizen.ui.guides/html/web/w3c/session_history_w.htm
@@ -0,0 +1,204 @@
+<!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>HTML5 session history of browsing contexts: Managing Browsing Contexts</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="#Managing_Session_History">Managing Session History Entries</a></li>
+                       <li><a href="#Detecting_Session_History">Detecting Session History Changes</a></li>
+               </ul>
+               <p class="toc-title">Related Info</p>
+        <ul class="toc">
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_m.html#history">HTML5 session history of browsing contexts API for Mobile Web</a></li>
+                       <li><a href="../../../../org.tizen.web.apireference/html/w3c_api/w3c_api_w.html#history">HTML5 session history of browsing contexts API for Wearable Web</a></li>
+            </ul>
+    </div></div>
+</div>
+
+<div id="container"><div id="contents"><div class="content">
+
+
+  <h1>HTML5 session history of browsing contexts: Managing Browsing Contexts</h1>
+ 
+ <p>You can manage the session history of browsing contexts.</p> 
+ <p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface is used to save in the session history the page information that has been read by the user. You can also use the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to directly store the page information which has already been analyzed in the URL, or general information which is not stored in the URL (such as location, or the scroll state of the page or a certain DOM element).</p>
+ 
+ 
+<p>The main features of the HTML5 session history of browsing contexts API include:</p>
+<ul>
+<li>Adding entries to the session history
+<p>You can use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <span style="font-family: Courier New,Courier,monospace">history</span> interface to <a href="#Managing_Session_History">add an entry to the session history</a>. With the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method, you can update the session history details.
+</p></li>
+<li>Detecting session history status changes
+<p>The <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event is fired when the user navigates to a page stored in the session history. The <span style="font-family: Courier New,Courier,monospace">popstate</span> event
+references the information stored with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> or <span style="font-family: Courier New,Courier,monospace">replaceState()</span> methods, and enables you to <a href="#Detecting_Session_History">change the status of the page based on the stored session history</a> (such as moving focus to a certain DOM element).</p>
+</li>
+</ul>
+
+ <h2 id="Managing_Session_History" name="Managing_Session_History">Managing Session History Entries</h2>
+                       
+<p>Learning how to manage the session history enhances the user browsing experience in your application:</p> 
+
+<ol>
+<li>To add an entry to the session history, use the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method of the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#the-history-interface" target="_blank">history</a> interface:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
+&lt;/script&gt;
+</pre>
+<table class="note"> 
+     <tbody> 
+      <tr> 
+       <th class="note">Note</th> 
+      </tr> 
+      <tr> 
+       <td class="note">The <span style="font-family: Courier New,Courier,monospace">pushState()</span> method accepts the <span style="font-family: Courier New,Courier,monospace">data</span>, <span style="font-family: Courier New,Courier,monospace">title</span>, and <span style="font-family: Courier New,Courier,monospace">url</span> (optional) parameters. The <span style="font-family: Courier New,Courier,monospace">title</span> parameter refers to the key value used to search for entries saved in the session history, and is currently ignored in all browsers.</td> 
+      </tr> 
+     </tbody> 
+    </table>
+</li>
+
+<li>To update the entry details, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method:
+<pre class="prettyprint">
+&lt;script&gt;
+&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title, &#39;#page&#39; + currentIndex);
+&lt;/script&gt;
+</pre>
+<p>The <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method uses the same parameters as the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method. The <span style="font-family: Courier New,Courier,monospace">history_sample.html</span> is the <span style="font-family: Courier New,Courier,monospace">url</span> parameter, which refers to the address of the page that is to be changed.</p>
+</li>
+
+<li>To use the session history information:
+<ol type="a">
+<li>Implement a page with the <strong>Prev</strong> and <strong>Next</strong> buttons:
+<pre class="prettyprint">
+&lt;nav class=&quot;paging&quot;&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Prev&lt;/a&gt;
+&nbsp;&nbsp;&nbsp;&lt;a href=&quot;#&quot;&gt;Next&lt;/a&gt;
+&lt;/nav&gt;
+&lt;p&gt;Current Index: &lt;output&gt; &lt;/output&gt;&lt;/p&gt;
+
+&lt;a href=&quot;http://tizen.org/&quot;&gt;Tizen.org&lt;/a&gt;
+</pre>
+</li>
+<li>When the user clicks the buttons, the current index value (representing page numbers) is changed and stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object of the <span style="font-family: Courier New,Courier,monospace">history</span> interface:
+<pre class="prettyprint">
+var currentIndex = 0;
+var prev = document.querySelector(&#39;.paging &gt; a:nth-child(1)&#39;);
+var next = document.querySelector(&#39;.paging &gt; a:nth-child(2)&#39;);
+
+/* Prev button click event */ 
+prev.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex -= 1;   
+&nbsp;&nbsp;&nbsp;setState(currentIndex);
+    
+&nbsp;&nbsp;&nbsp;return false;
+};
+    
+/* Next button click event */ 
+next.onclick = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex += 1;  
+&nbsp;&nbsp;&nbsp;setState(currentIndex);
+    
+&nbsp;&nbsp;&nbsp;return false;
+};
+</pre>
+</li>
+
+<li>If the <span style="font-family: Courier New,Courier,monospace">state</span> object has data in it, use the <span style="font-family: Courier New,Courier,monospace">replaceState()</span> method to change the previously stored information. Otherwise, add new info with the <span style="font-family: Courier New,Courier,monospace">pushState()</span> method.
+<pre class="prettyprint">
+function setState(currentIndex) 
+{
+&nbsp;&nbsp;&nbsp;if (history.state) 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.replaceState({index: currentIndex}, document.title, &#39;#page&#39; + currentIndex);
+&nbsp;&nbsp;&nbsp;} 
+&nbsp;&nbsp;&nbsp;else 
+&nbsp;&nbsp;&nbsp;{
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;history.pushState({index: currentIndex}, document.title);
+&nbsp;&nbsp;&nbsp;}
+&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
+}
+</pre>
+</li>
+</ol>
+</li>
+</ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
+ </ul>
+
+<h2 id="Detecting_Session_History" name="Detecting_Session_History">Detecting Session History Changes</h2>
+ 
+<p>Learning how to track session history changes enhances the user browsing experience in your application: </p> 
+ 
+<ol><li>A page with data stored in the session history fires a <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#event-popstate" target="_blank">popstate</a> event when the page is loaded (for example, because it is refreshed or moved to from the previous page).
+<p>Register the event listener:</p>
+
+<pre class="prettyprint">
+window.addEventListener(&quot;popstate&quot;, foo, false);
+</pre></li>
+
+<li>Define the event handler for the event. You can use the data stored in the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/history.html#state-object" target="_blank">state</a> object to retrieve the correct location on the page to be loaded.
+<pre class="prettyprint">
+var output = document.querySelector(&#39;output&#39;);
+
+window.onpopstate = function() 
+{
+&nbsp;&nbsp;&nbsp;currentIndex = history.state.index;
+&nbsp;&nbsp;&nbsp;output.textContent = currentIndex;
+}
+</pre>
+<p>In the snippet above, when a <span style="font-family: Courier New,Courier,monospace">popstate</span> event is fired, it saves the index value stored in the <span style="font-family: Courier New,Courier,monospace">state</span> object to the <span style="font-family: Courier New,Courier,monospace">currentIndex</span> variable, and outputs the <span style="font-family: Courier New,Courier,monospace">&lt;output&gt;</span> element from the correct index location.
+</p>
+
+</li></ol>
+ <h3>Source Code</h3>
+ <p>For the complete source code related to this use case, see the following file:</p>
+ <ul>
+       <li><a href="http://download.tizen.org/misc/examples/w3c_html5/communication/html5_the_session_history_of_browsing_contexts" target="_blank">history_state.html</a></li>
+ </ul> 
+
+<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

diff --git a/org.tizen.ui.guides/index.xml b/org.tizen.ui.guides/index.xml
index 71bb9fb..78f30e1 100755 (executable)
--- a/org.tizen.ui.guides/index.xml
+++ b/org.tizen.ui.guides/index.xml
@@ -7,32 +7,36 @@
 <topic href="html/web/guides_w.htm" label="Web Application">
        <topic href="html/web/tau/guides_tau_w.htm" label="TAU">
                <topic href="html/web/tau/helloworld_w.htm" label="Hello World"></topic>
-               <topic href="html/web/tau/managing_page_w.htm" label="Managing Pages"></topic>
                <topic href="html/web/tau/event_handling_w.htm" label="Event Handling"></topic>
+               <topic href="html/web/tau/managing_page_w.htm" label="Managing Page"></topic>
                <topic href="html/web/tau/ui_component_w.htm" label="UI Components"></topic>
-               <topic href="html/web/tau/notepad_w.htm" label="Creating a UI"></topic>
-               <topic href="html/web/tau/circular_ui_ww.htm" label="Circular UI">
-                       <topic href="html/web/tau/list_ww.htm" label="List"></topic>
-                       <topic href="html/web/tau/helper_ww.htm" label="Helper Script"></topic>
-                       <topic href="html/web/tau/header_ww.htm" label="Header"></topic>
-                       <topic href="html/web/tau/circle_progressbar_ww.htm" label="Circle Progress Bar"></topic>
-                       <topic href="html/web/tau/processing_ww.htm" label="Processing"></topic>
-                       <topic href="html/web/tau/moreoptions_ww.htm" label="More Options"></topic>
-                       <topic href="html/web/tau/footerbutton_ww.htm" label="Footer Button"></topic>
-                       <topic href="html/web/tau/thumbnail_ww.htm" label="Thumbnail"></topic>          
-                       <topic href="html/web/tau/popup_ww.htm" label="Popup"></topic>
-                       <topic href="html/web/tau/indexscrollbar_ww.htm" label="Index Scroll Bar"></topic>
+               <topic href="html/web/tau/notepad_w.htm" label="Creating a Notepad UI Application"></topic>
+               <topic href="html/web/tau/circular_ui_ww.htm" label="Applications for Circular UI">
+                       <topic href="html/web/tau/helper_ww.htm" label="Using Helper Script"></topic>
+                       <topic href="html/web/tau/list_ww.htm" label="Creating Snap Lists"></topic>
+                       <topic href="html/web/tau/header_ww.htm" label="Creating Expandable Headers"></topic>
+                       <topic href="html/web/tau/circle_progressbar_ww.htm" label="Creating Circle-shaped Progress Bars"></topic>
+                       <topic href="html/web/tau/processing_ww.htm" label="Creating Full Size Processing Components"></topic>
+                       <topic href="html/web/tau/footerbutton_ww.htm" label="Creating Footer Buttons"></topic>
+                       <topic href="html/web/tau/thumbnail_ww.htm" label="Creating Thumbnails"></topic>                
+                       <topic href="html/web/tau/popup_ww.htm" label="Creating Popup Buttons"></topic>
+                       <topic href="html/web/tau/indexscrollbar_ww.htm" label="Creating Index Scroll Bars"></topic>
+                       <topic href="html/web/tau/moreoptions_ww.htm" label="Implementing More Options"></topic>
                </topic>
                <topic href="html/web/tau/accessibility_w.htm" label="Accessibility"></topic>
                <topic href="html/web/tau/globalization_w.htm" label="Globalization"></topic>
        </topic>
        <topic href="html/web/w3c/guides_w3c_w.htm" label="W3C">                        
                <topic href="html/web/w3c/html_priority_w.htm" label="HTML Priorities"></topic>
+               <topic href="html/web/w3c/html5forms_w.htm" label="HTML5 Forms"></topic>
+               <topic href="html/web/w3c/selector_w.htm" label="Selectors API Level 1 and Level 2"></topic>
                <topic href="html/web/w3c/media_query_w.htm" label="Media Queries"></topic>
                <topic href="html/web/w3c/multiple_screens_mw.htm" label="Multiple Screen Support"></topic>
                <topic href="html/web/w3c/ui_layout_ww.htm" label="Multiple UI Layouts"></topic>
                <topic href="html/web/w3c/frame_flattening_mw.htm" label="Frame Flattening"></topic>
+               <topic href="html/web/w3c/session_history_w.htm" label="HTML5 session history of browsing contexts"></topic>
                <topic href="html/web/w3c/clipboard_mw.htm" label="Clipboard API and events"></topic>
+               <topic href="html/web/w3c/drag_drop_mw.htm" label="HTML5 Drag and drop"></topic>
                <topic href="html/web/w3c/transform_w.htm" label="CSS Transforms"></topic>
                <topic href="html/web/w3c/animation_w.htm" label="CSS Animations Module Level 3"></topic>
                <topic href="html/web/w3c/transition_w.htm" label="CSS Transitions Module Level 3"></topic>